WIP refactoring confirm dialog to redux state.

ts/components/MainViewController.tsx

@@ -39,7 +39,6 @@ export class MessageView extends React.Component {
 async function createClosedGroup(
   groupName: string,
   groupMembers: Array<ContactType>,
-  setModal: () => void
 ): Promise<boolean> {
   // Validate groupName and groupMembers length
   if (groupName.length === 0) {
@@ -64,7 +63,7 @@ async function createClosedGroup(
 
   const groupMemberIds = groupMembers.map(m => m.id);
 
-  await createClosedGroupV2(groupName, groupMemberIds, setModal);
+  await createClosedGroupV2(groupName, groupMemberIds);
 
   return true;
 }

ts/components/OnionStatusDialog.tsx

@@ -34,6 +34,8 @@ export type StatusLightType = {
 
 const OnionPathModalInner = (props: any) => {
   const onionNodes = useSelector((state: StateType) => state.onionPaths.snodePath);
+  const confirmModalState = useSelector((state: StateType) => state);
+  console.log('onion path: ', confirmModalState);
   const onionPath = onionNodes.path;
   // including the device and destination in calculation
   const glowDuration = onionPath.length + 2;

ts/components/session/ActionsPanel.tsx

@@ -33,9 +33,13 @@ import { OpenGroupManagerV2 } from '../../opengroup/opengroupV2/OpenGroupManager
 import { loadDefaultRooms } from '../../opengroup/opengroupV2/ApiUtil';
 import { forceRefreshRandomSnodePool } from '../../session/snode_api/snodePool';
 import { SwarmPolling } from '../../session/snode_api/swarmPolling';
-import _ from 'lodash';
+import _, { divide } from 'lodash';
 import { ActionPanelOnionStatusLight, OnionPathModal } from '../OnionStatusDialog';
 import { EditProfileDialog } from '../EditProfileDialog';
+import { StateType } from '../../state/reducer';
+import { updateConfirmModal } from "../../state/ducks/modalDialog";
+import { useInView } from 'react-intersection-observer';
+import { SessionConfirm } from './SessionConfirm';
 
 // tslint:disable-next-line: no-import-side-effect no-submodule-imports
 
@@ -72,9 +76,14 @@ const Section = (props: {
     /* tslint:disable:no-void-expression */
     if (type === SectionType.Profile) {
       // window.showEditProfileDialog();
+      console.log("edit profile");
+
+      // window.inboxStore?.dispatch(updateConfirmModal({ title: "title test" }));
+
+      dispatch(updateConfirmModal({ title: "title test" }));
 
       // setModal(<EditProfileDialog2 onClose={() => setModal(null)}></EditProfileDialog2>);
-      setModal(<EditProfileDialog onClose={handleModalClose} theme={theme} ></EditProfileDialog>);
+      // setModal(<EditProfileDialog onClose={handleModalClose} theme={theme} ></EditProfileDialog>);
     } else if (type === SectionType.Moon) {
       const themeFromSettings = window.Events.getThemeSetting();
       const updatedTheme = themeFromSettings === 'dark' ? 'light' : 'dark';
@@ -134,21 +143,21 @@ const Section = (props: {
   return (
     <>
       {type === SectionType.PathIndicator ?
-      <ActionPanelOnionStatusLight
-        handleClick={handleClick}
-        isSelected={isSelected}
-      />
-    :
-      <SessionIconButton
-        iconSize={SessionIconSize.Medium}
-        iconType={iconType}
-        iconColor={iconColor}
-        notificationCount={unreadToShow}
-        onClick={handleClick}
-        isSelected={isSelected}
-        theme={theme}
-      />
-    }
+        <ActionPanelOnionStatusLight
+          handleClick={handleClick}
+          isSelected={isSelected}
+        />
+        :
+        <SessionIconButton
+          iconSize={SessionIconSize.Medium}
+          iconType={iconType}
+          iconColor={iconColor}
+          notificationCount={unreadToShow}
+          onClick={handleClick}
+          isSelected={isSelected}
+          theme={theme}
+        />
+      }
     </>
   );
 };
@@ -260,24 +269,45 @@ export const ActionsPanel = () => {
     void forceRefreshRandomSnodePool();
   }, DAYS * 1);
 
-  return (
-    <>
-      {modal ? modal : null}
-    <div className="module-left-pane__sections-container">
-      <Section
-        setModal={setModal}
-        type={SectionType.Profile}
-        avatarPath={ourPrimaryConversation.avatarPath}
-      />
-      <Section  type={SectionType.Message} />
-      <Section  type={SectionType.Contact} />
-      <Section  type={SectionType.Settings} />
+  const formatLog = (s: any ) => {
+    console.log("@@@@:: ", s);
+  }
+
+
+  // const confirmModalState = useSelector((state: StateType) => state);
+
+  const confirmModalState = useSelector((state: StateType) => state.confirmModal);
 
-      <SessionToastContainer />
+  console.log('@@@ confirm modal state', confirmModalState);
 
-      <Section setModal={setModal} type={SectionType.PathIndicator} />
-      <Section  type={SectionType.Moon} />
-    </div>
+  // formatLog(confirmModalState.modalState.title);
+
+  formatLog(confirmModalState);
+
+  // formatLog(confirmModalState2);
+  
+  return (
+    <>
+      {/* {modal ? modal : null} */}
+      {/* { confirmModalState && confirmModalState.title ? <div>{confirmModalState.title}</div> : null} */}
+      { confirmModalState ? <SessionConfirm {...confirmModalState} />: null}
+      <div className="module-left-pane__sections-container">
+        <Section
+          // setModal={setModal}
+          type={SectionType.Profile}
+          avatarPath={ourPrimaryConversation.avatarPath}
+        />
+        <Section type={SectionType.Message} />
+        <Section type={SectionType.Contact} />
+        <Section type={SectionType.Settings} />
+
+        <SessionToastContainer />
+
+        <Section
+          setModal={setModal}
+          type={SectionType.PathIndicator} />
+        <Section type={SectionType.Moon} />
+      </div>
     </>
   );
 };

ts/components/session/LeftPaneMessageSection.tsx

@@ -447,7 +447,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
       return;
     }
     this.setState({ loading: true }, async () => {
-      const groupCreated = await MainViewController.createClosedGroup(groupName, groupMembers, setModal);
+      const groupCreated = await MainViewController.createClosedGroup(groupName, groupMembers);
 
       if (groupCreated) {
         this.handleToggleOverlay(undefined);

ts/components/session/SessionConfirm.tsx

@@ -7,9 +7,9 @@ import { DefaultTheme, useTheme, withTheme } from 'styled-components';
 import { SessionWrapperModal } from './SessionWrapperModal';
 
 type Props = {
-  message: string;
+  message?: string;
   messageSub?: string;
-  title: string;
+  title?: string;
   onOk?: any;
   onClose?: any;
   onClickOk?: any;
@@ -27,7 +27,7 @@ type Props = {
 const SessionConfirmInner = (props: Props) => {
   const {
     title = '',
-    message,
+    message = '',
     messageSub = '',
     okTheme = SessionButtonColor.Primary,
     closeTheme = SessionButtonColor.Primary,

ts/components/session/conversation/SessionConversation.tsx

@@ -359,7 +359,6 @@ export class SessionConversation extends React.Component<Props, State> {
       onSetDisappearingMessages: conversation.updateExpirationTimer,
       onDeleteMessages: conversation.deleteMessages,
       onDeleteSelectedMessages: this.deleteSelectedMessages,
-      onChangeNickname: conversation.changeNickname,
       onClearNickname: conversation.clearNickname,
       onCloseOverlay: () => {
         this.setState({ selectedMessages: [] });

ts/receiver/closedGroups.tsx

@@ -838,7 +838,7 @@ async function handleClosedGroupEncryptionKeyPairRequest(
   return removeFromCache(envelope);
 }
 
-export async function createClosedGroup(groupName: string, members: Array<string>, setModal: any) {
+export async function createClosedGroup(groupName: string, members: Array<string>) {
   const setOfMembers = new Set(members);
 
   const ourNumber = UserUtils.getOurPubKeyFromCache();
@@ -894,7 +894,6 @@ export async function createClosedGroup(groupName: string, members: Array<string
     admins,
     encryptionKeyPair,
     dbMessage,
-    setModal
   );
 
   if (allInvitesSent) {
@@ -929,7 +928,6 @@ async function sendToGroupMembers(
   admins: Array<string>,
   encryptionKeyPair: ECKeyPair,
   dbMessage: MessageModel,
-  setModal: any,
   isRetry: boolean = false,
 ): Promise<any> {
   const promises = createInvitePromises(
@@ -954,20 +952,10 @@ async function sendToGroupMembers(
 
       // setModal(<SessionConfirm message={'hi'} title={invitesTitle} />)
 
-      setModal(
-      <SessionConfirm
-      title={title}
-      message={message}
-      onClickOk={deleteAccount}
-      okTheme={SessionButtonColor.Danger}
-      onClickClose={clearModal}
-    />)
-      )
-
-      // window.confirmationDialog({
-      //   title: invitesTitle,
-      //   message: window.i18n('closedGroupInviteSuccessMessage'),
-      // });
+      window.confirmationDialog({
+        title: invitesTitle,
+        message: window.i18n('closedGroupInviteSuccessMessage'),
+      });
     }
     return allInvitesSent;
   } else {
@@ -1001,7 +989,6 @@ async function sendToGroupMembers(
             admins,
             encryptionKeyPair,
             dbMessage,
-            setModal,
             isRetrySend
           );
         }

ts/state/ducks/modalDialog.tsx

@@ -0,0 +1,93 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { DefaultTheme } from 'styled-components';
+import { SessionIconSize, SessionIconType } from '../../components/session/icon';
+import { SessionButtonColor } from '../../components/session/SessionButton';
+
+
+// import { OpenGroupV2InfoJoinable } from '../../opengroup/opengroupV2/ApiUtil';
+
+// export type DefaultRoomsState = Array<OpenGroupV2InfoJoinable>;
+
+// const initialState: DefaultRoomsState = [];
+
+// /**
+//  * Payload to dispatch to update the base64 data of a default room
+//  */
+// export type Base64Update = {
+//   base64Data: string;
+//   roomId: string;
+// };
+
+// /**
+//  * This slice is the one holding the default joinable rooms fetched once in a while from the default opengroup v2 server.
+//  */
+// const defaultRoomsSlice = createSlice({
+//   name: 'defaultRooms',
+//   initialState,
+//   reducers: {
+//     updateDefaultRooms(state, action) {
+//       window.log.warn('updating default rooms', action.payload);
+//       return action.payload as DefaultRoomsState;
+//     },
+//     updateDefaultBase64RoomData(state, action: PayloadAction<Base64Update>) {
+//       const payload = action.payload;
+//       const newState = state.map(room => {
+//         if (room.id === payload.roomId) {
+//           return {
+//             ...room,
+//             base64Data: payload.base64Data,
+//           };
+//         }
+//         return room;
+//       });
+//       return newState;
+//     },
+//   },
+// });
+
+// const { actions, reducer } = defaultRoomsSlice;
+// export const { updateDefaultRooms, updateDefaultBase64RoomData } = actions;
+// export const defaultRoomReducer = reducer;
+
+
+export type ConfirmModalState = {
+  message?: string;
+  messageSub?: string;
+  title?: string;
+  onOk?: any;
+  onClose?: any;
+  onClickOk?: any;
+  onClickClose?: any;
+  okText?: string;
+  cancelText?: string;
+  hideCancel?: boolean;
+  okTheme?: SessionButtonColor;
+  closeTheme?: SessionButtonColor;
+  sessionIcon?: SessionIconType;
+  iconSize?: SessionIconSize;
+  theme?: DefaultTheme;
+} | null;
+
+const initialState: ConfirmModalState = null;
+// const initialState: any = { idk: 'hi'};
+
+const confirmModalSlice = createSlice({
+  name: 'confirmModal',
+  initialState,
+  reducers: {
+    // updateConfirmModal(state, action: PayloadAction<ConfirmModalState>) {
+    updateConfirmModal(state, action: any) {
+      // return action.payload;
+
+      // state.title = action.payload;
+      state = action.payload;
+      return action.payload;
+
+      // state.confirmModal = action.payload;
+    }
+  }
+})
+
+const { actions, reducer } = confirmModalSlice;
+export const { updateConfirmModal } = actions;
+export const confirmModalReducer = reducer;

ts/state/ducks/onion.tsx

@@ -1,17 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import _, { forEach } from 'underscore';
 import { SnodePath, Snode } from '../../session/onions/index';
 
 export type OnionState = {
-  // nodes: Array<OnionPathNodeType>;
-  // path: SnodePath;
   snodePath: SnodePath;
 };
 
-// const initialState: OnionState = {
-//   // nodes: new Array<OnionPathNodeType>(),
-//   nodes: new Array<Snode>(),
-// };
 
 const initialState = {
   snodePath: {
@@ -32,8 +25,6 @@ const onionSlice = createSlice({
 
       let isEqual = JSON.stringify(state, null, 2) == JSON.stringify(newPayload, null, 2);
       return isEqual ? state : newPayload;
-
-      return newPayload;
     },
   },
 });

ts/state/reducer.ts

@@ -6,8 +6,8 @@ import { reducer as user, UserStateType } from './ducks/user';
 import { reducer as theme, ThemeStateType } from './ducks/theme';
 import { reducer as section, SectionStateType } from './ducks/section';
 import { defaultRoomReducer as defaultRooms, DefaultRoomsState } from './ducks/defaultRooms';
-
 import { defaultOnionReducer as onionPaths, OnionState } from './ducks/onion';
+import { confirmModalReducer as confirmModal, ConfirmModalState } from "./ducks/modalDialog";
 
 export type StateType = {
   search: SearchStateType;
@@ -19,6 +19,9 @@ export type StateType = {
   defaultRooms: DefaultRoomsState;
 
   onionPaths: OnionState;
+
+  confirmModal: ConfirmModalState
+  // modalState: ConfirmModalState
 };
 
 export const reducers = {
@@ -31,8 +34,8 @@ export const reducers = {
   theme,
   section,
   defaultRooms,
-
   onionPaths,
+  confirmModal
 };
 
 // Making this work would require that our reducer signature supported AnyAction, not

ts/window.d.ts

@@ -96,5 +96,11 @@ declare global {
     darkTheme: DefaultTheme;
     LokiPushNotificationServer: any;
     LokiPushNotificationServerApi: any;
+
+    confirmationDialog: any;
+  }
+
+  window.confirmationDialog = () => {
+    console.log("confirmation dialog stub called");
   }
 }