diff --git a/js/background.js b/js/background.js index 10d6f1958..0e63c507a 100644 --- a/js/background.js +++ b/js/background.js @@ -383,12 +383,6 @@ confirmDialog.render(); }; - window.showNicknameDialog = params => { - if (appView) { - appView.showNicknameDialog(params); - } - }; - window.showResetSessionIdDialog = () => { appView.showResetSessionIdDialog(); }; diff --git a/js/views/app_view.js b/js/views/app_view.js index bd23dac0e..0800c3a0a 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -113,19 +113,6 @@ window.focus(); // FIXME return Promise.resolve(); }, - showEditProfileDialog(options) { - // eslint-disable-next-line no-param-reassign - options.theme = this.getThemeObject(); - const dialog = new Whisper.EditProfileDialogView(options); - this.el.prepend(dialog.el); - }, - showNicknameDialog(options) { - // // eslint-disable-next-line no-param-reassign - const modifiedOptions = { ...options }; - modifiedOptions.theme = this.getThemeObject(); - const dialog = new Whisper.SessionNicknameDialog(modifiedOptions); - this.el.prepend(dialog.el); - }, showResetSessionIdDialog() { const theme = this.getThemeObject(); const resetSessionIDDialog = new Whisper.SessionIDResetDialog({ theme }); diff --git a/js/views/edit_profile_dialog_view.js b/js/views/edit_profile_dialog_view.js deleted file mode 100644 index 4555e5f8b..000000000 --- a/js/views/edit_profile_dialog_view.js +++ /dev/null @@ -1,45 +0,0 @@ -// /* global i18n, Whisper */ - -// // eslint-disable-next-line func-names -// (function() { -// 'use strict'; - -// window.Whisper = window.Whisper || {}; - -// Whisper.EditProfileDialogView = Whisper.View.extend({ -// className: 'loki-dialog modal', -// initialize({ profileName, avatarPath, pubkey, onOk, theme }) { -// this.close = this.close.bind(this); - -// this.profileName = profileName; -// this.pubkey = pubkey; -// this.avatarPath = avatarPath; -// this.onOk = onOk; -// this.theme = theme; - -// this.$el.focus(); -// this.render(); -// }, -// render() { -// this.dialogView = new Whisper.ReactWrapperView({ -// className: 'edit-profile-dialog', -// Component: window.Signal.Components.EditProfileDialog, -// props: { -// onOk: this.onOk, -// onClose: this.close, -// profileName: this.profileName, -// pubkey: this.pubkey, -// avatarPath: this.avatarPath, -// i18n, -// theme: this.theme, -// }, -// }); - -// this.$el.append(this.dialogView.el); -// return this; -// }, -// close() { -// this.remove(); -// }, -// }); -// })(); diff --git a/js/views/onion_status_dialog_view.js b/js/views/onion_status_dialog_view.js deleted file mode 100644 index 2e5b10883..000000000 --- a/js/views/onion_status_dialog_view.js +++ /dev/null @@ -1,37 +0,0 @@ -// /* global i18n, Whisper */ - -// // eslint-disable-next-line func-names -// (function() { -// 'use strict'; - -// window.Whisper = window.Whisper || {}; - -// Whisper.OnionStatusDialogView = Whisper.View.extend({ -// className: 'loki-dialog modal', -// initialize({ theme }) { -// this.close = this.close.bind(this); - -// this.theme = theme; - -// this.$el.focus(); -// this.render(); -// }, -// render() { -// this.dialogView = new Whisper.ReactWrapperView({ -// className: 'onion-status-dialog', -// Component: window.Signal.Components.OnionStatusDialog, -// props: { -// onClose: this.close, -// i18n, -// theme: this.theme, -// }, -// }); - -// this.$el.append(this.dialogView.el); -// return this; -// }, -// close() { -// this.remove(); -// }, -// }); -// })(); diff --git a/js/views/session_change_nickname_dialog_view.js b/js/views/session_change_nickname_dialog_view.js deleted file mode 100644 index a4ddd088c..000000000 --- a/js/views/session_change_nickname_dialog_view.js +++ /dev/null @@ -1,54 +0,0 @@ -/* global Whisper */ - -// eslint-disable-next-line func-names -(function() { - 'use strict'; - - window.Whisper = window.Whisper || {}; - - Whisper.SessionNicknameDialog = Whisper.View.extend({ - className: 'loki-dialog session-nickname-wrapper modal', - initialize(options) { - this.props = { - title: options.title, - message: options.message, - onClickOk: this.ok.bind(this), - onClickClose: this.cancel.bind(this), - convoId: options.convoId, - placeholder: options.placeholder, - }; - this.render(); - }, - registerEvents() { - this.unregisterEvents(); - document.addEventListener('keyup', this.props.onClickClose, false); - }, - - unregisterEvents() { - document.removeEventListener('keyup', this.props.onClickClose, false); - this.$('session-nickname-wrapper').remove(); - }, - render() { - this.dialogView = new Whisper.ReactWrapperView({ - className: 'session-nickname-wrapper', - Component: window.Signal.Components.SessionNicknameDialog, - props: this.props, - }); - - this.$el.append(this.dialogView.el); - return this; - }, - - close() { - this.remove(); - }, - cancel() { - this.remove(); - this.unregisterEvents(); - }, - ok() { - this.remove(); - this.unregisterEvents(); - }, - }); -})(); diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index 28b76c6a6..c5fc26367 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { ActionsPanel, SectionType } from './session/ActionsPanel'; import { LeftPaneMessageSection } from './session/LeftPaneMessageSection'; @@ -86,12 +86,9 @@ const InnerLeftPaneContactSection = () => { ); }; -const LeftPaneSettingsSection = () => { - return ; -}; - -const LeftPaneSection = (props: { isExpired: boolean }) => { +const LeftPaneSection = (props: { isExpired: boolean, setModal: any}) => { const focusedSection = useSelector(getFocusedSection); + const { setModal } = props; if (focusedSection === SectionType.Message) { return ; @@ -101,7 +98,7 @@ const LeftPaneSection = (props: { isExpired: boolean }) => { return ; } if (focusedSection === SectionType.Settings) { - return ; + return ; } return <>; }; @@ -109,14 +106,20 @@ const LeftPaneSection = (props: { isExpired: boolean }) => { export const LeftPane = (props: Props) => { const theme = useSelector(getTheme); + const [modal, setModal] = useState(null); + return ( - -
- -
- + <> + { modal ? modal : null} + +
+ + +
+ +
-
- + + ); }; diff --git a/ts/components/session/LeftPaneSettingSection.tsx b/ts/components/session/LeftPaneSettingSection.tsx index dd69604a2..1b1a2865f 100644 --- a/ts/components/session/LeftPaneSettingSection.tsx +++ b/ts/components/session/LeftPaneSettingSection.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import classNames from 'classnames'; import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton'; @@ -12,6 +12,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { showSettingsSection } from '../../state/ducks/section'; import { getFocusedSettingsSection } from '../../state/selectors/section'; import { getTheme } from '../../state/selectors/theme'; +import { SessionConfirm } from './SessionConfirm'; type Props = { settingsCategory: SessionSettingCategory; @@ -102,21 +103,35 @@ const LeftPaneSettingsCategories = () => { ); }; -const onDeleteAccount = () => { +const onDeleteAccount = ( setModal: any) => { const title = window.i18n('clearAllData'); const message = window.i18n('deleteAccountWarning'); - window.confirmationDialog({ - title, - message, - resolve: deleteAccount, - okTheme: 'danger', - }); + // window.confirmationDialog({ + // title, + // message, + // resolve: deleteAccount, + // okTheme: 'danger', + // }); + + const clearModal = () => { + setModal(null); + } + + setModal( + ) }; -const LeftPaneBottomButtons = () => { +const LeftPaneBottomButtons = (props: { setModal: any}) => { const dangerButtonText = window.i18n('clearAllData'); const showRecoveryPhrase = window.i18n('showRecoveryPhrase'); + const { setModal } = props; return (
@@ -124,7 +139,7 @@ const LeftPaneBottomButtons = () => { text={dangerButtonText} buttonType={SessionButtonType.SquareOutline} buttonColor={SessionButtonColor.Danger} - onClick={onDeleteAccount} + onClick={onDeleteAccount(setModal)} /> { ); }; -export const LeftPaneSettingSection = () => { +export const LeftPaneSettingSection = (props: { setModal: any}) => { const theme = useSelector(getTheme); + const { setModal } = props; return (
- +
); diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index 8c567bdc4..192387d0f 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/ts/components/session/SessionConfirm.tsx @@ -3,24 +3,25 @@ import { SessionModal } from './SessionModal'; import { SessionButton, SessionButtonColor } from './SessionButton'; import { SessionHtmlRenderer } from './SessionHTMLRenderer'; import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; -import { DefaultTheme, withTheme } from 'styled-components'; +import { DefaultTheme, useTheme, withTheme } from 'styled-components'; +import { SessionWrapperModal } from './SessionWrapperModal'; type Props = { message: string; - messageSub: string; + messageSub?: string; title: string; onOk?: any; onClose?: any; onClickOk: any; - onClickClose: any; + onClickClose?: any; okText?: string; cancelText?: string; - hideCancel: boolean; + hideCancel?: boolean; okTheme: SessionButtonColor; - closeTheme: SessionButtonColor; + closeTheme?: SessionButtonColor; sessionIcon?: SessionIconType; iconSize?: SessionIconSize; - theme: DefaultTheme; + theme?: DefaultTheme; }; const SessionConfirmInner = (props: Props) => { @@ -41,6 +42,8 @@ const SessionConfirmInner = (props: Props) => { const cancelText = props.cancelText || window.i18n('cancel'); const showHeader = !!props.title; + const theme = useTheme(); + const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle'; return ( @@ -49,14 +52,23 @@ const SessionConfirmInner = (props: Props) => { onClose={onClickClose} showExitIcon={false} showHeader={showHeader} - theme={props.theme} + theme={theme} > + + {/* */} + {!showHeader &&
}
{sessionIcon && iconSize && ( <> - +
)} diff --git a/ts/components/session/menu/ConversationListItemContextMenu.tsx b/ts/components/session/menu/ConversationListItemContextMenu.tsx index baa098893..e5db0080b 100644 --- a/ts/components/session/menu/ConversationListItemContextMenu.tsx +++ b/ts/components/session/menu/ConversationListItemContextMenu.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { animation, Menu } from 'react-contexify'; import { ConversationTypeEnum } from '../../../models/conversation'; @@ -15,6 +15,7 @@ import { } from './Menu'; export type PropsContextConversationItem = { + id: string; triggerId: string; type: ConversationTypeEnum; isMe: boolean; @@ -38,6 +39,7 @@ export type PropsContextConversationItem = { export const ConversationListItemContextMenu = (props: PropsContextConversationItem) => { const { + id, triggerId, isBlocked, isMe, @@ -60,7 +62,12 @@ export const ConversationListItemContextMenu = (props: PropsContextConversationI const isGroup = type === 'group'; + const [ modal, setModal ] = useState(null); + return ( + <> + { modal ? modal : null} + {getBlockMenuItem( isMe, @@ -72,7 +79,7 @@ export const ConversationListItemContextMenu = (props: PropsContextConversationI )} {getCopyMenuItem(isPublic, isGroup, onCopyPublicKey, window.i18n)} {getMarkAllReadMenuItem(onMarkAllRead, window.i18n)} - {getChangeNicknameMenuItem(isMe, onChangeNickname, isGroup, window.i18n)} + {getChangeNicknameMenuItem(isMe, onChangeNickname, isGroup, window.i18n, id, setModal)} {getClearNicknameMenuItem(isMe, hasNickname, onClearNickname, isGroup, window.i18n)} {getDeleteMessagesMenuItem(isPublic, onDeleteMessages, window.i18n)} @@ -88,5 +95,6 @@ export const ConversationListItemContextMenu = (props: PropsContextConversationI )} {getLeaveGroupMenuItem(isKickedFromGroup, left, isGroup, isPublic, onLeaveGroup, window.i18n)} + ); }; diff --git a/ts/state/ducks/onion.tsx b/ts/state/ducks/onion.tsx index 0c3a99a3b..5245c4907 100644 --- a/ts/state/ducks/onion.tsx +++ b/ts/state/ducks/onion.tsx @@ -29,8 +29,9 @@ const onionSlice = createSlice({ reducers: { updateOnionPaths(state, action: PayloadAction) { let newPayload = { snodePath: action.payload }; - let isEqual = JSON.stringify(state, null, 2) == JSON.stringify(newPayload, null, 2); - return isEqual ? state : newPayload; + // let isEqual = JSON.stringify(state, null, 2) == JSON.stringify(newPayload, null, 2); + // return isEqual ? state : newPayload; + return newPayload; }, }, });