Use caching to load inbox and feed faster #2288

package.json

@@ -64,6 +64,7 @@
     "react-virtualized": "^9.22.3",
     "react-zoom-pan-pinch": "^3.2.0",
     "redux": "^4.0.4",
+    "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
     "slate": "^0.94.1",

src/pages/App/AppWrapper.tsx

@@ -1,11 +1,14 @@
 import React, { FC } from "react";
 import { Provider } from "react-redux";
-import { store } from "@/shared/appConfig";
+import { PersistGate } from "redux-persist/integration/react";
+import { store, persistor } from "@/shared/appConfig";
 import { NotificationProvider } from "./providers";
 
 const AppWrapper: FC = ({ children }) => (
   <Provider store={store}>
-    <NotificationProvider>{children}</NotificationProvider>
+    <PersistGate loading={null} persistor={persistor}>
+      <NotificationProvider>{children}</NotificationProvider>
+    </PersistGate>
   </Provider>
 );
 

src/pages/Auth/store/saga.tsx

@@ -15,7 +15,9 @@ import { getProvider } from "@/shared/utils/authProvider";
 import { getFundingRequestNotification } from "@/shared/utils/notifications";
 import {
   cacheActions,
+  commonActions,
   commonLayoutActions,
+  inboxActions,
   multipleSpacesLayoutActions,
 } from "@/store/states";
 import {
@@ -301,6 +303,16 @@ const updateUserData = async (user: User): Promise<User> => {
   });
 };
 
+const resetGlobalData = (fullReset: boolean) => {
+  if (fullReset) {
+    store.dispatch(multipleSpacesLayoutActions.resetMultipleSpacesLayout());
+    store.dispatch(commonLayoutActions.clearData());
+  }
+  store.dispatch(inboxActions.resetInbox());
+  store.dispatch(cacheActions.resetFeedStates());
+  store.dispatch(commonActions.resetCommon());
+};
+
 function* socialLoginSaga({
   payload,
 }: ReturnType<typeof actions.socialLogin.request>) {
@@ -465,8 +477,6 @@ function* logOut() {
     window.ReactNativeWebView.postMessage(WebviewActions.logout);
   }
 
-  yield put(multipleSpacesLayoutActions.resetMultipleSpacesLayout());
-  yield put(commonLayoutActions.clearData());
   history.push(ROUTE_PATHS.HOME);
   yield true;
 }
@@ -567,6 +577,12 @@ function* authSagas() {
 
   firebase.auth().onAuthStateChanged(async (res) => {
     try {
+      const { user: userInStore } = store.getState().auth;
+
+      if (userInStore?.uid !== res?.uid) {
+        resetGlobalData(!res);
+      }
+
       store.dispatch(
         actions.setAuthProvider(
           getAuthProviderFromProviderData(res?.providerData),

src/pages/commonFeed/CommonFeed.tsx

@@ -45,6 +45,7 @@ import {
   getCommonPageAboutTabPath,
 } from "@/shared/utils";
 import {
+  cacheActions,
   commonActions,
   commonLayoutActions,
   selectCommonAction,
@@ -162,7 +163,11 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     hasMore: hasMoreCommonFeedItems,
     fetch: fetchCommonFeedItems,
     batchNumber,
-  } = useCommonFeedItems(commonId, commonFeedItemIdsForNotListening);
+  } = useCommonFeedItems(
+    commonId,
+    commonFeedItemIdsForNotListening,
+    sharedFeedItemId,
+  );
 
   const {
     isModalOpen: isCommonJoinModalOpen,
@@ -330,7 +335,13 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   useEffect(() => {
     fetchData();
 
+    const interval = setInterval(() => {
+      dispatch(cacheActions.copyFeedStateByCommonId(commonId));
+    }, 5000);
+
     return () => {
+      clearInterval(interval);
+      dispatch(cacheActions.copyFeedStateByCommonId(commonId));
       dispatch(commonActions.resetCommon());
     };
   }, [commonId]);

src/pages/inbox/BaseInbox.tsx

@@ -221,10 +221,6 @@ const InboxPage: FC<InboxPageProps> = (props) => {
 
   useEffect(() => {
     fetchData();
-
-    return () => {
-      dispatch(inboxActions.resetInbox());
-    };
   }, [userId]);
 
   useEffect(() => {

src/shared/appConfig.ts

@@ -1,6 +1,6 @@
 import configureStore from "@/store";
 import history from "./history";
 
-const { store } = configureStore(history);
+const { store, persistor } = configureStore(history);
 
-export { history, store };
+export { history, store, persistor };

src/shared/hooks/useCases/useCommonFeedItems.ts

@@ -11,6 +11,7 @@ interface Return
 export const useCommonFeedItems = (
   commonId: string,
   idsForNotListening?: string[],
+  sharedFeedItemId?: string | null,
 ): Return => {
   const dispatch = useDispatch();
   const feedItems = useSelector(selectFeedItems);
@@ -20,6 +21,7 @@ export const useCommonFeedItems = (
     dispatch(
       commonActions.getFeedItems.request({
         commonId,
+        sharedFeedItemId,
         feedItemId,
         limit: 15,
       }),
@@ -67,7 +69,6 @@ export const useCommonFeedItems = (
       dispatch(
         commonActions.getFeedItems.cancel("Cancel feed items fetch on unmount"),
       );
-      dispatch(commonActions.resetFeedItems());
     };
   }, []);
 

src/shared/interfaces/SynchronizedDate.ts

@@ -2,3 +2,6 @@ export interface SynchronizedDate {
   _seconds: number;
   _nanoseconds: number;
 }
+
+export const checkIsSynchronizedDate = (date: any): date is SynchronizedDate =>
+  Boolean(date && date._seconds);

src/shared/interfaces/feedLayout.ts

@@ -5,6 +5,7 @@ import {
   CommonFeed,
   FeedItemFollowWithMetadata,
 } from "@/shared/models";
+import { convertObjectDatesToFirestoreTimestamps } from "@/shared/utils";
 
 export interface FeedLayoutRef {
   setExpandedFeedItemId: (feedItemId: string | null) => void;
@@ -67,3 +68,45 @@ export type FeedLayoutItemChangeDataWithType = FeedLayoutItemChangeData &
         commonId: string;
       }
   );
+
+export const deserializeFeedItemFollowLayoutItem = <
+  T extends FeedItemFollowLayoutItem | FeedItemFollowLayoutItemWithFollowData,
+>(
+  item: T,
+): T => ({
+  ...item,
+  feedItem: convertObjectDatesToFirestoreTimestamps<CommonFeed>(item.feedItem),
+  feedItemFollowWithMetadata: item.feedItemFollowWithMetadata && {
+    ...convertObjectDatesToFirestoreTimestamps<FeedItemFollowWithMetadata>(
+      item.feedItemFollowWithMetadata,
+      ["lastSeen", "lastActivity"],
+    ),
+    feedItem: convertObjectDatesToFirestoreTimestamps<CommonFeed>(
+      item.feedItemFollowWithMetadata.feedItem,
+    ),
+  },
+});
+
+export const deserializeChatChannelLayoutItem = (
+  item: ChatChannelLayoutItem,
+): ChatChannelLayoutItem => ({
+  ...item,
+  chatChannel: convertObjectDatesToFirestoreTimestamps<ChatChannel>(
+    item.chatChannel,
+    ["lastMessage.createdAt"],
+  ),
+});
+
+export const deserializeFeedLayoutItem = (
+  item: FeedLayoutItem,
+): FeedLayoutItem =>
+  checkIsChatChannelLayoutItem(item)
+    ? deserializeChatChannelLayoutItem(item)
+    : deserializeFeedItemFollowLayoutItem(item);
+
+export const deserializeFeedLayoutItemWithFollowData = (
+  item: FeedLayoutItemWithFollowData,
+): FeedLayoutItemWithFollowData =>
+  checkIsChatChannelLayoutItem(item)
+    ? deserializeChatChannelLayoutItem(item)
+    : deserializeFeedItemFollowLayoutItem(item);

src/shared/layouts/CommonSidenavLayout/components/SidenavContent/hooks/useProjectsData.ts

@@ -104,22 +104,16 @@ export const useProjectsData = (): Return => {
   }, [isAuthenticated]);
 
   useEffect(() => {
-    if (areCommonsLoading) {
-      return;
-    }
     if (!areCommonsFetched) {
       dispatch(commonLayoutActions.getCommons.request(activeItemId));
     }
-  }, [areCommonsLoading, areCommonsFetched]);
+  }, [areCommonsFetched]);
 
   useEffect(() => {
-    if (areProjectsLoading || !currentCommonId) {
-      return;
-    }
-    if (!areProjectsFetched) {
+    if (currentCommonId && !areProjectsFetched) {
       dispatch(commonLayoutActions.getProjects.request(currentCommonId));
     }
-  }, [areProjectsLoading, areProjectsFetched, currentCommonId]);
+  }, [areProjectsFetched, currentCommonId]);
 
   useEffect(() => {
     if (

src/shared/utils/convertDatesToFirestoreTimestamps.ts

@@ -1,11 +1,13 @@
-import firebase from "firebase";
 import { get, set } from "lodash";
-import { SynchronizedDate } from "@/shared/interfaces";
+import { checkIsSynchronizedDate, SynchronizedDate } from "@/shared/interfaces";
+import { Timestamp } from "@/shared/models";
 
 export const convertToTimestamp = (
-  date: SynchronizedDate,
-): firebase.firestore.Timestamp =>
-  new firebase.firestore.Timestamp(date._seconds, date._nanoseconds);
+  date: SynchronizedDate | Timestamp,
+): Timestamp =>
+  checkIsSynchronizedDate(date)
+    ? new Timestamp(date._seconds, date._nanoseconds)
+    : new Timestamp(date.seconds, date.nanoseconds);
 
 const convertDateInObject = (
   data: Record<string, unknown>,

src/store/states/cache/actions.ts

@@ -10,6 +10,7 @@ import {
   User,
 } from "@/shared/models";
 import { CacheActionType } from "./constants";
+import { FeedState } from "./types";
 
 export const getUserStateById = createAsyncAction(
   CacheActionType.GET_USER_STATE_BY_ID,
@@ -131,6 +132,21 @@ export const updateProposalStateById = createStandardAction(
   state: LoadingState<Proposal | null>;
 }>();
 
+export const copyFeedStateByCommonId = createStandardAction(
+  CacheActionType.COPY_FEED_STATE_BY_COMMON_ID,
+)<string>();
+
+export const updateFeedStateByCommonId = createStandardAction(
+  CacheActionType.UPDATE_FEED_STATE_BY_COMMON_ID,
+)<{
+  commonId: string;
+  state: FeedState;
+}>();
+
+export const resetFeedStates = createStandardAction(
+  CacheActionType.RESET_FEED_STATES,
+)();
+
 export const getFeedItemUserMetadata = createAsyncAction(
   CacheActionType.GET_FEED_ITEM_USER_METADATA,
   CacheActionType.GET_FEED_ITEM_USER_METADATA_SUCCESS,

src/store/states/cache/constants.ts

@@ -30,6 +30,10 @@ export enum CacheActionType {
 
   UPDATE_PROPOSAL_STATE_BY_ID = "@CACHE/UPDATE_PROPOSAL_STATE_BY_ID",
 
+  COPY_FEED_STATE_BY_COMMON_ID = "@CACHE/COPY_FEED_STATE_BY_COMMON_ID",
+  UPDATE_FEED_STATE_BY_COMMON_ID = "@CACHE/UPDATE_FEED_STATE_BY_COMMON_ID",
+  RESET_FEED_STATES = "@CACHE/RESET_FEED_STATES",
+
   GET_FEED_ITEM_USER_METADATA = "@CACHE/GET_FEED_ITEM_USER_METADATA",
   GET_FEED_ITEM_USER_METADATA_SUCCESS = "@CACHE/GET_FEED_ITEM_USER_METADATA_SUCCESS",
   GET_FEED_ITEM_USER_METADATA_FAILURE = "@CACHE/GET_FEED_ITEM_USER_METADATA_FAILURE",

src/store/states/cache/reducer.tsx

@@ -13,6 +13,7 @@ const initialState: CacheState = {
   discussionStates: {},
   discussionMessagesStates: {},
   proposalStates: {},
+  feedByCommonIdStates: {},
   feedItemUserMetadataStates: {},
   chatChannelUserStatusStates: {},
 };
@@ -97,6 +98,18 @@ export const reducer = createReducer<CacheState, Action>(initialState)
       nextState.proposalStates[proposalId] = { ...state };
     }),
   )
+  .handleAction(actions.updateFeedStateByCommonId, (state, { payload }) =>
+    produce(state, (nextState) => {
+      const { commonId, state } = payload;
+
+      nextState.feedByCommonIdStates[commonId] = { ...state };
+    }),
+  )
+  .handleAction(actions.resetFeedStates, (state) =>
+    produce(state, (nextState) => {
+      nextState.feedByCommonIdStates = {};
+    }),
+  )
   .handleAction(actions.updateFeedItemUserMetadata, (state, { payload }) =>
     produce(state, (nextState) => {
       const { commonId, userId, feedObjectId, state } = payload;

src/store/states/cache/saga/copyFeedStateByCommonId.ts

@@ -0,0 +1,19 @@
+import { put, select } from "redux-saga/effects";
+import { selectCommonState, CommonState } from "../../common";
+import * as actions from "../actions";
+
+export function* copyFeedStateByCommonId({
+  payload: commonId,
+}: ReturnType<typeof actions.copyFeedStateByCommonId>) {
+  const commonState = (yield select(selectCommonState)) as CommonState;
+  yield put(
+    actions.updateFeedStateByCommonId({
+      commonId,
+      state: {
+        feedItems: commonState.feedItems,
+        pinnedFeedItems: commonState.pinnedFeedItems,
+        sharedFeedItem: commonState.sharedFeedItem,
+      },
+    }),
+  );
+}

src/store/states/cache/saga/index.ts

@@ -1,6 +1,8 @@
+import { takeLatest } from "redux-saga/effects";
 import { getFeedItemUserMetadataKey } from "@/shared/constants/getFeedItemUserMetadataKey";
 import { takeLeadingByIdentifier } from "@/shared/utils/saga";
 import * as actions from "../actions";
+import { copyFeedStateByCommonId } from "./copyFeedStateByCommonId";
 import { getDiscussionStateById } from "./getDiscussionStateById";
 import { getFeedItemUserMetadataState } from "./getFeedItemUserMetadataState";
 import { getGovernanceStateByCommonId } from "./getGovernanceStateByCommonId";
@@ -33,4 +35,5 @@ export function* mainSaga() {
     ({ payload: { payload } }) => getFeedItemUserMetadataKey(payload),
     getFeedItemUserMetadataState,
   );
+  yield takeLatest(actions.copyFeedStateByCommonId, copyFeedStateByCommonId);
 }

src/store/states/cache/selectors.ts

@@ -21,6 +21,10 @@ export const selectDiscussionMessagesStateByDiscussionId =
   (discussionId: string) => (state: AppState) =>
     state.cache.discussionMessagesStates[discussionId] || null;
 
+export const selectFeedStateByCommonId =
+  (commonId: string) => (state: AppState) =>
+    state.cache.feedByCommonIdStates[commonId] || null;
+
 export const selectFeedItemUserMetadata =
   (info: { commonId: string; userId: string; feedObjectId: string }) =>
   (state: AppState) =>

src/store/states/cache/types.ts

@@ -8,6 +8,12 @@ import {
   Proposal,
   User,
 } from "@/shared/models";
+import { CommonState } from "../common";
+
+export type FeedState = Pick<
+  CommonState,
+  "feedItems" | "pinnedFeedItems" | "sharedFeedItem"
+>;
 
 export interface CacheState {
   userStates: Record<string, LoadingState<User | null>>;
@@ -18,6 +24,7 @@ export interface CacheState {
     string,
     LoadingState<DiscussionMessage[] | null>
   >;
+  feedByCommonIdStates: Record<string, FeedState>;
   // key: {commonId}_{userId}_{feedObjectId}
   feedItemUserMetadataStates: Record<
     string,