jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat: 쿼리 인피니트 수정 반영

Browse Source
This commit is contained in:
정현조 2024-09-26 03:41:43 +09:00
parent cf97dc4d20
commit 3d16081a6d
2 changed files with 75 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/pages/ProjectReviewList.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect, useRef } from 'react';
import { useParams, Link } from 'react-router-dom';
import useReviewByStatusQuery from '@/queries/reviews/useReviewByStatusQuery';
import useAuthStore from '@/stores/useAuthStore';
@ -14,12 +14,40 @@ export default function ProjectReviewList() {
const [, setSearchQuery] = useState('');
const [sortValue, setSortValue] = useState('latest');
const { data: projectReviews = [] } = useReviewByStatusQuery(
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useReviewByStatusQuery(
Number(projectId),
memberId,
activeTab !== 'all' ? activeTab : undefined
);
const projectReviews = data?.pages.flat() || [];
const loadMoreRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (!hasNextPage || isFetchingNextPage) return;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
fetchNextPage();
}
},
{ threshold: 1.0 }
);
const currentLoadMoreRef = loadMoreRef.current;
if (currentLoadMoreRef) {
observer.observe(currentLoadMoreRef);
}
return () => {
if (currentLoadMoreRef) {
observer.unobserve(currentLoadMoreRef);
}
};
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
return (
<div>
<header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4">
@ -41,6 +69,13 @@ export default function ProjectReviewList() {
setSortValue={setSortValue}
workspaceId={Number(workspaceId)}
/>
{isFetchingNextPage && <div className="py-4 text-center">로딩 중...</div>}
<div
ref={loadMoreRef}
className="h-1"
/>
</div>
);
}

40
frontend/src/pages/WorkspaceReviewList.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect, useRef } from 'react';
import { useParams, Link } from 'react-router-dom';
import useWorkspaceReviewsQuery from '@/queries/workspaces/useWorkspaceReviewsQuery';
import useAuthStore from '@/stores/useAuthStore';
@ -14,12 +14,40 @@ export default function WorkspaceReviewList() {
const [, setSearchQuery] = useState('');
const [sortValue, setSortValue] = useState('latest');
const { data: workspaceReviews = [] } = useWorkspaceReviewsQuery(
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useWorkspaceReviewsQuery(
Number(workspaceId),
memberId,
activeTab !== 'all' ? activeTab : undefined
);
const workspaceReviews = data?.pages.flat() || [];
const loadMoreRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (!hasNextPage || isFetchingNextPage) return;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
fetchNextPage();
}
},
{ threshold: 1.0 }
);
const currentLoadMoreRef = loadMoreRef.current;
if (currentLoadMoreRef) {
observer.observe(currentLoadMoreRef);
}
return () => {
if (currentLoadMoreRef) {
observer.unobserve(currentLoadMoreRef);
}
};
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
return (
<div>
<header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4">
@ -31,6 +59,7 @@ export default function WorkspaceReviewList() {
<Button variant="outlinePrimary">리뷰 요청</Button>
</Link>
</header>
<ReviewList
reviews={workspaceReviews}
activeTab={activeTab}
@ -40,6 +69,13 @@ export default function WorkspaceReviewList() {
setSortValue={setSortValue}
workspaceId={Number(workspaceId)}
/>
{isFetchingNextPage && <div className="py-4 text-center">로딩 중...</div>}
<div
ref={loadMoreRef}
className="h-1"
/>
</div>
);
}