update logic of projects data change on leave or join

src/pages/common/providers/CommonData/CommonData.tsx

@@ -156,9 +156,6 @@ const CommonData: FC<CommonDataProps> = (props) => {
       CommonMemberEventEmitter.emit(CommonMemberEvent.Clear, commonMember.id);
     }
 
-    dispatch(
-      commonLayoutActions.removeMembershipFromProjectsByRootCommonId(common.id),
-    );
     dispatch(projectsActions.removeMembershipFromProjectAndChildren(common.id));
     notify("You’ve successfully left the common");
     handleMenuClose();

src/pages/commonFeed/CommonFeed.tsx

@@ -50,7 +50,6 @@ import { checkIsAutomaticJoin, checkIsProject } from "@/shared/utils";
 import {
   cacheActions,
   commonActions,
-  commonLayoutActions,
   selectCommonAction,
   selectFeedSearchValue,
   selectIsSearchingFeedItems,
@@ -452,9 +451,6 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
 
   useEffect(() => {
     if (commonMember && isCommonJoinModalOpen) {
-      setTimeout(() => {
-        dispatch(commonLayoutActions.clearProjects());
-      }, 500);
       onCommonJoinModalClose();
     }
   }, [commonMember?.id]);

src/services/User.ts

@@ -294,6 +294,17 @@ class UserService {
 
     return snapshot.data() || null;
   };
+
+  public subscribeToUserMemberships = (
+    userId: string,
+    callback: (userMemberships: UserMemberships | null) => void,
+  ): UnsubscribeFunction => {
+    const query = this.getUserMembershipsCollection().doc(userId);
+
+    return query.onSnapshot((snapshot) => {
+      callback(snapshot.data() || null);
+    });
+  };
 }
 
 export default new UserService();

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

@@ -89,6 +89,7 @@ export const useProjectsData = (): Return => {
     location.pathname,
   );
   useProjectsSubscription({
+    currentCommonId,
     activeItemId,
     areProjectsFetched,
     commons,

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

@@ -1,15 +1,22 @@
 import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { usePreviousDistinct } from "react-use";
 import { CommonEvent, CommonEventEmitter } from "@/events";
 import { selectUser } from "@/pages/Auth/store/selectors";
-import { CommonService, GovernanceService, Logger } from "@/services";
+import {
+  CommonService,
+  GovernanceService,
+  Logger,
+  UserService,
+} from "@/services";
 import { GovernanceActions } from "@/shared/constants";
 import { SpaceListVisibility } from "@/shared/interfaces";
 import { Common } from "@/shared/models";
 import { generateCirclesDataForCommonMember } from "@/shared/utils";
-import { ProjectsStateItem } from "@/store/states";
+import { commonLayoutActions, ProjectsStateItem } from "@/store/states";
 
 interface Data {
+  currentCommonId: string | null;
   activeItemId: string;
   areProjectsFetched: boolean;
   commons: ProjectsStateItem[];
@@ -77,8 +84,21 @@ const getProjectItemFromCommon = async (
 };
 
 export const useProjectsSubscription = (data: Data) => {
-  const { activeItemId, areProjectsFetched, commons, projects } = data;
+  const {
+    currentCommonId,
+    activeItemId,
+    areProjectsFetched,
+    commons,
+    projects,
+  } = data;
+  const dispatch = useDispatch();
   const [updatedItemsQueue, setUpdatedItemsQueue] = useState<Common[][]>([]);
+  const [isCurrentCommonMember, setIsCurrentCommonMember] = useState<
+    boolean | null
+  >(null);
+  const previousIsCurrentCommonMember = usePreviousDistinct(
+    isCurrentCommonMember,
+  );
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const nextUpdatedItems = updatedItemsQueue[0];
@@ -151,4 +171,49 @@ export const useProjectsSubscription = (data: Data) => {
       }
     })();
   }, [nextUpdatedItems]);
+
+  useEffect(() => {
+    setIsCurrentCommonMember(null);
+
+    if (!userId || !currentCommonId) {
+      return;
+    }
+
+    const unsubscribe = UserService.subscribeToUserMemberships(
+      userId,
+      (userMemberships) => {
+        setIsCurrentCommonMember(
+          Boolean(userMemberships && userMemberships.commons[currentCommonId]),
+        );
+      },
+    );
+
+    return unsubscribe;
+  }, [userId, currentCommonId]);
+
+  useEffect(() => {
+    if (
+      typeof isCurrentCommonMember !== "boolean" ||
+      typeof previousIsCurrentCommonMember !== "boolean"
+    ) {
+      return;
+    }
+
+    if (!previousIsCurrentCommonMember && isCurrentCommonMember) {
+      dispatch(commonLayoutActions.clearProjects());
+      return;
+    }
+
+    if (
+      currentCommonId &&
+      previousIsCurrentCommonMember &&
+      !isCurrentCommonMember
+    ) {
+      dispatch(
+        commonLayoutActions.removeMembershipFromProjectsByRootCommonId(
+          currentCommonId,
+        ),
+      );
+    }
+  }, [isCurrentCommonMember]);
 };

src/store/states/commonLayout/reducer.ts

@@ -189,6 +189,14 @@ export const reducer = createReducer<CommonLayoutState, Action>(initialState)
           return;
         }
 
+        const common = nextState.commons.find(
+          ({ commonId }) => commonId === rootCommonId,
+        );
+
+        if (common) {
+          common.hasMembership = false;
+        }
+
         nextState.projects = nextState.projects.filter(
           (project) => project.listVisibility !== SpaceListVisibility.Members,
         );