抽离 usePager 自定义 hook

hooks/usePager.tsx

@@ -0,0 +1,49 @@
+import Link from 'next/link';
+import _ from 'lodash';
+
+type Options = {
+    page: number;
+    totalPage: number;
+    urlMaker?: (n: number) => string;
+}
+const defaultUrlMaker = (n:number) => `?page=${n}`
+
+export const usePager = (options: Options) => {
+    const {page, totalPage, urlMaker: _urlMaker} = options;
+    const urlMaker = _urlMaker || defaultUrlMaker
+    const numbers = [];
+    numbers.push(1);
+    for (let i = page - 3; i <= page + 3; i++) {
+        numbers.push(i);
+    }
+    numbers.push(totalPage);
+    const pageNumbers = _.uniq(numbers).sort().filter(n => n >= 1 && n <= totalPage)
+        .reduce((result, n) => n - (result[result.length - 1] || 0) === 1 ?
+            result.concat(n) : result.concat(-1, n), []);
+    console.log('inner')
+    const pager = (
+        <div className="wrapper">
+            {page !== 1 && <Link href={urlMaker(page - 1)}><a>上一页</a></Link>}
+            {pageNumbers.map(n => n === -1 ?
+                <span>...</span> :
+                <Link key={n} href={urlMaker(n)}><a>{n}</a></Link>)}
+
+            {page < totalPage &&
+            <Link href={urlMaker(page + 1)}><a>下一页</a></Link>}
+            <span>
+        第 {page} / {totalPage} 页
+      </span>
+
+            <style jsx>{`
+        .wrapper {
+          margin: 0 -8px;
+        }
+        .wrapper > a, .wrapper > span{
+          margin: 0 8px;
+        }
+      `}</style>
+        </div>
+
+    );
+    return {pager};
+};

pages/posts/index.tsx

@@ -3,15 +3,18 @@ import {getDatabaseConnection} from 'lib/getDatabaseConnection';
 import {Post} from 'src/entity/Post';
 import Link from 'next/link';
 import qs from 'querystring';
+import {usePager} from '../../hooks/usePager';
 
 type Props = {
     posts: Post[];
     count: number;
     perPage: number;
     page: number;
+    totalPage: number;
 }
 const PostsIndex: NextPage<Props> = (props) => {
-    const {posts} = props;
+    const {posts, page, totalPage} = props;
+    const {pager} = usePager({page, totalPage})
     return (
         <div>
             <h1>文章列表({props.count}) 每页{props.perPage}</h1>
@@ -25,10 +28,7 @@ const PostsIndex: NextPage<Props> = (props) => {
                 </div>
             )}
             <footer>
-                共 {props.count} 篇文章，当前是第 {props.page} 页
-                <Link href={`?page=${props.page - 1}`}><a>上一页</a></Link>
-                |
-                <Link href={`?page=${props.page + 1}`}><a>下一页</a></Link>
+                {pager}
             </footer>
         </div>
     );
@@ -41,7 +41,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     const query = qs.parse(search);
     const page = parseInt(query.page?.toString()) || 1;
     const connection = await getDatabaseConnection();// 第一次链接能不能用 get
-    const perPage = 3; // 每页只有3个
+    const perPage = 2;
     const [posts, count] = await connection.manager.findAndCount(Post,
         {skip: (page - 1) * perPage, take: perPage});
     const ua = context.req.headers['user-agent'];
@@ -50,7 +50,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
             browser: ua,
             posts: JSON.parse(JSON.stringify(posts)),
             count: count,
-            perPage, page
+            perPage, page,
+            totalPage: Math.ceil(count / perPage)
         }
     };
 };