Refactor : 리뷰 리스트

This commit is contained in:
정현조 2024-09-26 22:52:17 +09:00
parent 5f9d41fd09
commit b7019dbf28
5 changed files with 27 additions and 35 deletions

View File

@ -49,7 +49,6 @@ export async function updateReviewStatus(projectId: number, reviewId: number, me
)
.then(({ data }) => data);
}
export async function getReviewByStatus(
projectId: number,
memberId: number,
@ -63,7 +62,7 @@ export async function getReviewByStatus(
params: {
memberId,
limitPage,
sortDirection, // 정렬방향 추가
sortDirection,
...(reviewStatus ? { reviewStatus } : {}),
...(lastReviewId ? { lastReviewId } : {}),
},

View File

@ -15,11 +15,12 @@ export default function ProjectReviewList() {
const [sortValue, setSortValue] = useState('latest');
const sortDirection = sortValue === 'latest' ? 0 : 1;
const reviewStatus = activeTab !== 'all' ? activeTab : undefined;
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useReviewByStatusQuery(
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } = useReviewByStatusQuery(
Number(projectId),
memberId,
activeTab !== 'all' ? activeTab : undefined,
reviewStatus,
sortDirection
);
@ -27,6 +28,10 @@ export default function ProjectReviewList() {
const loadMoreRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
refetch();
}, [sortDirection, reviewStatus, refetch]);
useEffect(() => {
if (!hasNextPage || isFetchingNextPage) return;
@ -64,6 +69,7 @@ export default function ProjectReviewList() {
</Link>
</header>
<ReviewList
key={`${sortValue}-${activeTab}`}
reviews={projectReviews}
activeTab={activeTab}
setActiveTab={setActiveTab}

View File

@ -15,18 +15,23 @@ export default function WorkspaceReviewList() {
const [sortValue, setSortValue] = useState('latest');
const sortDirection = sortValue === 'latest' ? 0 : 1;
const reviewStatus = activeTab !== 'all' ? activeTab : undefined;
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useWorkspaceReviewsQuery(
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } = useWorkspaceReviewsQuery(
Number(workspaceId),
memberId,
sortDirection,
activeTab !== 'all' ? activeTab : undefined
reviewStatus
);
const workspaceReviews = data?.pages.flat() || [];
const loadMoreRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
refetch();
}, [sortDirection, reviewStatus, refetch]);
useEffect(() => {
if (!hasNextPage || isFetchingNextPage) return;
@ -65,6 +70,7 @@ export default function WorkspaceReviewList() {
</header>
<ReviewList
key={`${sortValue}-${activeTab}`}
reviews={workspaceReviews}
activeTab={activeTab}
setActiveTab={setActiveTab}

View File

@ -9,10 +9,9 @@ export default function useReviewByStatusQuery(
sortDirection: number
) {
return useSuspenseInfiniteQuery<ReviewResponse[]>({
queryKey: ['reviewByStatus', projectId, reviewStatus, sortDirection],
queryFn: ({ pageParam = undefined }) => {
return getReviewByStatus(projectId, memberId, sortDirection, reviewStatus, pageParam as number | undefined, 10);
},
queryKey: ['reviewByStatus', projectId, memberId, reviewStatus, sortDirection],
queryFn: ({ pageParam = undefined }) =>
getReviewByStatus(projectId, memberId, sortDirection, reviewStatus, pageParam as number | undefined, 10),
getNextPageParam: (lastPage) => {
if (lastPage.length === 0) return undefined;
@ -20,21 +19,12 @@ export default function useReviewByStatusQuery(
const lastReview = lastPage[lastPage.length - 1];
return lastReview.reviewId;
} else {
const firstReview = lastPage[0];
return firstReview.reviewId;
}
},
getPreviousPageParam: (firstPage) => {
if (firstPage.length === 0) return undefined;
if (sortDirection === 0) {
const firstReview = firstPage[0];
return firstReview.reviewId;
} else {
const lastReview = firstPage[firstPage.length - 1];
const lastReview = lastPage[lastPage.length - 1];
return lastReview.reviewId;
}
},
refetchOnMount: true,
refetchOnWindowFocus: false,
initialPageParam: undefined,
});
}

View File

@ -10,7 +10,7 @@ export default function useWorkspaceReviewsQuery(
limitPage: number = 10
) {
return useSuspenseInfiniteQuery<ReviewResponse[]>({
queryKey: ['workspaceReviews', workspaceId, reviewStatus, sortDirection],
queryKey: ['workspaceReviews', workspaceId, memberId, reviewStatus, sortDirection],
queryFn: ({ pageParam = undefined }) =>
getWorkspaceReviews(
workspaceId,
@ -28,23 +28,14 @@ export default function useWorkspaceReviewsQuery(
const lastReview = lastPage[lastPage.length - 1];
return lastReview.reviewId;
} else {
const firstReview = lastPage[0];
return firstReview.reviewId;
}
},
const lastReview = lastPage[lastPage.length - 1];
getPreviousPageParam: (firstPage) => {
if (firstPage.length === 0) return undefined;
if (sortDirection === 0) {
const firstReview = firstPage[0];
return firstReview.reviewId;
} else {
const lastReview = firstPage[firstPage.length - 1];
return lastReview.reviewId;
}
},
refetchOnMount: true,
refetchOnWindowFocus: false,
initialPageParam: undefined,
});
}