From 4c8f2bf72032c06a16c323792bf5a4c5c7478697 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Wed, 9 Jun 2021 10:06:23 +1000 Subject: [PATCH] WIP refactoring confirm dialog to redux state. --- ts/components/MainViewController.tsx | 3 +- ts/components/OnionStatusDialog.tsx | 2 + ts/components/session/ActionsPanel.tsx | 96 ++++++++++++------- .../session/LeftPaneMessageSection.tsx | 2 +- ts/components/session/SessionConfirm.tsx | 6 +- .../conversation/SessionConversation.tsx | 1 - ts/receiver/closedGroups.tsx | 23 +---- ts/state/ducks/modalDialog.tsx | 93 ++++++++++++++++++ ts/state/ducks/onion.tsx | 9 -- ts/state/reducer.ts | 7 +- ts/window.d.ts | 6 ++ 11 files changed, 179 insertions(+), 69 deletions(-) create mode 100644 ts/state/ducks/modalDialog.tsx diff --git a/ts/components/MainViewController.tsx b/ts/components/MainViewController.tsx index 25d898b2b..9e2bcbad0 100644 --- a/ts/components/MainViewController.tsx +++ b/ts/components/MainViewController.tsx @@ -39,7 +39,6 @@ export class MessageView extends React.Component { async function createClosedGroup( groupName: string, groupMembers: Array, - setModal: () => void ): Promise { // 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; } diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx index b640f586d..9261be1b2 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/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; diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 57e203c0c..a28d95a08 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/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( setModal(null)}>); - setModal(); + // setModal(); } 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 ? - - : - - } + + : + + } ); }; @@ -260,24 +269,45 @@ export const ActionsPanel = () => { void forceRefreshRandomSnodePool(); }, DAYS * 1); - return ( - <> - {modal ? modal : null} -
-
-
-
-
+ const formatLog = (s: any ) => { + console.log("@@@@:: ", s); + } + + + // const confirmModalState = useSelector((state: StateType) => state); + + const confirmModalState = useSelector((state: StateType) => state.confirmModal); - + console.log('@@@ confirm modal state', confirmModalState); -
-
-
+ // formatLog(confirmModalState.modalState.title); + + formatLog(confirmModalState); + + // formatLog(confirmModalState2); + + return ( + <> + {/* {modal ? modal : null} */} + {/* { confirmModalState && confirmModalState.title ?
{confirmModalState.title}
: null} */} + { confirmModalState ? : null} +
+
+
+
+
+ + + +
+
+
); }; diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index 92b5c7707..c20d6eac3 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -447,7 +447,7 @@ export class LeftPaneMessageSection extends React.Component { 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); diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index 03e2496ae..8b619a57f 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/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, diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index f1f0bf848..95205c096 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -359,7 +359,6 @@ export class SessionConversation extends React.Component { onSetDisappearingMessages: conversation.updateExpirationTimer, onDeleteMessages: conversation.deleteMessages, onDeleteSelectedMessages: this.deleteSelectedMessages, - onChangeNickname: conversation.changeNickname, onClearNickname: conversation.clearNickname, onCloseOverlay: () => { this.setState({ selectedMessages: [] }); diff --git a/ts/receiver/closedGroups.tsx b/ts/receiver/closedGroups.tsx index e757ce684..9d87b9a1c 100644 --- a/ts/receiver/closedGroups.tsx +++ b/ts/receiver/closedGroups.tsx @@ -838,7 +838,7 @@ async function handleClosedGroupEncryptionKeyPairRequest( return removeFromCache(envelope); } -export async function createClosedGroup(groupName: string, members: Array, setModal: any) { +export async function createClosedGroup(groupName: string, members: Array) { const setOfMembers = new Set(members); const ourNumber = UserUtils.getOurPubKeyFromCache(); @@ -894,7 +894,6 @@ export async function createClosedGroup(groupName: string, members: Array, encryptionKeyPair: ECKeyPair, dbMessage: MessageModel, - setModal: any, isRetry: boolean = false, ): Promise { const promises = createInvitePromises( @@ -954,20 +952,10 @@ async function sendToGroupMembers( // setModal() - setModal( - ) - ) - - // 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 ); } diff --git a/ts/state/ducks/modalDialog.tsx b/ts/state/ducks/modalDialog.tsx new file mode 100644 index 000000000..14a0a1a81 --- /dev/null +++ b/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; + +// 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) { +// 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) { + 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; \ No newline at end of file diff --git a/ts/state/ducks/onion.tsx b/ts/state/ducks/onion.tsx index 06ad4c978..3a5e8a3cf 100644 --- a/ts/state/ducks/onion.tsx +++ b/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; - // path: SnodePath; snodePath: SnodePath; }; -// const initialState: OnionState = { -// // nodes: new Array(), -// nodes: new Array(), -// }; 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; }, }, }); diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index 7aecd3f55..c16ac79d3 100644 --- a/ts/state/reducer.ts +++ b/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 diff --git a/ts/window.d.ts b/ts/window.d.ts index 3309f1a17..a008a562d 100644 --- a/ts/window.d.ts +++ b/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"); } }