Add a modal dialogue to allow confirmation when marking all convos read.

ts/components/dialog/MarkAllAsReadDialog.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { SpacerLG } from '../basic/Text';
+import { getConversationController } from '../../session/conversations';
+import { markAllAsReadModal } from '../../state/ducks/modalDialog';
+import { SessionButton, SessionButtonType } from '../basic/SessionButton';
+import { SessionWrapperModal } from '../SessionWrapperModal';
+import { ToastUtils } from '../../session/utils';
+
+export const MarkAllAsReadDialog = () => {
+  const titleText = window.i18n('markAllAsRead');
+  const okText = window.i18n('markAllAsRead');
+  const cancelText = window.i18n('cancel');
+  const [_isLoading, setIsLoading] = useState(false);
+
+  const onClickOK = async () => {
+    setIsLoading(true);
+
+    const controller = getConversationController();
+    const convos = controller.getConversations().filter(conversation => {
+      return conversation.isApproved();
+    });
+    for (const convo of convos) {
+      await controller.get(convo.id).markAllAsRead();
+    }
+    ToastUtils.pushToastSuccess( 'allMarkedRead', window.i18n('allMarkedAsRead'));
+
+    setIsLoading(false);
+    closeDialog();
+  };
+
+  const closeDialog = () => {
+    window.inboxStore?.dispatch(markAllAsReadModal(null));
+  };
+
+  return (
+    <SessionWrapperModal title={titleText} onClose={closeDialog}>
+      <SpacerLG />
+
+      <div className="session-modal__button-group">
+        <SessionButton
+          text={okText}
+          buttonType={SessionButtonType.Simple}
+          onClick={onClickOK}
+        />
+        <SessionButton
+          text={cancelText}
+          buttonType={SessionButtonType.Simple}
+          onClick={closeDialog}
+        />
+      </div>
+    </SessionWrapperModal>
+  );
+};

ts/components/dialog/ModalContainer.tsx

@@ -9,6 +9,7 @@ import {
   getDeleteAccountModalState,
   getEditProfileDialog,
   getInviteContactModal,
+  getMarkAllAsReadDialog,
   getOnionPathDialog,
   getReactClearAllDialog,
   getReactListDialog,
@@ -36,6 +37,7 @@ import { SessionNicknameDialog } from './SessionNicknameDialog';
 import { BanOrUnBanUserDialog } from './BanOrUnbanUserDialog';
 import { ReactListModal } from './ReactListModal';
 import { ReactClearAllModal } from './ReactClearAllModal';
+import { MarkAllAsReadDialog } from './MarkAllAsReadDialog';
 
 export const ModalContainer = () => {
   const confirmModalState = useSelector(getConfirmModal);
@@ -55,6 +57,7 @@ export const ModalContainer = () => {
   const banOrUnbanUserModalState = useSelector(getBanOrUnbanUserModalState);
   const reactListModalState = useSelector(getReactListDialog);
   const reactClearAllModalState = useSelector(getReactClearAllDialog);
+  const markAllAsReadModalState = useSelector(getMarkAllAsReadDialog);
 
   return (
     <>
@@ -79,6 +82,7 @@ export const ModalContainer = () => {
       {confirmModalState && <SessionConfirm {...confirmModalState} />}
       {reactListModalState && <ReactListModal {...reactListModalState} />}
       {reactClearAllModalState && <ReactClearAllModal {...reactClearAllModalState} />}
+      {markAllAsReadModalState && <MarkAllAsReadDialog {...markAllAsReadModalState} />}
     </>
   );
 };

ts/components/leftpane/ActionsPanel.tsx

@@ -26,7 +26,10 @@ import { cleanUpOldDecryptedMedias } from '../../session/crypto/DecryptedAttachm
 
 import { DURATION } from '../../session/constants';
 
-import { editProfileModal, onionPathModal } from '../../state/ducks/modalDialog';
+import { editProfileModal,
+	 markAllAsReadModal,
+	 onionPathModal
+} from '../../state/ducks/modalDialog';
 import { uploadOurAvatar } from '../../interactions/conversationInteractions';
 import { debounce, isEmpty, isString } from 'lodash';
 
@@ -79,14 +82,7 @@ const Section = (props: { type: SectionType }) => {
       // Show Path Indicator Modal
       dispatch(onionPathModal({}));
     } else if (type === SectionType.MarkAllAsRead) {
-      const controller = getConversationController();
-      const convos = controller.getConversations().filter(conversation => {
-        return conversation.isApproved();
-      });
-      for (const convo of convos) {
-        await controller.get(convo.id).markAllAsRead();
-      }
-      ToastUtils.pushToastSuccess('allMarkedRead', window.i18n('allMarkedAsRead'));
+      dispatch(markAllAsReadModal({}));
     } else {
       // message section
       dispatch(clearSearch());

ts/state/ducks/modalDialog.tsx

@@ -20,6 +20,7 @@ export type EditProfileModalState = {} | null;
 export type OnionPathModalState = EditProfileModalState;
 export type RecoveryPhraseModalState = EditProfileModalState;
 export type DeleteAccountModalState = EditProfileModalState;
+export type MarkAllAsReadModalState = EditProfileModalState;
 
 export type SessionPasswordModalState = { passwordAction: PasswordAction; onOk: () => void } | null;
 
@@ -50,6 +51,7 @@ export type ModalState = {
   adminLeaveClosedGroup: AdminLeaveClosedGroupModalState;
   sessionPasswordModal: SessionPasswordModalState;
   deleteAccountModal: DeleteAccountModalState;
+  markAllAsReadModal: MarkAllAsReadModalState;
   reactListModalState: ReactModalsState;
   reactClearAllModalState: ReactModalsState;
 };
@@ -70,6 +72,7 @@ export const initialModalState: ModalState = {
   adminLeaveClosedGroup: null,
   sessionPasswordModal: null,
   deleteAccountModal: null,
+  markAllAsReadModal: null,
   reactListModalState: null,
   reactClearAllModalState: null,
 };
@@ -123,6 +126,9 @@ const ModalSlice = createSlice({
     updateDeleteAccountModal(state, action: PayloadAction<DeleteAccountModalState>) {
       return { ...state, deleteAccountModal: action.payload };
     },
+    markAllAsReadModal(state, action: PayloadAction<MarkAllAsReadModalState>) {
+      return { ...state, markAllAsReadModal: action.payload };
+    },
     updateReactListModal(state, action: PayloadAction<ReactModalsState>) {
       return { ...state, reactListModalState: action.payload };
     },
@@ -147,6 +153,7 @@ export const {
   recoveryPhraseModal,
   adminLeaveClosedGroup,
   sessionPassword,
+  markAllAsReadModal,
   updateDeleteAccountModal,
   updateBanOrUnbanUserModal,
   updateReactListModal,

ts/state/selectors/modal.ts

@@ -10,6 +10,7 @@ import {
   DeleteAccountModalState,
   EditProfileModalState,
   InviteContactModalState,
+  MarkAllAsReadModalState,
   ModalState,
   OnionPathModalState,
   ReactModalsState,
@@ -109,3 +110,7 @@ export const getReactClearAllDialog = createSelector(
   getModal,
   (state: ModalState): ReactModalsState => state.reactClearAllModalState
 );
+
+export const getMarkAllAsReadDialog = createSelector(
+  getModal,
+  (state: ModalState): MarkAllAsReadModalState => state.markAllAsReadModal);