From 798c037f3af881da83466e3778cba100d1cd4208 Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Sat, 28 Sep 2024 14:15:33 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20useInfiniteScroll=EC=97=90?= =?UTF-8?q?=EC=84=9C=20isLastPage=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/ReviewListPage/components/PageContents/index.tsx | 1 - .../src/pages/ReviewListPage/hooks/useInfiniteScroll.ts | 7 +++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx b/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx index 62b0e5532..5771c613c 100644 --- a/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx +++ b/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx @@ -24,7 +24,6 @@ const PageContents = () => { fetchNextPage, hasNextPage, isLoading, - isLastPage: data.pages[0].isLastPage, }); const handleReviewClick = (id: number) => { diff --git a/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts b/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts index 554993ed7..88174de4f 100644 --- a/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts +++ b/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts @@ -4,15 +4,14 @@ export interface InfiniteScrollProps { fetchNextPage: () => void; hasNextPage: boolean; isLoading: boolean; - isLastPage: boolean; } -const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading, isLastPage }: InfiniteScrollProps) => { +const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading }: InfiniteScrollProps) => { const observer = useRef(null); const lastElementRef = useCallback( (node: HTMLElement | null) => { - if (isLoading || isLastPage) return; + if (isLoading) return; if (observer.current) observer.current.disconnect(); observer.current = new IntersectionObserver((entries) => { @@ -23,7 +22,7 @@ const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading, isLastPage } if (node) observer.current.observe(node); }, - [isLoading, fetchNextPage, hasNextPage, isLastPage], + [isLoading, fetchNextPage, hasNextPage], ); return lastElementRef; From 45fe30e7b4bdbe03b278e854d49d692122005b7f Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Sat, 28 Sep 2024 14:20:51 +0900 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20=EB=AA=A9=20=ED=95=B8=EB=93=A4?= =?UTF-8?q?=EB=9F=AC=EC=97=90=EC=84=9C=20=EB=A7=88=EC=A7=80=EB=A7=89=20?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20id=EB=A5=BC=20=EB=B0=98=ED=99=98=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/mocks/handlers/review.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts index 4b370fa66..2eb0e3002 100644 --- a/frontend/src/mocks/handlers/review.ts +++ b/frontend/src/mocks/handlers/review.ts @@ -78,7 +78,7 @@ const getReviewList = (lastReviewId: number | null, size: number) => { return HttpResponse.json({ revieweeName: REVIEW_LIST.revieweeName, projectName: REVIEW_LIST.projectName, - lastReviewId: !isLastPage && lastReviewId !== null ? lastReviewId + size : null, + lastReviewId: paginatedReviews.length > 0 ? paginatedReviews[paginatedReviews.length - 1].reviewId : 0, isLastPage: isLastPage, reviews: paginatedReviews, }); From 6aae5eece04d3c85e250686fed85d341468d6005 Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Sat, 28 Sep 2024 14:23:14 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=EA=B0=80=20?= =?UTF-8?q?=EB=8D=94=EC=9D=B4=EC=83=81=20=EC=97=86=EC=9D=84=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0,=20hasNextPage=EB=A5=BC=20false=EB=A1=9C=20=EB=B0=98?= =?UTF-8?q?=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/review/useGetReviewList/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/hooks/review/useGetReviewList/index.ts b/frontend/src/hooks/review/useGetReviewList/index.ts index c314120e3..f0276913d 100644 --- a/frontend/src/hooks/review/useGetReviewList/index.ts +++ b/frontend/src/hooks/review/useGetReviewList/index.ts @@ -19,7 +19,9 @@ const useGetReviewList = () => { staleTime: 1 * 60 * 1000, }); - return result; + const hasNextPage = !result.data.pages.some((page) => page.reviews.length === 0); + + return { ...result, hasNextPage }; }; export default useGetReviewList; From 63c09c3e7e464b014da43e78f87257a44443e0bf Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Sat, 28 Sep 2024 14:26:16 +0900 Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=EB=AA=A9=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=EC=97=90=EC=84=9C=20lastReviewId=20=EA=B0=92=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/mocks/mockData/reviewListMockData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/mocks/mockData/reviewListMockData.ts b/frontend/src/mocks/mockData/reviewListMockData.ts index 19196e617..05f5a1d0a 100644 --- a/frontend/src/mocks/mockData/reviewListMockData.ts +++ b/frontend/src/mocks/mockData/reviewListMockData.ts @@ -2,7 +2,7 @@ import { ReviewList } from '@/types'; export const REVIEW_LIST: ReviewList = { revieweeName: '쑤쑤', projectName: 'review-me', - lastReviewId: 12, + lastReviewId: 24, isLastPage: false, reviews: [ { From 7b562acddd211bc822ea99c4bbd75b07eddb0d4e Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Wed, 2 Oct 2024 17:37:30 +0900 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20isLastPage=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=9C=20fetchNextPage=20=ED=98=B8=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/hooks/review/useGetReviewList/index.ts | 4 +--- .../components/PageContents/index.tsx | 15 ++++++++------- .../ReviewListPage/hooks/useInfiniteScroll.ts | 8 ++++---- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/frontend/src/hooks/review/useGetReviewList/index.ts b/frontend/src/hooks/review/useGetReviewList/index.ts index f0276913d..b9123080b 100644 --- a/frontend/src/hooks/review/useGetReviewList/index.ts +++ b/frontend/src/hooks/review/useGetReviewList/index.ts @@ -19,9 +19,7 @@ const useGetReviewList = () => { staleTime: 1 * 60 * 1000, }); - const hasNextPage = !result.data.pages.some((page) => page.reviews.length === 0); - - return { ...result, hasNextPage }; + return { ...result }; }; export default useGetReviewList; diff --git a/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx b/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx index 5771c613c..c63b68b83 100644 --- a/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx +++ b/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx @@ -14,25 +14,26 @@ import * as S from './styles'; const PageContents = () => { const navigate = useNavigate(); - const { data, fetchNextPage, hasNextPage, isLoading, isSuccess } = useGetReviewList(); + const { data, fetchNextPage, isLoading, isSuccess } = useGetReviewList(); const { param: reviewRequestCode } = useSearchParamAndQuery({ paramKey: 'reviewRequestCode', }); - const lastReviewElementRef = useInfiniteScroll({ - fetchNextPage, - hasNextPage, - isLoading, - }); - const handleReviewClick = (id: number) => { navigate(`/${ROUTE.detailedReview}/${reviewRequestCode}/${id}`); }; const { projectName, revieweeName } = data.pages[0]; + const isLastPage = data.pages[data.pages.length - 1].isLastPage; const reviews = data.pages.flatMap((page) => page.reviews); + const lastReviewElementRef = useInfiniteScroll({ + fetchNextPage, + isLoading, + isLastPage, + }); + return ( isSuccess && ( diff --git a/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts b/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts index 88174de4f..c32f41730 100644 --- a/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts +++ b/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts @@ -2,11 +2,11 @@ import { useCallback, useRef } from 'react'; export interface InfiniteScrollProps { fetchNextPage: () => void; - hasNextPage: boolean; isLoading: boolean; + isLastPage: boolean; } -const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading }: InfiniteScrollProps) => { +const useInfiniteScroll = ({ fetchNextPage, isLoading, isLastPage }: InfiniteScrollProps) => { const observer = useRef(null); const lastElementRef = useCallback( @@ -15,14 +15,14 @@ const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading }: InfiniteSc if (observer.current) observer.current.disconnect(); observer.current = new IntersectionObserver((entries) => { - if (entries[0].isIntersecting && hasNextPage) { + if (entries[0].isIntersecting && !isLastPage) { fetchNextPage(); } }); if (node) observer.current.observe(node); }, - [isLoading, fetchNextPage, hasNextPage], + [isLoading, fetchNextPage, isLastPage], ); return lastElementRef;