fix: apply mark/unMark at once

linkarchive · Aug 23, 2023 · e6628c9 · e6628c9
1 parent a821a27
commit e6628c9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/src/components/LinkItem/LinkItemList.tsx b/src/components/LinkItem/LinkItemList.tsx
@@ -4,7 +4,7 @@ import React, { useEffect } from 'react';
 import LinkItemListLayout from '@/layouts/LinkItemLayout';
 import Suggestion from '../Home/Suggestion/Suggestion';
 import { useAppDispatch } from '@/store';
-import { setLinkCount } from '@/store/slices/countSlice';
+import { setLinkCount, setMarkCount } from '@/store/slices/countSlice';
 
 interface LinkItemListRendererProps extends LinkItemListProps {
   ItemComponent: React.ComponentType;
@@ -36,11 +36,18 @@ const LinkItemListRenderer = ({
     }));
   });
 
+  // 링크 수 계산 후 dispatch
   useEffect(() => {
     const totalLinkCount = data.reduce((acc, curr) => acc + (curr.linkList?.length || 0), 0);
     dispatch(setLinkCount(totalLinkCount));
   }, [data, dispatch]);
 
+  // 마크 수 계산 후 dispatch
+  useEffect(() => {
+    const totalMarkCount = data.reduce((acc, curr) => acc + (curr.markList?.length || 0), 0);
+    dispatch(setMarkCount(totalMarkCount));
+  }, [data, dispatch]);
+
   return (
     <LinkItemListLayout>
       {isEmpty ? (

diff --git a/src/hooks/useInfinityScroll.ts b/src/hooks/useInfinityScroll.ts
@@ -25,7 +25,6 @@ const useInfinityScroll = <TPage>({
       return fetchFn(pageParam || '');
     },
     getNextPageParam: (lastPage, pages) => getNextPageParam(lastPage, pages),
-    staleTime: 5000,
     retry: 1,
     ...config,
   });

diff --git a/src/layouts/LinkItemLayout.tsx b/src/layouts/LinkItemLayout.tsx
@@ -24,7 +24,7 @@ const LinkItemListLayout = ({ children }: LinkItemListLayoutProps) => {
   const { myLink, userLink } = useSelector((state: RootState) => state.nav);
   const { myId } = useSelector((state: RootState) => state.user);
   const { current } = useSelector((state: RootState) => state.router);
-  const { linkCount } = useSelector((state: RootState) => state.count);
+  const { linkCount, markCount } = useSelector((state: RootState) => state.count);
   const [isButtonClicked, setIsButtonClicked] = useState(false);
 
   const userId = Number(router.query.userId) || myId;
@@ -33,7 +33,7 @@ const LinkItemListLayout = ({ children }: LinkItemListLayoutProps) => {
   const USER_LINK = HOME_PAGE ? myLink : userLink;
 
   const { data: tagList } = useQuery({
-    queryKey: ['tagList', myLink, userLink, current, ARCHIVE_PAGE, linkCount],
+    queryKey: ['tagList', myLink, userLink, current, ARCHIVE_PAGE, linkCount, markCount],
     queryFn: () => fetchFn(userId),
   });
 

diff --git a/src/store/slices/countSlice.ts b/src/store/slices/countSlice.ts
@@ -17,7 +17,10 @@ export const countSlice = createSlice({
     setLinkCount: (state, action: PayloadAction<number>) => {
       state.linkCount = action.payload;
     },
+    setMarkCount: (state, action: PayloadAction<number>) => {
+      state.markCount = action.payload;
+    },
   },
 });
 
-export const { setLinkCount } = countSlice.actions;
+export const { setLinkCount, setMarkCount } = countSlice.actions;