Fix mark all as read not updating item read highlight (#1527)

aeharding · Jul 5, 2024 · 7285dbf · 7285dbf
1 parent c22b5be
commit 7285dbf
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/src/features/inbox/inboxSlice.ts b/src/features/inbox/inboxSlice.ts
@@ -56,6 +56,13 @@ export const inboxSlice = createSlice({
       state.readByInboxItemId[getInboxItemId(action.payload.item)] =
         action.payload.read;
     },
+    setAllReadStatus: (state) => {
+      for (const [id, read] of Object.entries(state.readByInboxItemId)) {
+        if (read) continue;
+
+        state.readByInboxItemId[id] = true;
+      }
+    },
     receivedMessages: (state, action: PayloadAction<PrivateMessageView[]>) => {
       state.messages = uniqBy(
         [...action.payload, ...state.messages],
@@ -90,6 +97,7 @@ export const {
   sync,
   syncComplete,
   syncFail,
+  setAllReadStatus: markAllReadInCache,
 } = inboxSlice.actions;
 
 export default inboxSlice.reducer;
@@ -182,6 +190,7 @@ export const markAllRead =
   () => async (dispatch: AppDispatch, getState: () => RootState) => {
     await clientSelector(getState()).markAllAsRead();
 
+    dispatch(markAllReadInCache());
     dispatch(getInboxCounts());
   };
 

diff --git a/src/routes/pages/inbox/MarkAllAsReadButton.tsx b/src/routes/pages/inbox/MarkAllAsReadButton.tsx
@@ -1,38 +1,33 @@
-import { IonActionSheet, IonButton, IonIcon } from "@ionic/react";
+import { IonButton, IonIcon, useIonActionSheet } from "@ionic/react";
 import { useAppDispatch } from "../../../store";
 import { checkmarkDone } from "ionicons/icons";
-import { useState } from "react";
 import { markAllRead } from "../../../features/inbox/inboxSlice";
 
 export default function MarkAllAsReadButton() {
   const dispatch = useAppDispatch();
-  const [open, setOpen] = useState(false);
+  const [presentActionSheet] = useIonActionSheet();
 
   return (
-    <>
-      <IonButton onClick={() => setOpen(true)}>
-        <IonIcon icon={checkmarkDone} />
-      </IonButton>
-
-      <IonActionSheet
-        isOpen={open}
-        buttons={[
-          {
-            text: "Mark All Read",
-            role: "read",
-          },
-          {
-            text: "Cancel",
-            role: "cancel",
-          },
-        ]}
-        onDidDismiss={() => setOpen(false)}
-        onWillDismiss={async (e) => {
-          if (e.detail.role === "read") {
-            dispatch(markAllRead());
-          }
-        }}
-      />
-    </>
+    <IonButton
+      onClick={() => {
+        presentActionSheet({
+          buttons: [
+            {
+              text: "Mark All Read",
+              role: "read",
+              handler: () => {
+                dispatch(markAllRead());
+              },
+            },
+            {
+              text: "Cancel",
+              role: "cancel",
+            },
+          ],
+        });
+      }}
+    >
+      <IonIcon icon={checkmarkDone} />
+    </IonButton>
   );
 }