onion-paths-WIP

js/background.js

@@ -383,12 +383,6 @@
       confirmDialog.render();
     };
 
-    window.showNicknameDialog = params => {
-      if (appView) {
-        appView.showNicknameDialog(params);
-      }
-    };
-
     window.showResetSessionIdDialog = () => {
       appView.showResetSessionIdDialog();
     };

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 });

js/views/edit_profile_dialog_view.js

@@ -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();
-//     },
-//   });
-// })();

js/views/onion_status_dialog_view.js

@@ -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();
-//     },
-//   });
-// })();

js/views/session_change_nickname_dialog_view.js

@@ -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();
-    },
-  });
-})();

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 <LeftPaneSettingSection />;
-};
-
-const LeftPaneSection = (props: { isExpired: boolean }) => {
+const LeftPaneSection = (props: { isExpired: boolean, setModal: any}) => {
   const focusedSection = useSelector(getFocusedSection);
+  const { setModal } = props;
 
   if (focusedSection === SectionType.Message) {
     return <InnerLeftPaneMessageSection isExpired={props.isExpired} />;
@@ -101,7 +98,7 @@ const LeftPaneSection = (props: { isExpired: boolean }) => {
     return <InnerLeftPaneContactSection />;
   }
   if (focusedSection === SectionType.Settings) {
-    return <LeftPaneSettingsSection />;
+    return <LeftPaneSettingSection setModal={setModal} />;
   }
   return <></>;
 };
@@ -109,14 +106,20 @@ const LeftPaneSection = (props: { isExpired: boolean }) => {
 export const LeftPane = (props: Props) => {
   const theme = useSelector(getTheme);
 
+  const [modal, setModal] = useState<any>(null);
+
   return (
-    <SessionTheme theme={theme}>
-      <div className="module-left-pane-session">
-        <ActionsPanel />
-        <div className="module-left-pane">
-          <LeftPaneSection isExpired={props.isExpired} />
+    <>
+      { modal ? modal : null}
+      <SessionTheme theme={theme}>
+        <div className="module-left-pane-session">
+          <ActionsPanel />
+
+          <div className="module-left-pane">
+            <LeftPaneSection setModal={setModal} isExpired={props.isExpired} />
+          </div>
         </div>
-      </div>
-    </SessionTheme>
+      </SessionTheme>
+    </>
   );
 };

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(
+  <SessionConfirm
+    title={title}
+    message={message}
+    onClickOk={deleteAccount}
+    okTheme={SessionButtonColor.Danger}
+    onClickClose={clearModal}
+  />)
 };
 
-const LeftPaneBottomButtons = () => {
+const LeftPaneBottomButtons = (props: { setModal: any}) => {
   const dangerButtonText = window.i18n('clearAllData');
   const showRecoveryPhrase = window.i18n('showRecoveryPhrase');
+  const { setModal } = props;
 
   return (
     <div className="left-pane-setting-bottom-buttons">
@@ -124,7 +139,7 @@ const LeftPaneBottomButtons = () => {
         text={dangerButtonText}
         buttonType={SessionButtonType.SquareOutline}
         buttonColor={SessionButtonColor.Danger}
-        onClick={onDeleteAccount}
+        onClick={onDeleteAccount(setModal)}
       />
 
       <SessionButton
@@ -137,15 +152,16 @@ const LeftPaneBottomButtons = () => {
   );
 };
 
-export const LeftPaneSettingSection = () => {
+export const LeftPaneSettingSection = (props: { setModal: any}) => {
   const theme = useSelector(getTheme);
+  const { setModal } = props;
 
   return (
     <div className="left-pane-setting-section">
       <LeftPaneSectionHeader label={window.i18n('settingsHeader')} theme={theme} />
       <div className="left-pane-setting-content">
         <LeftPaneSettingsCategories />
-        <LeftPaneBottomButtons />
+        <LeftPaneBottomButtons setModal={setModal} />
       </div>
     </div>
   );

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}
     >
+
+      {/* <SessionWrapperModal
+      title={title}
+      onClose={onClickClose}
+      showExitIcon={false}
+      showHeader={showHeader}
+      theme={theme}
+      ></SessionWrapperModal> */}
+
       {!showHeader && <div className="spacer-lg" />}
 
       <div className="session-modal__centered">
         {sessionIcon && iconSize && (
           <>
-            <SessionIcon iconType={sessionIcon} iconSize={iconSize} theme={props.theme} />
+            <SessionIcon iconType={sessionIcon} iconSize={iconSize} theme={theme} />
             <div className="spacer-lg" />
           </>
         )}

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<any>(null);
+
   return (
+    <>
+    { modal ? modal : null}
+
     <Menu id={triggerId} animation={animation.fade}>
       {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)}
     </Menu>
+    </>
   );
 };

ts/state/ducks/onion.tsx

@@ -29,8 +29,9 @@ const onionSlice = createSlice({
   reducers: {
     updateOnionPaths(state, action: PayloadAction<SnodePath>) {
       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;
     },
   },
 });