Merge pull request #322 from MovieReviewComment/feature/issue-162/fal…

…lback-no-review

[#162] Add fallback for no reviews in review list

ui/src/components/review/server/no-review.tsx

@@ -0,0 +1,13 @@
+import { XCircleIcon } from '@heroicons/react/24/outline';
+
+import Text from '@/components/common/server/text';
+
+export function NoReview() {
+  return (
+    <div className="flex flex-col p-6 items-center gap-8">
+      <XCircleIcon className="w-6 h-6 text-gray-500" />
+
+      <Text>해당하는 리뷰가 없습니다.</Text>
+    </div>
+  );
+}

ui/src/components/review/server/review-cards-list.tsx

@@ -1,5 +1,6 @@
 import Pagination from '@/components/common/client/pagination';
 import { ReviewCard } from '@/components/review/client/review-card';
+import { NoReview } from '@/components/review/server/no-review';
 
 import { listReviews } from '@/lib/apis/review/server';
 import type { ListReviewsQuery } from '@/lib/definitions/review';
@@ -10,9 +11,10 @@ export async function ReviewCardsList({ query }: { query: ListReviewsQuery }) {
   return (
     <div className="flex w-full flex-col items-center space-y-6">
       <div className="w-full">
-        {reviews.map((review) => (
-          <ReviewCard key={review.id} review={review} />
-        ))}
+        {reviews.length > 0 &&
+          reviews.map((review) => <ReviewCard key={review.id} review={review} />)}
+
+        {reviews.length === 0 && <NoReview />}
       </div>
 
       <Pagination totalPages={pagination.totalPageCount} />

ui/src/hooks/common/use-pagination.ts

@@ -7,6 +7,12 @@ export function usePagination(totalPages: number) {
   const searchParams = useSearchParams();
   const currentPage = Number(searchParams.get('page')) || 1;
 
+  // when there are no pages, set totalPages to 1
+  // to show fallback on 1st page
+  if (totalPages === 0) {
+    totalPages = 1;
+  }
+
   if (currentPage < 1 || currentPage > totalPages) {
     redirect(`${pathname}?page=1`);
     // TODO: handle properly - move this to page.tsx before fetch and redirect to notfound ?