From f36f26267a0ed7bcad1d6cd90ea94c674cc20315 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Mon, 23 Oct 2023 14:10:09 +0300 Subject: [PATCH 1/3] add sorting to the feed item list --- src/store/states/common/reducer.ts | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/store/states/common/reducer.ts b/src/store/states/common/reducer.ts index 27c63fa277..150dd9154e 100644 --- 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, 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, }; }; From 53a3e6cee2a734f111024306323d27d6f8bb9674 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Mon, 23 Oct 2023 15:20:53 +0300 Subject: [PATCH 2/3] add sorting to update list of inbox items --- src/store/states/inbox/reducer.ts | 40 +++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/store/states/inbox/reducer.ts b/src/store/states/inbox/reducer.ts index af17b96832..ef82ac6c60 100644 --- 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, 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(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(initialState) } const finalItem: FeedLayoutItemWithFollowData = { ...item }; - firstDocTimestamp = getFeedLayoutItemDateForSorting(item); if (itemIndex < 0) { return [finalItem, ...nextData]; @@ -453,11 +482,14 @@ export const reducer = createReducer(initialState) return nextData; }, nextState.items.data || []); + sortInboxItems(data); + const { firstDocTimestamp, lastDocTimestamp } = getDocTimestamps(data); nextState.items = { ...nextState.items, data, firstDocTimestamp, + lastDocTimestamp, }; }), ) From e389ed95f6b69c62badcb0d654e6d0b982dc1e17 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Mon, 23 Oct 2023 17:38:25 +0300 Subject: [PATCH 3/3] disable scroll anchor for feed item list --- .../commonFeed/components/FeedLayout/FeedLayout.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss b/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss index aea11cb6ba..d08805480b 100644 --- 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;