From eac361a0d498286468a97f318a8aac14abd8fc6f Mon Sep 17 00:00:00 2001 From: Thana Tingprasom Date: Sat, 20 Jan 2024 13:05:47 +0700 Subject: [PATCH] Add Pagination --- content/posts/setup-uptime-kuma.md | 8 +- content/posts/simple-paginate.md | 123 +++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 4 deletions(-) create mode 100644 content/posts/simple-paginate.md diff --git a/content/posts/setup-uptime-kuma.md b/content/posts/setup-uptime-kuma.md index 6ada084..1276b17 100644 --- a/content/posts/setup-uptime-kuma.md +++ b/content/posts/setup-uptime-kuma.md @@ -11,7 +11,7 @@ date = 2024-01-19T22:26:45+07:00 #### 1. Basic setup -```sh +```shell sudo apt update && sudo apt upgrade -y sudo timedatectl set-timezone Asia/Bangkok @@ -20,7 +20,7 @@ sudo apt install curl git -y #### 2. Install nodejs (v.20) and pm2 -```sh +```shell curl -sL https://deb.nodesource.com/setup_20.x -o /tmp/nodesource_setup.sh sudo bash /tmp/nodesource_setup.sh @@ -39,7 +39,7 @@ pm2 --version #### 3. Install Uptime Kuma -```sh +```shell git clone https://github.com/louislam/uptime-kuma.git cd uptime-kuma @@ -57,7 +57,7 @@ pm2 save && pm2 startup #### 4. Update Uptime Kuma -```sh +```shell git fetch --all git checkout 1.23.11 --force diff --git a/content/posts/simple-paginate.md b/content/posts/simple-paginate.md new file mode 100644 index 0000000..cac61a5 --- /dev/null +++ b/content/posts/simple-paginate.md @@ -0,0 +1,123 @@ ++++ +title = 'Simple Paginate' +date = 2024-01-20T12:56:17+07:00 ++++ + +- ปล. เป็น Code แบบ Simple +- ปล2. Code ตัวอย่างคือการใช้งานใน Express + Typescript + Mongoose + +ใน output ที่ตอบกลับจะเป็น + +```json +{ + "data": [], + "currentPage": "หน้าปัจจุบัน", + "nextPage": "หน้าถัดไปถ้ามี แต่ถ้าไม่มีจะเป็น Null", + "prevPage": "หน้าก่อนหน้าถ้ามี แต่ถ้าไม่มีจะเป็น Null", + "count": "จำนวน data ทั้งหมดที่มี" +} +``` + +ซึ่งจะทำให้ Frontend สามารถนำไปใช้งานได้ง่ายยิ่งขึ้น + +#### 1. สร้างไฟล์ utils/pagination.util/ts + +```js +interface PaginationParams { + perPage: number; + page: number; + skip: number; +} + +interface PaginationResponse { + data: T[]; + currentPage: number; + nextPage?: number; + prevPage?: number; + count: number; +} + +export function buildPaginationParam( + page: string, + perPage: string, + limit: number +): PaginationParams { + // Pagination + const pageInt = !Number.isNaN(parseInt(page)) ? parseInt(page) : 1; + let perPageInt = !Number.isNaN(parseInt(perPage)) ? parseInt(perPage) : 10; + + // Set a maximum limit + perPageInt = Math.min(perPageInt, limit); + + const skip = (pageInt - 1) * perPageInt; + + return { + perPage: perPageInt, + page: pageInt, + skip, + }; +} + +export function buildResponsePagination( + data: T[], + page: number, + perPage: number, + totalCount: number +): PaginationResponse { + const currentPage = page; + const totalPages = Math.ceil(totalCount / perPage); + + const hasNextPage = currentPage < totalPages; + const hasPrevPage = currentPage > 1; + + const nextPage = hasNextPage ? currentPage + 1 : undefined; + const prevPage = hasPrevPage ? currentPage - 1 : undefined; + + return { + data, + currentPage, + nextPage, + prevPage, + count: totalCount, + }; +} +``` + +#### 2. Usage + +```js +const { page, perPage } = req.query + +const { + perPage: perPageInt, + page: pageInt, + skip, +} = buildPaginationParam(page as string, perPage as string, 10) + +// Find all post +const [posts, count] = await Promise.all([ + await Post.find({}) + .skip(skip) + .limit(perPageInt) + .lean(), + await Post.countDocuments(), +]) + +const output = buildResponsePagination( + posts, + pageInt, + perPageInt, + count +) + +res.send({ + message: SuccessMessages.GetSuccess, + data: output.data, + currentPage: output.currentPage, + nextPage: output.nextPage || null, + prevPage: output.prevPage || null, + count: count, +}) +``` + +- ที่ต้องกำหนด Limit ไว้ด้วย เนื่องจากป้องกันการ Dump ข้อมูลจาก database และลดการทำงานของ Server ได้