From 66cad36d62b37dd352d19b644a5608092b1269c5 Mon Sep 17 00:00:00 2001 From: fedechkova Date: Fri, 17 Apr 2026 22:41:04 +0200 Subject: [PATCH 1/2] feat: implement pagination with perPage selector and URL params --- README.md | 4 +- src/App.tsx | 126 +++++++++-------------- src/components/Pagination/Pagination.tsx | 84 ++++++++++++++- src/index.tsx | 15 ++- 4 files changed, 147 insertions(+), 82 deletions(-) diff --git a/README.md b/README.md index be8a8c6b6..a1d06fc18 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ > Here is the [working version](https://mate-academy.github.io/react_pagination/) -You a given a list of items and markup for the `Pagination`. Implement the +You a given a list of items and markup for the `Pagination`. Implement the `Pagination` as a stateless component to show only the items for a current page. 1. The `Pagination` should be used with the next props: @@ -32,4 +32,4 @@ You a given a list of items and markup for the `Pagination`. Implement the - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_pagination/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://fedechkova.github.io/react_pagination/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index 189a990c8..db98ffe77 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,43 @@ import React from 'react'; import './App.css'; import { getNumbers } from './utils'; +import { Pagination } from './components/Pagination'; +import { useSearchParams } from 'react-router'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const items = getNumbers(1, 42).map(n => `Item ${n}`); +const items: string[] = getNumbers(1, 42).map(n => `Item ${n}`); + +const allowedPerPageValues = [3, 5, 10, 20]; export const App: React.FC = () => { + const [searchParams, setSearchParams] = useSearchParams(); + + const rawPage = Number(searchParams.get('page')) || 1; + const rawPerPage = Number(searchParams.get('perPage')) || 5; + + const itemsPerPage = allowedPerPageValues.includes(rawPerPage) + ? rawPerPage + : 5; + + const totalPages = Math.ceil(items.length / itemsPerPage); + const currentPage = rawPage >= 1 && rawPage <= totalPages ? rawPage : 1; + + const startIndex = (currentPage - 1) * itemsPerPage; + const endIndex = Math.min(startIndex + itemsPerPage, items.length); + const visibleItems = items.slice(startIndex, endIndex); + + const updateParams = (page: number, perPage: number) => { + setSearchParams({ + page: String(page), + perPage: String(perPage), + }); + }; + return (

Items with Pagination

- Page 1 (items 1 - 5 of 42) + {`Page ${currentPage} (items ${startIndex + 1} - ${endIndex} of ${items.length})`}

@@ -19,7 +45,12 @@ export const App: React.FC = () => {