wip: Pagination

Author: unlight

.eslintrc.js

@@ -155,7 +155,7 @@ module.exports = {
       },
     ],
     'unicorn/filename-case': [
-      1,
+      0,
       {
         cases: {
           kebabCase: true,

README.md

@@ -47,6 +47,7 @@ npm run dev
 ## Todo
 
 - pagination - https://tailwindow.github.io/component-tailwindcss/components/button/pagination/index.html#
+  https://ahooks.js.org/hooks/use-pagination
 - get rid of class-validator (use zod)
 - switch to react location
 - https://realworld-docs.netlify.app/docs/specs/backend-specs/endpoints

src/app/App.tsx

@@ -4,7 +4,7 @@ import { SessionServiceInterface, Tokens } from '@application';
 import { Footer, Loader, Loading, Navbar } from '@components';
 import { inject } from 'njct';
 import React, { Suspense } from 'react';
-import { HashRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
 import { AppErrorBoundary } from './AppErrorBoundary';
@@ -27,7 +27,7 @@ export function App() {
     <React.StrictMode>
       <RecoilRoot>
         <AppErrorBoundary>
-          <HashRouter>
+          <BrowserRouter>
             <Navbar user={user} />
             <Routes>
               <Route path="/" element={<Home />} />
@@ -44,7 +44,7 @@ export function App() {
               />
             </Routes>
             <Footer />
-          </HashRouter>
+          </BrowserRouter>
         </AppErrorBoundary>
         <Loader />
       </RecoilRoot>

src/app/home/useHome.ts

@@ -2,23 +2,31 @@ import { Tokens } from '@application';
 import { ArticleServiceInterface } from '@application/article';
 import { useRequest } from 'ahooks';
 import { inject } from 'njct';
+import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 export function useHome() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { data: articleList } = useRequest(async () => {
-    const page = Number(searchParams.get('page') || 1);
-    const take = 5;
-    const skip = take * (page - 1);
-    const articleService = inject<ArticleServiceInterface>(
-      Tokens.ArticleService,
-    );
-    const result = await articleService.findMany({
-      skip,
-      take,
-    });
-    return result.unwrap();
-  });
+  const [searchParams] = useSearchParams();
+  const { data, run } = useRequest(
+    async () => {
+      const page = Number(searchParams.get('page') || 1);
+      const take = 5;
+      const skip = take * (page - 1);
+      const articleService = inject<ArticleServiceInterface>(
+        Tokens.ArticleService,
+      );
+      const result = await articleService.findMany({
+        skip,
+        take,
+      });
+      return result.unwrap();
+    },
+    { manual: true },
+  );
 
-  return { articleList };
+  useEffect(() => {
+    run();
+  }, [run, searchParams]);
+
+  return { articleList: data };
 }

src/components/Pagination/PageItem.tsx

@@ -1,33 +1,26 @@
 import classNames from 'clsx';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { NavLink, useSearchParams } from 'react-router-dom';
 
 type PageItemProps = {
   active?: boolean;
-  link: number | string;
   page: number;
 };
 
 export function PageItem(props: PageItemProps) {
-  const { active, page, link } = props;
-  const [searchParams, setSearchParams] = useSearchParams();
-  const clickHandler = useCallback(() => {
-    searchParams.set('page', String(page));
-    setSearchParams(searchParams);
-  }, [page, searchParams, setSearchParams]);
+  const { active, page } = props;
+  const [searchParams] = useSearchParams();
+
+  searchParams.set('page', page.toString());
 
   return (
     <li
       className={classNames('page-item', {
         active,
       })}
     >
-      <NavLink
-        className="page-link"
-        onClick={clickHandler}
-        to={`?page=${page}`}
-      >
-        {link}
+      <NavLink className="page-link" to={`?${searchParams.toString()}`}>
+        {page}
       </NavLink>
     </li>
   );

src/components/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { PageItem } from './PageItem';
 
@@ -8,17 +8,11 @@ type PaginationProps = {
 };
 
 export function Pagination(props: PaginationProps) {
-  const { total, current = 1 } = props;
-  const [currentLink, setCurrentLink] = useState(current);
-
   return (
     <nav>
       <ul className="pagination">
-        <PageItem link="First" page={1} />
-        <PageItem link="Previous" page={current - 1} />
-        <PageItem link={current} page={current} />
-        <PageItem link="Next" page={current + 1} />
-        <PageItem link="Last" />
+        <PageItem page={1} />
+        <PageItem page={2} />
       </ul>
     </nav>
   );