Merge pull request #2420 from daostack/bugfix/CW-2416-infinite-inbox-…

…loading DEV Infinite loading of the Inbox #2416
daostack · Dec 25, 2023 · 854bf86 · 854bf86
2 parents cfb7ab4 + d75f405
commit 854bf86
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 10 deletions.
diff --git a/src/shared/icons/group-chat.icon.tsx → src/shared/icons/groupChat.icon.tsx b/src/shared/icons/group-chat.icon.tsx → src/shared/icons/groupChat.icon.tsx
@@ -13,7 +13,7 @@ const GroupChatIcon: FC<GroupChatIconProps> = ({ className }) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g id="Layer_1" clip-path="url(#clip0_11827_31255)">
+    <g id="Layer_1" clipPath="url(#clip0_11827_31255)">
       <path
         id="Vector"
         d="M12.4725 8.84766C8.9225 8.84766 6.03516 12.2649 6.03516 14.4519C6.03516 16.6389 8.91856 17.9824 12.4725 17.9824C16.0265 17.9824 18.9138 16.6389 18.9138 14.4675C18.9138 12.2961 16.0501 8.84766 12.4725 8.84766Z"

diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts
@@ -72,5 +72,5 @@ export { default as ReplyIcon } from "./reply.icon";
 export { default as CopyIcon } from "./copy.icon";
 export { default as HideIcon } from "./hide.icon";
 export { default as InboxFilterIcon } from "./inboxFilter.icon";
-export { default as GroupChatIcon } from "./group-chat.icon";
+export { default as GroupChatIcon } from "./groupChat.icon";
 export { default as NotificationsIcon } from "./notifications.icon";
diff --git a/src/store/states/inbox/reducer.ts b/src/store/states/inbox/reducer.ts
@@ -53,6 +53,13 @@ const getDocTimestamps = (
     : null,
 });
 
+const areTimestampsEqual = (
+  timestampA: Timestamp | null,
+  timestampB: Timestamp | null,
+): boolean =>
+  timestampA?.seconds === timestampB?.seconds &&
+  timestampA?.nanoseconds === timestampB?.nanoseconds;
+
 const updateInboxItemInList = (
   state: WritableDraft<InboxState>,
   payload: {
@@ -93,10 +100,16 @@ const updateInboxItemInList = (
 
   state.items = {
     ...state.items,
-    firstDocTimestamp,
-    lastDocTimestamp,
     data: nextData,
   };
+
+  if (!areTimestampsEqual(state.items.firstDocTimestamp, firstDocTimestamp)) {
+    state.items.firstDocTimestamp = firstDocTimestamp;
+  }
+
+  if (!areTimestampsEqual(state.items.lastDocTimestamp, lastDocTimestamp)) {
+    state.items.lastDocTimestamp = lastDocTimestamp;
+  }
 };
 
 const updateInboxItemInChatChannelItems = (
@@ -194,10 +207,16 @@ const updateFeedItemInInboxItem = (
 
   state.items = {
     ...state.items,
-    firstDocTimestamp,
-    lastDocTimestamp,
     data: nextData,
   };
+
+  if (!areTimestampsEqual(state.items.firstDocTimestamp, firstDocTimestamp)) {
+    state.items.firstDocTimestamp = firstDocTimestamp;
+  }
+
+  if (!areTimestampsEqual(state.items.lastDocTimestamp, lastDocTimestamp)) {
+    state.items.lastDocTimestamp = lastDocTimestamp;
+  }
 };
 
 const updateSharedInboxItem = (
@@ -321,10 +340,16 @@ const updateChatChannelItemInInboxItem = (
 
   state.items = {
     ...state.items,
-    firstDocTimestamp,
-    lastDocTimestamp,
     data: nextData,
   };
+
+  if (!areTimestampsEqual(state.items.firstDocTimestamp, firstDocTimestamp)) {
+    state.items.firstDocTimestamp = firstDocTimestamp;
+  }
+
+  if (!areTimestampsEqual(state.items.lastDocTimestamp, lastDocTimestamp)) {
+    state.items.lastDocTimestamp = lastDocTimestamp;
+  }
 };
 
 const updateChatChannelItemInChatChannelItem = (
@@ -499,9 +524,22 @@ export const reducer = createReducer<InboxState, Action>(INITIAL_INBOX_STATE)
       nextState.items = {
         ...nextState.items,
         data,
-        firstDocTimestamp,
-        lastDocTimestamp,
       };
+
+      if (
+        !areTimestampsEqual(
+          nextState.items.firstDocTimestamp,
+          firstDocTimestamp,
+        )
+      ) {
+        nextState.items.firstDocTimestamp = firstDocTimestamp;
+      }
+
+      if (
+        !areTimestampsEqual(nextState.items.lastDocTimestamp, lastDocTimestamp)
+      ) {
+        nextState.items.lastDocTimestamp = lastDocTimestamp;
+      }
     }),
   )
   .handleAction(actions.updateInboxItem, (state, { payload }) =>