Add an action panel button to mark all conversations as read.

Fixes oxen-io#2346.
ianmacd · Feb 23, 2023 · f915896 · f915896
1 parent 2710ea9
commit f915896
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 0 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -42,6 +42,7 @@
   "debugLogExplanation": "This log will be saved to your desktop.",
   "reportIssue": "Report a Bug",
   "markAllAsRead": "Mark All as Read",
+  "allMarkedAsRead": "All conversations marked read.",
   "incomingError": "Error handling incoming message",
   "media": "Media",
   "mediaEmptyState": "No media",

diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx
@@ -14,6 +14,7 @@ interface SProps extends SessionIconProps {
   dataTestId?: string;
   id?: string;
   style?: object;
+  title?: string;
 }
 
 const StyledSessionIconButton = styled.div<{ color?: string; isSelected?: boolean }>`
@@ -55,6 +56,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
     id,
     dataTestId,
     style,
+    title
   } = props;
   const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     if (props.onClick) {
@@ -65,6 +67,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
 
   return (
     <StyledSessionIconButton
+      title={title}
       color={iconColor}
       isSelected={isSelected}
       className={classNames('session-icon-button', iconSize)}

diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx
@@ -78,6 +78,15 @@ const Section = (props: { type: SectionType }) => {
     } else if (type === SectionType.PathIndicator) {
       // 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'));
     } else {
       // message section
       dispatch(clearSearch());
@@ -111,6 +120,17 @@ const Section = (props: { type: SectionType }) => {
           isSelected={isSelected}
         />
       );
+    case SectionType.MarkAllAsRead:
+      return (
+        <SessionIconButton
+          title={window.i18n('markAllAsRead')}
+          iconSize="medium"
+          dataTestId="markallasread-section"
+          iconType={'check'}
+          onClick={handleClick}
+          isSelected={isSelected}
+        />
+      );
     case SectionType.Settings:
       return (
         <SessionIconButton
@@ -287,6 +307,7 @@ export const ActionsPanel = () => {
       <LeftPaneSectionContainer data-testid="leftpane-section-container">
         <Section type={SectionType.Profile} />
         <Section type={SectionType.Message} />
+        <Section type={SectionType.MarkAllAsRead} />
         <Section type={SectionType.Settings} />
 
         <Section type={SectionType.PathIndicator} />

diff --git a/ts/state/ducks/section.tsx b/ts/state/ducks/section.tsx
@@ -10,6 +10,7 @@ export enum SectionType {
   Profile,
   Message,
   Settings,
+  MarkAllAsRead,
   ColorMode,
   PathIndicator,
 }

diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts
@@ -383,6 +383,7 @@ export type LocalizerKeys =
   | 'cannotRemoveCreatorFromGroup'
   | 'editMenuCut'
   | 'markAllAsRead'
+  | 'allMarkedAsRead'
   | 'failedResolveOns'
   | 'showDebugLog'
   | 'declineRequestMessage'