Feature #155 : History Pagination, History Pending Error

apps/frontend/src/app/router/routeTree.gen.ts

@@ -18,12 +18,12 @@ import { Route as LoginErrorIndexImport } from './../../page/login/error/index';
 import { Route as mainUserIndexImport } from './../../page/(main)/user/index';
 import { Route as mainLotusIndexImport } from './../../page/(main)/lotus/index';
 import { Route as mainLotusCreateIndexImport } from './../../page/(main)/lotus/create/index';
+import { Route as mainLotusLotusIdIndexImport } from './../../page/(main)/lotus/$lotusId/index';
 
 // Create Virtual Routes
 
 const mainRouteLazyImport = createFileRoute('/(main)')();
 const IndexLazyImport = createFileRoute('/')();
-const mainLotusLotusIdIndexLazyImport = createFileRoute('/(main)/lotus/$lotusId/')();
 
 // Create/Update Routes
 
@@ -69,14 +69,6 @@ const mainLotusIndexRoute = mainLotusIndexImport
   } as any)
   .lazy(() => import('./../../page/(main)/lotus/index.lazy').then((d) => d.Route));
 
-const mainLotusLotusIdIndexLazyRoute = mainLotusLotusIdIndexLazyImport
-  .update({
-    id: '/lotus/$lotusId/',
-    path: '/lotus/$lotusId/',
-    getParentRoute: () => mainRouteLazyRoute
-  } as any)
-  .lazy(() => import('./../../page/(main)/lotus/$lotusId/index.lazy').then((d) => d.Route));
-
 const mainLotusCreateIndexRoute = mainLotusCreateIndexImport
   .update({
     id: '/lotus/create/',
@@ -85,6 +77,14 @@ const mainLotusCreateIndexRoute = mainLotusCreateIndexImport
   } as any)
   .lazy(() => import('./../../page/(main)/lotus/create/index.lazy').then((d) => d.Route));
 
+const mainLotusLotusIdIndexRoute = mainLotusLotusIdIndexImport
+  .update({
+    id: '/lotus/$lotusId/',
+    path: '/lotus/$lotusId/',
+    getParentRoute: () => mainRouteLazyRoute
+  } as any)
+  .lazy(() => import('./../../page/(main)/lotus/$lotusId/index.lazy').then((d) => d.Route));
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -131,20 +131,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginSuccessIndexImport;
       parentRoute: typeof rootRoute;
     };
+    '/(main)/lotus/$lotusId/': {
+      id: '/(main)/lotus/$lotusId/';
+      path: '/lotus/$lotusId';
+      fullPath: '/lotus/$lotusId';
+      preLoaderRoute: typeof mainLotusLotusIdIndexImport;
+      parentRoute: typeof mainRouteLazyImport;
+    };
     '/(main)/lotus/create/': {
       id: '/(main)/lotus/create/';
       path: '/lotus/create';
       fullPath: '/lotus/create';
       preLoaderRoute: typeof mainLotusCreateIndexImport;
       parentRoute: typeof mainRouteLazyImport;
     };
-    '/(main)/lotus/$lotusId/': {
-      id: '/(main)/lotus/$lotusId/';
-      path: '/lotus/$lotusId';
-      fullPath: '/lotus/$lotusId';
-      preLoaderRoute: typeof mainLotusLotusIdIndexLazyImport;
-      parentRoute: typeof mainRouteLazyImport;
-    };
   }
 }
 
@@ -153,15 +153,15 @@ declare module '@tanstack/react-router' {
 interface mainRouteLazyRouteChildren {
   mainLotusIndexRoute: typeof mainLotusIndexRoute;
   mainUserIndexRoute: typeof mainUserIndexRoute;
+  mainLotusLotusIdIndexRoute: typeof mainLotusLotusIdIndexRoute;
   mainLotusCreateIndexRoute: typeof mainLotusCreateIndexRoute;
-  mainLotusLotusIdIndexLazyRoute: typeof mainLotusLotusIdIndexLazyRoute;
 }
 
 const mainRouteLazyRouteChildren: mainRouteLazyRouteChildren = {
   mainLotusIndexRoute: mainLotusIndexRoute,
   mainUserIndexRoute: mainUserIndexRoute,
-  mainLotusCreateIndexRoute: mainLotusCreateIndexRoute,
-  mainLotusLotusIdIndexLazyRoute: mainLotusLotusIdIndexLazyRoute
+  mainLotusLotusIdIndexRoute: mainLotusLotusIdIndexRoute,
+  mainLotusCreateIndexRoute: mainLotusCreateIndexRoute
 };
 
 const mainRouteLazyRouteWithChildren = mainRouteLazyRoute._addFileChildren(mainRouteLazyRouteChildren);
@@ -172,8 +172,8 @@ export interface FileRoutesByFullPath {
   '/user': typeof mainUserIndexRoute;
   '/login/error': typeof LoginErrorIndexRoute;
   '/login/success': typeof LoginSuccessIndexRoute;
+  '/lotus/$lotusId': typeof mainLotusLotusIdIndexRoute;
   '/lotus/create': typeof mainLotusCreateIndexRoute;
-  '/lotus/$lotusId': typeof mainLotusLotusIdIndexLazyRoute;
 }
 
 export interface FileRoutesByTo {
@@ -182,8 +182,8 @@ export interface FileRoutesByTo {
   '/user': typeof mainUserIndexRoute;
   '/login/error': typeof LoginErrorIndexRoute;
   '/login/success': typeof LoginSuccessIndexRoute;
+  '/lotus/$lotusId': typeof mainLotusLotusIdIndexRoute;
   '/lotus/create': typeof mainLotusCreateIndexRoute;
-  '/lotus/$lotusId': typeof mainLotusLotusIdIndexLazyRoute;
 }
 
 export interface FileRoutesById {
@@ -194,15 +194,15 @@ export interface FileRoutesById {
   '/(main)/user/': typeof mainUserIndexRoute;
   '/login/error/': typeof LoginErrorIndexRoute;
   '/login/success/': typeof LoginSuccessIndexRoute;
+  '/(main)/lotus/$lotusId/': typeof mainLotusLotusIdIndexRoute;
   '/(main)/lotus/create/': typeof mainLotusCreateIndexRoute;
-  '/(main)/lotus/$lotusId/': typeof mainLotusLotusIdIndexLazyRoute;
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath;
-  fullPaths: '/' | '/lotus' | '/user' | '/login/error' | '/login/success' | '/lotus/create' | '/lotus/$lotusId';
+  fullPaths: '/' | '/lotus' | '/user' | '/login/error' | '/login/success' | '/lotus/$lotusId' | '/lotus/create';
   fileRoutesByTo: FileRoutesByTo;
-  to: '/' | '/lotus' | '/user' | '/login/error' | '/login/success' | '/lotus/create' | '/lotus/$lotusId';
+  to: '/' | '/lotus' | '/user' | '/login/error' | '/login/success' | '/lotus/$lotusId' | '/lotus/create';
   id:
     | '__root__'
     | '/'
@@ -211,8 +211,8 @@ export interface FileRouteTypes {
     | '/(main)/user/'
     | '/login/error/'
     | '/login/success/'
-    | '/(main)/lotus/create/'
-    | '/(main)/lotus/$lotusId/';
+    | '/(main)/lotus/$lotusId/'
+    | '/(main)/lotus/create/';
   fileRoutesById: FileRoutesById;
 }
 
@@ -252,8 +252,8 @@ export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileT
       "children": [
         "/(main)/lotus/",
         "/(main)/user/",
-        "/(main)/lotus/create/",
-        "/(main)/lotus/$lotusId/"
+        "/(main)/lotus/$lotusId/",
+        "/(main)/lotus/create/"
       ]
     },
     "/(main)/lotus/": {
@@ -270,12 +270,12 @@ export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileT
     "/login/success/": {
       "filePath": "login/success/index.tsx"
     },
-    "/(main)/lotus/create/": {
-      "filePath": "(main)/lotus/create/index.tsx",
+    "/(main)/lotus/$lotusId/": {
+      "filePath": "(main)/lotus/$lotusId/index.tsx",
       "parent": "/(main)"
     },
-    "/(main)/lotus/$lotusId/": {
-      "filePath": "(main)/lotus/$lotusId/index.lazy.tsx",
+    "/(main)/lotus/create/": {
+      "filePath": "(main)/lotus/create/index.tsx",
       "parent": "/(main)"
     }
   }

apps/frontend/src/feature/history/api.ts

@@ -2,16 +2,16 @@ import { HistoryType } from '.';
 import { api } from '@/shared/common/api';
 
 export const getLotusHistoryList = async ({
-  id
+  id,
+  page = 1
 }: {
   id: string;
+  page?: number;
 }): Promise<{ list: HistoryType[]; page: { current: number; max: number } }> => {
-  const response = await api.get(`/api/lotus/${id}/history`);
+  const response = await api.get(`/api/lotus/${id}/history?page=${page}&size=${5}`);
 
   const data = response.data as { list: HistoryType[]; page: { current: number; max: number } };
 
-  console.log(data);
-
   const body = {
     ...data,
     list: data.list.map(({ date, ...rest }) => ({ ...rest, date: new Date(date) }))

apps/frontend/src/feature/lotus/api.ts

@@ -4,7 +4,7 @@ import { api } from '@/shared/common/api';
 import { PageType } from '@/shared/pagination';
 
 export const getLotusList = async ({ page = 1 }: { page?: number }) => {
-  const response = await api.get(`/api/lotus?page=${page}`);
+  const response = await api.get(`/api/lotus?page=${page}&size=9`);
 
   const lotuses: LotusType[] = response.data.lotuses.map((lotus: LotusType) => ({
     ...lotus,

apps/frontend/src/page/(main)/lotus/$lotusId/index.lazy.tsx

@@ -1,18 +1,30 @@
-import { createLazyFileRoute } from '@tanstack/react-router';
+import { createLazyFileRoute, getRouteApi } from '@tanstack/react-router';
+import { lotusHistoryQueryOptions } from '@/feature/history/query';
 import { AsyncBoundary } from '@/shared/boundary';
 import { SuspenseLotusHistoryList } from '@/widget/history';
 import { CodeRunButton } from '@/widget/lotusCodeRun';
 import { SuspenseLotusDetail } from '@/widget/lotusDetail';
 import { SuspenseLotusFiles } from '@/widget/lotusDetail/SuspenseLotusFiles';
+import { SuspensePagination } from '@/widget/SuspensePagination';
 
 import '@/app/style/github.css';
 
 export const Route = createLazyFileRoute('/(main)/lotus/$lotusId/')({
   component: RouteComponent
 });
 
+const { useSearch, useNavigate, useParams } = getRouteApi('/(main)/lotus/$lotusId/');
+
 function RouteComponent() {
-  const { lotusId: id } = Route.useParams();
+  const { lotusId: id } = useParams();
+
+  const { page = 1 } = useSearch();
+
+  const navigate = useNavigate();
+
+  const handleChangePage = (page: number) => {
+    navigate({ search: { page } });
+  };
 
   return (
     <div className="flex flex-col gap-16">
@@ -27,7 +39,14 @@ function RouteComponent() {
       <CodeRunButton lotusId={id} />
 
       <AsyncBoundary pending={<div>Loading...</div>} rejected={() => <div>Error!</div>}>
-        <SuspenseLotusHistoryList id={id} />
+        <SuspenseLotusHistoryList id={id} page={page} />
+      </AsyncBoundary>
+
+      <AsyncBoundary pending={<div>Loading...</div>} rejected={() => <div>Error!</div>}>
+        <SuspensePagination
+          queryOptions={lotusHistoryQueryOptions.list({ id, page })}
+          onChangePage={handleChangePage}
+        />
       </AsyncBoundary>
     </div>
   );

apps/frontend/src/page/(main)/lotus/$lotusId/index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { z } from 'zod';
+
+const historySearchPageValidate = z.object({
+  page: z.number().default(1).optional()
+});
+
+export const Route = createFileRoute('/(main)/lotus/$lotusId/')({
+  validateSearch: (search) => historySearchPageValidate.parse(search)
+});

apps/frontend/src/shared/pagination/Pagination.tsx

@@ -15,13 +15,15 @@ interface PaginationProps {
   totalPages?: number;
   initialPage?: number;
   onChangePage?: (page: number) => void;
+  activeScrollTop?: true;
 }
 
-export function Pagination({ totalPages = 1, initialPage = 1, onChangePage }: PaginationProps) {
+export function Pagination({ totalPages = 1, initialPage = 1, onChangePage, activeScrollTop }: PaginationProps) {
   const { currentPage, onClickPage, onClickPrevious, onClickNext, getPaginationItems } = usePagination({
     totalPages,
     initialPage,
-    onChangePage
+    onChangePage,
+    activeScrollTop
   });
 
   return (

apps/frontend/src/shared/pagination/usePagination.tsx

@@ -4,15 +4,17 @@ interface UsePaginationProps {
   totalPages: number;
   initialPage?: number;
   onChangePage?: (page: number) => void;
+  activeScrollTop?: true;
 }
 
-export function usePagination({ totalPages, initialPage = 1, onChangePage }: UsePaginationProps) {
+export function usePagination({ totalPages, initialPage = 1, onChangePage, activeScrollTop }: UsePaginationProps) {
   const [currentPage, setCurrentPage] = useState(initialPage);
 
   const onClickPage = (page: number) => {
     setCurrentPage(page);
     onChangePage?.(page);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+
+    if (activeScrollTop) window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   const onClickPrevious = () => {

apps/frontend/src/widget/SuspensePagination.tsx

@@ -0,0 +1,33 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { Pagination } from '@/shared/pagination';
+
+interface Page {
+  max: number;
+  current: number;
+}
+
+interface PaginationQueryOptions {
+  queryKey: Record<string, any>[];
+  queryFn: (...args: any[]) => Promise<{ page: Page }>;
+}
+
+interface SuspensePaginationProps {
+  queryOptions: PaginationQueryOptions;
+  onChangePage: (page: number) => void;
+  activeScrollTop?: true;
+}
+
+export function SuspensePagination({ queryOptions, onChangePage, activeScrollTop }: SuspensePaginationProps) {
+  const { data } = useSuspenseQuery(queryOptions);
+
+  return (
+    <Pagination
+      totalPages={data?.page?.max ?? 1}
+      initialPage={data?.page?.current ?? 1}
+      onChangePage={onChangePage}
+      activeScrollTop={activeScrollTop}
+    />
+  );
+}
+
+SuspensePagination.Skeleton = Pagination.Skeleton;