From ed73cf749ee13a6985aef7978f99ff478876df8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stanis=C5=82aw=20Synowiec?= Date: Mon, 27 Mar 2023 19:06:20 +0200 Subject: [PATCH 1/2] chore: add pagination --- .../molecules/pagination/pagination.tsx | 107 ++++++++++++++++++ .../challengesList/challengesList.tsx | 5 +- 2 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 apps/web/components/molecules/pagination/pagination.tsx diff --git a/apps/web/components/molecules/pagination/pagination.tsx b/apps/web/components/molecules/pagination/pagination.tsx new file mode 100644 index 0000000..2234a78 --- /dev/null +++ b/apps/web/components/molecules/pagination/pagination.tsx @@ -0,0 +1,107 @@ +import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'; +import clsx from 'clsx'; +import { VisuallyHidden } from 'ui'; +import { useRouter } from 'next/router'; + +type PaginationProps = { + quantity: number; +}; + +export const Pagination = ({ quantity }: PaginationProps) => { + const router = useRouter(); + const currentPage: number = + router.query.page && !isNaN(Number(router.query.page)) + ? Number(router.query.page) + : 1; + const perPage = + router.query.page && !isNaN(Number(router.query.limit)) + ? Number(router.query.limit) + : 11; + const totalPages = Math.ceil(quantity / perPage); + + return ( +
+
+ + Previous + + + {currentPage} + + + Next + +
+
+
+

+ + {(currentPage - 1) * perPage + 1} + + - + + {currentPage !== totalPages ? currentPage * perPage : quantity} + {' '} + z {quantity} wyników +

+
+
+ +
+
+
+ ); +}; diff --git a/apps/web/components/organisms/challengesList/challengesList.tsx b/apps/web/components/organisms/challengesList/challengesList.tsx index 6862597..9827902 100644 --- a/apps/web/components/organisms/challengesList/challengesList.tsx +++ b/apps/web/components/organisms/challengesList/challengesList.tsx @@ -1,5 +1,6 @@ import { ChallengeItem } from 'molecules/challengeItem/challengeItem'; import type { Challenge } from '../../../types/types'; +import { Pagination } from 'molecules/pagination/pagination'; type TasksListProps = { challenges: Challenge[]; @@ -13,9 +14,7 @@ export const ChallengesList = ({ challenges }: TasksListProps) => { })} - {/*
*/} - {/* Zadania*/} - {/*
*/} + ); }; From d8676b50c5de0764fc1a3d3528b88fc48c6b4b3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stanis=C5=82aw=20Synowiec?= Date: Tue, 28 Mar 2023 10:04:44 +0200 Subject: [PATCH 2/2] fix: separate to smaller components --- .../pagginationArrow/paginationArrow.tsx | 42 +++++++ .../molecules/pagination/pagination.tsx | 107 ------------------ .../paginationItem/paginationItem.tsx | 24 ++++ .../challengesList/challengesList.tsx | 5 +- .../organisms/pagination/pagination.tsx | 92 +++++++++++++++ 5 files changed, 161 insertions(+), 109 deletions(-) create mode 100644 apps/web/components/molecules/pagginationArrow/paginationArrow.tsx delete mode 100644 apps/web/components/molecules/pagination/pagination.tsx create mode 100644 apps/web/components/molecules/paginationItem/paginationItem.tsx create mode 100644 apps/web/components/organisms/pagination/pagination.tsx diff --git a/apps/web/components/molecules/pagginationArrow/paginationArrow.tsx b/apps/web/components/molecules/pagginationArrow/paginationArrow.tsx new file mode 100644 index 0000000..f2e3ccc --- /dev/null +++ b/apps/web/components/molecules/pagginationArrow/paginationArrow.tsx @@ -0,0 +1,42 @@ +import { VisuallyHidden } from 'ui'; +import { + ChevronLeftIcon as PrevPageIcon, + ChevronRightIcon as NextPageIcon, +} from '@heroicons/react/20/solid'; +import clsx from 'clsx'; + +type PaginationArrowProps = { + pageNumber: number; + isDisabled: boolean; + type: 'next' | 'prev'; +}; + +export const PaginationArrow = ({ + pageNumber, + isDisabled, + type, +}: PaginationArrowProps) => { + return ( + + {type === 'prev' && ( + <> + Poprzednia strona + + ); +}; diff --git a/apps/web/components/molecules/pagination/pagination.tsx b/apps/web/components/molecules/pagination/pagination.tsx deleted file mode 100644 index 2234a78..0000000 --- a/apps/web/components/molecules/pagination/pagination.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'; -import clsx from 'clsx'; -import { VisuallyHidden } from 'ui'; -import { useRouter } from 'next/router'; - -type PaginationProps = { - quantity: number; -}; - -export const Pagination = ({ quantity }: PaginationProps) => { - const router = useRouter(); - const currentPage: number = - router.query.page && !isNaN(Number(router.query.page)) - ? Number(router.query.page) - : 1; - const perPage = - router.query.page && !isNaN(Number(router.query.limit)) - ? Number(router.query.limit) - : 11; - const totalPages = Math.ceil(quantity / perPage); - - return ( -
-
- - Previous - - - {currentPage} - - - Next - -
-
-
-

- - {(currentPage - 1) * perPage + 1} - - - - - {currentPage !== totalPages ? currentPage * perPage : quantity} - {' '} - z {quantity} wyników -

-
- -
-
- ); -}; diff --git a/apps/web/components/molecules/paginationItem/paginationItem.tsx b/apps/web/components/molecules/paginationItem/paginationItem.tsx new file mode 100644 index 0000000..f05360a --- /dev/null +++ b/apps/web/components/molecules/paginationItem/paginationItem.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx'; + +type PaginationItemProps = { + pageNumber: number; + isCurrent: boolean; +}; + +export const PaginationItem = ({ + pageNumber, + isCurrent, +}: PaginationItemProps) => { + return ( + + ); +}; diff --git a/apps/web/components/organisms/challengesList/challengesList.tsx b/apps/web/components/organisms/challengesList/challengesList.tsx index 9827902..4641b4d 100644 --- a/apps/web/components/organisms/challengesList/challengesList.tsx +++ b/apps/web/components/organisms/challengesList/challengesList.tsx @@ -1,6 +1,6 @@ import { ChallengeItem } from 'molecules/challengeItem/challengeItem'; import type { Challenge } from '../../../types/types'; -import { Pagination } from 'molecules/pagination/pagination'; +import { Pagination } from 'organisms/pagination/pagination'; type TasksListProps = { challenges: Challenge[]; @@ -14,7 +14,8 @@ export const ChallengesList = ({ challenges }: TasksListProps) => { })} - + {/**/} + ); }; diff --git a/apps/web/components/organisms/pagination/pagination.tsx b/apps/web/components/organisms/pagination/pagination.tsx new file mode 100644 index 0000000..448f061 --- /dev/null +++ b/apps/web/components/organisms/pagination/pagination.tsx @@ -0,0 +1,92 @@ +import { useRouter } from 'next/router'; +import { PaginationItem } from 'molecules/paginationItem/paginationItem'; +import { PaginationArrow } from 'molecules/pagginationArrow/paginationArrow'; + +type PaginationProps = { + numberOfItems: number; +}; + +export const Pagination = ({ numberOfItems }: PaginationProps) => { + const router = useRouter(); + const currentPage: number = + router.query.page && !isNaN(Number(router.query.page)) + ? Number(router.query.page) + : 1; + const perPage = + router.query.page && !isNaN(Number(router.query.limit)) + ? Number(router.query.limit) + : 11; + const totalPages = Math.ceil(numberOfItems / perPage); + + const prevPageNumber = currentPage - 1; + const nextPageNumber = currentPage + 1; + const startNumberOfItemsOnCurrentPage = (currentPage - 1) * perPage + 1; + const endNumberOfItemsOnCurrentPage = + currentPage !== totalPages ? currentPage * perPage : numberOfItems; + + return ( +
+ +
+
+

+ + {startNumberOfItemsOnCurrentPage} + + - + {endNumberOfItemsOnCurrentPage}{' '} + z {numberOfItems} wyników +

+
+
+ +
+
+
+ ); +};