add rootCommonId to last common from feed and change persistence

src/pages/commonFeed/CommonFeed.tsx

@@ -416,6 +416,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   useEffect(() => {
     return () => {
       const common = stateRef.current?.data?.common;
+      const rootCommon = stateRef.current?.data?.rootCommon;
 
       dispatch(
         commonLayoutActions.setLastCommonFromFeed({
@@ -426,6 +427,19 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
                 image: common.image,
                 isProject: checkIsProject(common),
                 memberCount: common.memberCount,
+                rootCommon: common.rootCommonId
+                  ? {
+                      id: common.rootCommonId,
+                      data: rootCommon
+                        ? {
+                            name: rootCommon.name,
+                            image: rootCommon.image,
+                            isProject: false,
+                            memberCount: rootCommon.memberCount,
+                          }
+                        : null,
+                    }
+                  : null,
               }
             : null,
         }),

src/store/states/commonLayout/types.ts

@@ -1,16 +1,27 @@
 import { ProjectsStateItem } from "../projects";
 
+interface LastCommonFromFeedData {
+  name: string;
+  image: string;
+  isProject: boolean;
+  memberCount: number;
+}
+
+interface LastCommonFromFeed {
+  id: string;
+  data:
+    | (LastCommonFromFeedData & {
+        rootCommon: {
+          id: string;
+          data: LastCommonFromFeedData | null;
+        } | null;
+      })
+    | null;
+}
+
 export interface CommonLayoutState {
   currentCommonId: string | null;
-  lastCommonFromFeed: {
-    id: string;
-    data: {
-      name: string;
-      image: string;
-      isProject: boolean;
-      memberCount: number;
-    } | null;
-  } | null;
+  lastCommonFromFeed: LastCommonFromFeed | null;
   commons: ProjectsStateItem[];
   areCommonsLoading: boolean;
   areCommonsFetched: boolean;

src/store/store.tsx

@@ -17,7 +17,7 @@ import createSagaMiddleware from "redux-saga";
 import { AppState } from "@/shared/interfaces";
 import rootReducer from "./reducer";
 import appSagas from "./saga";
-import { inboxTransform } from "./transforms";
+import { inboxTransform, lastCommonFromFeedTransform } from "./transforms";
 
 const persistConfig: PersistConfig<AppState> = {
   key: "root",
@@ -32,7 +32,7 @@ const persistConfig: PersistConfig<AppState> = {
     "multipleSpacesLayout",
   ],
   stateReconciler: autoMergeLevel2,
-  transforms: [inboxTransform],
+  transforms: [inboxTransform, lastCommonFromFeedTransform],
 };
 
 const sagaMiddleware = createSagaMiddleware();

src/store/transforms.ts

@@ -2,6 +2,7 @@ import { createTransform } from "redux-persist";
 import { deserializeFeedLayoutItemWithFollowData } from "@/shared/interfaces";
 import { convertObjectDatesToFirestoreTimestamps } from "@/shared/utils";
 import { getFeedLayoutItemDateForSorting } from "@/store/states/inbox/utils";
+import { CommonLayoutState } from "./states/commonLayout";
 import { InboxItems, InboxState } from "./states/inbox";
 
 export const inboxTransform = createTransform(
@@ -43,3 +44,24 @@ export const inboxTransform = createTransform(
   }),
   { whitelist: ["inbox"] },
 );
+
+export const lastCommonFromFeedTransform = createTransform(
+  (inboundState: CommonLayoutState) => {
+    const rootCommon = inboundState.lastCommonFromFeed?.data?.rootCommon;
+
+    return {
+      ...inboundState,
+      lastCommonFromFeed: rootCommon
+        ? {
+            id: rootCommon.id,
+            data: rootCommon.data && {
+              ...rootCommon.data,
+              rootCommon: null,
+            },
+          }
+        : inboundState.lastCommonFromFeed,
+    };
+  },
+  (outboundState: CommonLayoutState) => outboundState,
+  { whitelist: ["commonLayout"] },
+);