change useUserActivity to useLastVisitedCommon

daostack · Nov 29, 2023 · e5d4515 · e5d4515
1 parent ccd140a
commit e5d4515
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 53 deletions.
diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx
@@ -29,7 +29,7 @@ import { useRoutesContext } from "@/shared/contexts";
 import { useAuthorizedModal, useQueryParams } from "@/shared/hooks";
 import {
   useCommonFeedItems,
-  useUserActivity,
+  useLastVisitedCommon,
   useUserCommonIds,
 } from "@/shared/hooks/useCases";
 import { useCommonPinnedFeedItems } from "@/shared/hooks/useCases/useCommonPinnedFeedItems";
@@ -118,7 +118,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     fetched: isCommonDataFetched,
     fetchCommonData,
   } = useCommonData(userId);
-  const { updateUserActivity } = useUserActivity(userId);
+  const { updateLastVisitedCommon } = useLastVisitedCommon(userId);
   const parentCommonId = commonData?.common.directParent?.commonId;
   const anotherCommonId =
     userCommonIds[0] === commonId ? userCommonIds[1] : userCommonIds[0];
@@ -419,30 +419,28 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   }, [rootCommonMember?.id]);
 
   useEffect(() => {
-    return () => {
+    const updateLastVisited = () => {
       const common = stateRef.current?.data?.common;
 
-      dispatch(
-        commonLayoutActions.setLastCommonFromFeed({
-          id: commonId,
-          data: common
-            ? {
-                name: common.name,
-                image: common.image,
-                isProject: checkIsProject(common),
-                memberCount: common.memberCount,
-              }
-            : null,
-        }),
-      );
+      updateLastVisitedCommon({
+        id: commonId,
+        data: common
+          ? {
+              name: common.name,
+              image: common.image,
+              isProject: checkIsProject(common),
+              memberCount: common.memberCount,
+            }
+          : null,
+      });
     };
-  }, [commonId]);
 
-  useEffect(() => {
-    updateUserActivity({
-      lastVisitedCommon: commonId,
-    });
-  }, [updateUserActivity, commonId]);
+    updateLastVisited();
+
+    return () => {
+      updateLastVisited();
+    };
+  }, [updateLastVisitedCommon, commonId]);
 
   if (!isDataFetched) {
     const headerEl = renderLoadingHeader ? (

diff --git a/src/pages/commonFeed/CommonFeedPage.tsx b/src/pages/commonFeed/CommonFeedPage.tsx
@@ -1,12 +1,13 @@
 import React, { FC, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import { selectUser } from "@/pages/Auth/store/selectors";
 import { InboxItemType } from "@/shared/constants";
 import { MainRoutesProvider } from "@/shared/contexts";
+import { useLastVisitedCommon } from "@/shared/hooks/useCases";
 import { MultipleSpacesLayoutPageContent } from "@/shared/layouts";
 import {
   multipleSpacesLayoutActions,
-  selectCommonLayoutLastCommonFromFeed,
   selectMultipleSpacesLayoutMainWidth,
 } from "@/store/states";
 import BaseCommonFeedPage, {
@@ -59,7 +60,9 @@ const CommonFeedPage: FC = () => {
   const { id: commonId } = useParams<CommonFeedPageRouterParams>();
   const dispatch = useDispatch();
   const layoutMainWidth = useSelector(selectMultipleSpacesLayoutMainWidth);
-  const lastCommonFromFeed = useSelector(selectCommonLayoutLastCommonFromFeed);
+  const user = useSelector(selectUser());
+  const userId = user?.uid;
+  const { lastVisitedCommon } = useLastVisitedCommon(userId);
   const onActiveItemDataChange = useActiveItemDataChange();
   const feedLayoutSettings = useMemo<FeedLayoutSettings>(
     () => ({
@@ -68,13 +71,13 @@ const CommonFeedPage: FC = () => {
     }),
     [layoutMainWidth],
   );
-  const lastCommonFromFeedData = lastCommonFromFeed?.data;
+  const lastCommonFromFeedData = lastVisitedCommon?.data;
 
   const renderLoadingHeader = lastCommonFromFeedData
     ? () => (
         <HeaderContentWrapper className={styles.headerContentWrapper}>
           <HeaderCommonContent
-            commonId={lastCommonFromFeed.id}
+            commonId={lastVisitedCommon.id}
             commonName={lastCommonFromFeedData.name}
             commonImage={lastCommonFromFeedData.image}
             isProject={lastCommonFromFeedData.isProject}

diff --git a/src/shared/hooks/useCases/index.ts b/src/shared/hooks/useCases/index.ts
@@ -23,7 +23,7 @@ export { useProposalById } from "./useProposalById";
 export { useRootCommonMembershipIntro } from "./useRootCommonMembershipIntro";
 export { useSubCommons } from "./useSubCommons";
 export { useSupportersData } from "./useSupportersData";
-export { useUserActivity } from "./useUserActivity";
+export { useLastVisitedCommon } from "./useLastVisitedCommon";
 export { useUserById } from "./useUserById";
 export { default as useUserCards } from "./useUserCards";
 export { useUserCommonIds } from "./useUserCommonIds";

diff --git a/src/shared/hooks/useCases/useUserActivity.ts → ...ed/hooks/useCases/useLastVisitedCommon.ts b/src/shared/hooks/useCases/useUserActivity.ts → ...ed/hooks/useCases/useLastVisitedCommon.ts
@@ -1,37 +1,37 @@
 import { useCallback, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Logger, UserActivityService } from "@/services";
-import { UserActivity } from "@/shared/models";
 import {
   commonLayoutActions,
+  CommonLayoutState,
   selectCommonLayoutLastCommonFromFeed,
 } from "@/store/states";
 
 interface Return {
-  lastVisitedCommon?: string;
-  updateUserActivity: (data: Partial<UserActivity>) => void;
+  lastVisitedCommon: CommonLayoutState["lastCommonFromFeed"];
+  updateLastVisitedCommon: (
+    data: CommonLayoutState["lastCommonFromFeed"],
+  ) => void;
 }
 
-export const useUserActivity = (userId?: string): Return => {
+export const useLastVisitedCommon = (userId?: string): Return => {
   const dispatch = useDispatch();
-  const lastCommonFromFeed = useSelector(selectCommonLayoutLastCommonFromFeed);
+  const lastVisitedCommon = useSelector(selectCommonLayoutLastCommonFromFeed);
 
-  const updateUserActivity = useCallback(
-    async (data: Partial<UserActivity>) => {
-      if (data.lastVisitedCommon) {
-        dispatch(
-          commonLayoutActions.setLastCommonFromFeed({
-            id: data.lastVisitedCommon,
-            data: null,
-          }),
-        );
-      }
-      if (!userId) {
+  const updateLastVisitedCommon = useCallback<
+    Return["updateLastVisitedCommon"]
+  >(
+    async (data) => {
+      dispatch(commonLayoutActions.setLastCommonFromFeed(data));
+
+      if (!userId || !data?.id) {
         return;
       }
 
       try {
-        await UserActivityService.updateUserActivity(userId, data);
+        await UserActivityService.updateUserActivity(userId, {
+          lastVisitedCommon: data.id,
+        });
       } catch (error) {
         Logger.error(error);
       }
@@ -62,7 +62,7 @@ export const useUserActivity = (userId?: string): Return => {
   }, [userId]);
 
   return {
-    lastVisitedCommon: lastCommonFromFeed?.id,
-    updateUserActivity,
+    lastVisitedCommon,
+    updateLastVisitedCommon,
   };
 };
diff --git a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx
@@ -10,7 +10,10 @@ import {
 import { Tab, Tabs } from "@/shared/components";
 import { useRoutesContext } from "@/shared/contexts";
 import { useModal } from "@/shared/hooks";
-import { useUserActivity, useUserCommonIds } from "@/shared/hooks/useCases";
+import {
+  useLastVisitedCommon,
+  useUserCommonIds,
+} from "@/shared/hooks/useCases";
 import { Avatar2Icon, Blocks2Icon, InboxIcon } from "@/shared/icons";
 import { CreateCommonPrompt } from "@/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components";
 import { LayoutTab } from "../../constants";
@@ -41,7 +44,7 @@ const LayoutTabs: FC<LayoutTabsProps> = (props) => {
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const { data: userCommonIds } = useUserCommonIds();
-  const { lastVisitedCommon } = useUserActivity(userId);
+  const { lastVisitedCommon } = useLastVisitedCommon(userId);
   const {
     isShowing: isCreateCommonPromptOpen,
     onOpen: onCreateCommonPromptOpen,
@@ -81,7 +84,7 @@ const LayoutTabs: FC<LayoutTabsProps> = (props) => {
   } as CSSProperties;
 
   const handleSpacesClick = () => {
-    const commonForRedirectId = lastVisitedCommon || userCommonIds[0];
+    const commonForRedirectId = lastVisitedCommon?.id || userCommonIds[0];
 
     if (commonForRedirectId) {
       history.push(getCommonPagePath(commonForRedirectId));

diff --git a/...hared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/Navigation.tsx b/...hared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/Navigation.tsx
@@ -7,10 +7,13 @@ import {
   selectUser,
   selectUserStreamsWithNotificationsAmount,
 } from "@/pages/Auth/store/selectors";
-import { InboxItemType, ROUTE_PATHS } from "@/shared/constants";
+import { ROUTE_PATHS } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { useModal } from "@/shared/hooks";
-import { useUserActivity, useUserCommonIds } from "@/shared/hooks/useCases";
+import {
+  useLastVisitedCommon,
+  useUserCommonIds,
+} from "@/shared/hooks/useCases";
 import { BlocksIcon, InboxIcon } from "@/shared/icons";
 import {
   CommonSidenavLayoutTab,
@@ -40,8 +43,8 @@ const Navigation: FC<NavigationProps> = (props) => {
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const { data: userCommonIds } = useUserCommonIds();
-  const { lastVisitedCommon } = useUserActivity(userId);
-  const mySpacesCommonId = lastVisitedCommon || userCommonIds[0] || "";
+  const { lastVisitedCommon } = useLastVisitedCommon(userId);
+  const mySpacesCommonId = lastVisitedCommon?.id || userCommonIds[0] || "";
   const mySpacesPagePath = (
     mySpacesCommonId ? getCommonPagePath(mySpacesCommonId) : ""
   ) as ROUTE_PATHS;