Merge pull request #2231 from daostack/feature/CW-2212-feed-sorting

Real-time sorting of feed and inbox by last activity #2212
daostack · Oct 24, 2023 · 66b5442 · 66b5442
2 parents 3bed749 + e389ed9
commit 66b5442
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 7 deletions.
diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss b/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss
@@ -5,6 +5,7 @@
   padding: 0 1.5rem;
   display: flex;
   flex-direction: column;
+  overflow-anchor: none;
 
   & > * {
     margin-bottom: 0;

diff --git a/src/store/states/common/reducer.ts b/src/store/states/common/reducer.ts
@@ -43,6 +43,14 @@ const initialState: CommonState = {
   recentAssignedCircle: null,
 };
 
+const sortFeedItems = (data: FeedItemFollowLayoutItem[]): void => {
+  data.sort(
+    (prevItem, nextItem) =>
+      nextItem.feedItem.updatedAt.toMillis() -
+      prevItem.feedItem.updatedAt.toMillis(),
+  );
+};
+
 const updateFeedItemInList = (
   state: WritableDraft<CommonState>,
   payload: {
@@ -76,10 +84,17 @@ const updateFeedItemInList = (
         ...updatedItem,
       },
     };
+    sortFeedItems(nextData);
   }
 
+  const firstDocTimestamp = nextData[0]?.feedItem.updatedAt || null;
+  const lastDocTimestamp =
+    nextData[nextData.length - 1]?.feedItem.updatedAt || null;
+
   state.feedItems = {
     ...state.feedItems,
+    firstDocTimestamp,
+    lastDocTimestamp,
     data: nextData,
   };
 };
@@ -95,8 +110,6 @@ const addNewFeedItems = (
   }[],
   shouldSortNewItems = false,
 ) => {
-  let firstDocTimestamp = state.feedItems.firstDocTimestamp;
-
   const data = payload.reduceRight((acc, { commonFeedItem, statuses }) => {
     const nextData = [...acc];
     const itemIndex = nextData.findIndex(
@@ -117,7 +130,6 @@ const addNewFeedItems = (
       itemId: commonFeedItem.id,
       feedItem: commonFeedItem,
     };
-    firstDocTimestamp = commonFeedItem.updatedAt;
 
     if (itemIndex >= 0) {
       nextData[itemIndex] = finalItem;
@@ -139,11 +151,16 @@ const addNewFeedItems = (
 
     return nextData;
   }, state.feedItems.data || []);
+  sortFeedItems(data);
+
+  const firstDocTimestamp = data[0]?.feedItem.updatedAt || null;
+  const lastDocTimestamp = data[data.length - 1]?.feedItem.updatedAt || null;
 
   state.feedItems = {
     ...state.feedItems,
     data,
     firstDocTimestamp,
+    lastDocTimestamp,
   };
 };
 

diff --git a/src/store/states/inbox/reducer.ts b/src/store/states/inbox/reducer.ts
@@ -7,7 +7,7 @@ import {
   checkIsFeedItemFollowLayoutItem,
   FeedLayoutItemWithFollowData,
 } from "@/shared/interfaces";
-import { ChatChannel, CommonFeed } from "@/shared/models";
+import { ChatChannel, CommonFeed, Timestamp } from "@/shared/models";
 import * as actions from "./actions";
 import { InboxItems, InboxState } from "./types";
 import { getFeedLayoutItemDateForSorting } from "./utils";
@@ -30,6 +30,26 @@ const initialState: InboxState = {
   nextChatChannelItemId: null,
 };
 
+const sortInboxItems = (data: FeedLayoutItemWithFollowData[]): void => {
+  data.sort(
+    (prevItem, nextItem) =>
+      getFeedLayoutItemDateForSorting(nextItem).toMillis() -
+      getFeedLayoutItemDateForSorting(prevItem).toMillis(),
+  );
+};
+
+const getDocTimestamps = (
+  data: FeedLayoutItemWithFollowData[],
+): {
+  firstDocTimestamp: Timestamp | null;
+  lastDocTimestamp: Timestamp | null;
+} => ({
+  firstDocTimestamp: data[0] ? getFeedLayoutItemDateForSorting(data[0]) : null,
+  lastDocTimestamp: data[data.length - 1]
+    ? getFeedLayoutItemDateForSorting(data[data.length - 1])
+    : null,
+});
+
 const updateInboxItemInList = (
   state: WritableDraft<InboxState>,
   payload: {
@@ -64,10 +84,14 @@ const updateInboxItemInList = (
       ...nextData[itemIndex],
       ...updatedItem,
     };
+    sortInboxItems(nextData);
   }
+  const { firstDocTimestamp, lastDocTimestamp } = getDocTimestamps(nextData);
 
   state.items = {
     ...state.items,
+    firstDocTimestamp,
+    lastDocTimestamp,
     data: nextData,
   };
 };
@@ -162,9 +186,13 @@ const updateFeedItemInInboxItem = (
       feedItem: { ...newFeedItem },
     },
   };
+  sortInboxItems(nextData);
+  const { firstDocTimestamp, lastDocTimestamp } = getDocTimestamps(nextData);
 
   state.items = {
     ...state.items,
+    firstDocTimestamp,
+    lastDocTimestamp,
     data: nextData,
   };
 };
@@ -285,9 +313,13 @@ const updateChatChannelItemInInboxItem = (
       lastMessage: updatedChatChannelItem.lastMessage || undefined,
     },
   };
+  sortInboxItems(nextData);
+  const { firstDocTimestamp, lastDocTimestamp } = getDocTimestamps(nextData);
 
   state.items = {
     ...state.items,
+    firstDocTimestamp,
+    lastDocTimestamp,
     data: nextData,
   };
 };
@@ -421,8 +453,6 @@ export const reducer = createReducer<InboxState, Action>(initialState)
             (chatChannelItem) => chatChannelItem.itemId === item.item.itemId,
           ),
       );
-      let firstDocTimestamp = nextState.items.firstDocTimestamp;
-
       const data = payload.reduceRight((acc, { item, statuses }) => {
         const nextData = [...acc];
         const itemIndex = nextData.findIndex(
@@ -443,7 +473,6 @@ export const reducer = createReducer<InboxState, Action>(initialState)
         }
 
         const finalItem: FeedLayoutItemWithFollowData = { ...item };
-        firstDocTimestamp = getFeedLayoutItemDateForSorting(item);
 
         if (itemIndex < 0) {
           return [finalItem, ...nextData];
@@ -453,11 +482,14 @@ export const reducer = createReducer<InboxState, Action>(initialState)
 
         return nextData;
       }, nextState.items.data || []);
+      sortInboxItems(data);
+      const { firstDocTimestamp, lastDocTimestamp } = getDocTimestamps(data);
 
       nextState.items = {
         ...nextState.items,
         data,
         firstDocTimestamp,
+        lastDocTimestamp,
       };
     }),
   )