From e5d45150e7e4dcb49fca2e02b2dd968246f05d75 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Wed, 29 Nov 2023 16:58:05 +0400 Subject: [PATCH] change useUserActivity to useLastVisitedCommon --- src/pages/commonFeed/CommonFeed.tsx | 42 +++++++++---------- src/pages/commonFeed/CommonFeedPage.tsx | 11 +++-- src/shared/hooks/useCases/index.ts | 2 +- ...serActivity.ts => useLastVisitedCommon.ts} | 38 ++++++++--------- .../components/LayoutTabs/LayoutTabs.tsx | 9 ++-- .../components/Navigation/Navigation.tsx | 11 +++-- 6 files changed, 60 insertions(+), 53 deletions(-) rename src/shared/hooks/useCases/{useUserActivity.ts => useLastVisitedCommon.ts} (56%) diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx index 919a4b9030..97bd7b46fa 100644 --- 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 = (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 = (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 index 233a90a473..256c09382e 100644 --- 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(); 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( () => ({ @@ -68,13 +71,13 @@ const CommonFeedPage: FC = () => { }), [layoutMainWidth], ); - const lastCommonFromFeedData = lastCommonFromFeed?.data; + const lastCommonFromFeedData = lastVisitedCommon?.data; const renderLoadingHeader = lastCommonFromFeedData ? () => ( ) => 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) => { - 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 index 40d759d824..de37d17d22 100644 --- 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 = (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 = (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/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/Navigation.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/Navigation.tsx index 962edabb97..ed1a2b51e0 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/Navigation.tsx +++ b/src/shared/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 = (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;