fix: async component in client components

src/app/page.tsx

@@ -1,7 +1,11 @@
-import type { FC } from 'react';
+import type { ReactNode } from 'react';
 
 import { Screen } from '@/components/page/TopPage';
 
-const TopPage: FC = () => <Screen />;
+const TopPage = ({
+  searchParams,
+}: {
+  searchParams: { page?: number };
+}): ReactNode => <Screen page={searchParams.page ?? 1} />;
 
 export default TopPage;

src/components/page/TopPage/index.tsx

@@ -5,13 +5,16 @@ import { WithFooter } from '@/components/Layout/WithFooter';
 import { SearchWorkPalette } from '@/domains/Work/components/SearchWorkPalette';
 import { WorkCards } from '@/domains/Work/components/WorkCards';
 
-export const Screen: FC = () => (
+type Props = {
+  page: number;
+};
+export const Screen: FC<Props> = ({ page }) => (
   <Vertical className="gap-16 flex-grow" as="main">
     <div className=" sticky top-24 h-[200px]">
       <WithFooter className="px-8">
         <SearchWorkPalette />
       </WithFooter>
     </div>
-    <WorkCards />
+    <WorkCards page={page} />
   </Vertical>
 );

src/components/ui/Pagination/index.tsx

@@ -28,6 +28,8 @@ export const Pagination: FC<Props> = ({
   currentPage,
   displayRange = 1,
 }: Props) => {
+  console.log('currentPage', currentPage);
+  console.log('totalPage', totalPage);
   // Format current page to be between 1 and totalPage ( 1 <= formatCurrentPage <= totalPage )
   const formatCurrentPage = restrictRange(currentPage, 1, totalPage);
 

src/domains/Work/components/WorkCards/index.tsx

@@ -1,16 +1,39 @@
 import type { FC } from 'react';
 import { Suspense } from 'react';
 
+import { worksRepository } from '../../repository';
+
 import { WorkCardsContainer } from './presentations';
 import { WorkCardsErrorPresentation } from './presentations/error';
 import { WorkCardsLoadingPresentation } from './presentations/loading';
 
 import { ErrorBoundary } from '@/libs/ErrorBoundary';
 
-export const WorkCards: FC = () => (
+type Props = {
+  page: number;
+};
+export const WorkCards: FC<Props> = ({ page }) => (
   <ErrorBoundary fallback={<WorkCardsErrorPresentation />}>
     <Suspense fallback={<WorkCardsLoadingPresentation />}>
-      <WorkCardsContainer />
+      <WorkCardsFetchContainer page={page} />
     </Suspense>
   </ErrorBoundary>
 );
+
+const WorkCardsFetchContainer: FC<{ page: number }> = async ({ page }) => {
+  const { works, totalCount } = await worksRepository.getWorks({
+    query: {
+      page,
+    },
+  });
+  console.log(totalCount);
+  return (
+    <WorkCardsContainer
+      works={works}
+      currentPage={page}
+      totalPage={
+        Math.ceil(totalCount / 30) == 0 ? 1 : Math.ceil(totalCount / 30)
+      }
+    />
+  );
+};

src/domains/Work/components/WorkCards/presentations/container.tsx

@@ -4,36 +4,25 @@ import type { FC } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
-import { worksRepository } from '../../../repository';
-
 import { WorkCardsPresentation } from './main';
 
-const WorkCardsFetchContainer: FC<{
+import type { Works } from '@/domains/Work/types';
+
+type Props = {
   currentPage: number;
-  handleNextPage: (page: number) => void;
-}> = async ({ currentPage, handleNextPage }) => {
-  const { works, totalCount } = await worksRepository.getWorks({
-    query: {
-      page: currentPage,
-    },
-  });
-  return (
-    <WorkCardsPresentation
-      works={works}
-      totalPage={Math.round(totalCount / 30)}
-      currentPage={currentPage}
-      handleNextPage={handleNextPage}
-    />
-  );
+  totalPage: number;
+  works: Works;
 };
-
-export const WorkCardsContainer: FC = () => {
+export const WorkCardsContainer: FC<Props> = ({ works, totalPage }) => {
   const params = useSearchParams();
   const currentPage = parseInt(params.get('page') || '1');
   const router = useRouter();
+
   return (
-    <WorkCardsFetchContainer
+    <WorkCardsPresentation
       currentPage={currentPage}
+      works={works}
+      totalPage={totalPage}
       handleNextPage={(page: number) => router.push(`/?page=${page}`)}
     />
   );

src/domains/Work/utils/converter/work.ts

@@ -13,7 +13,7 @@ export const convertWork = (work: modelWork): Work => ({
   title: work.title,
   creator: userConverter(work.user),
   isPublic: work.visibility === 'public',
-  tags: work.tags.map((tag) => tagConverter(tag)),
+  tags: work.tags?.map((tag) => tagConverter(tag)),
   thumbnailUrl: work.thumbnail.url,
   createdAt: work.created_at,
 });
@@ -38,7 +38,7 @@ export const convertCreateWork = (work: DefaultWork): PostWork => ({
   title: work.title,
   description: work.description,
   visibility: work.isPublic ? 'public' : 'private',
-  tags_id: work.tags.map((tag) => tag.id),
+  tags_id: work.tags?.map((tag) => tag.id),
   thumbnail_asset_id: work.thumbnail.id,
   urls: urlsConverterToBaseURLInfo(work.urls),
   assets_id: work.assets.map((asset) => asset.id),