diff --git a/README.md b/README.md index be8a8c6b6..3bf99199d 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://Nika-Andriy.github.io/react_pagination/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index 189a990c8..7ac961a82 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,55 @@ import React from 'react'; import './App.css'; import { getNumbers } from './utils'; +import { Pagination } from './components/Pagination'; +import { useSearchParams } from 'react-router-dom'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars const items = getNumbers(1, 42).map(n => `Item ${n}`); +const total = items.length; export const App: React.FC = () => { + const [searchParams, setSearchParams] = useSearchParams(); + + const currentPage = Number(searchParams.get('page')) || 1; + const perPage = Number(searchParams.get('perPage')) || 5; + + const startIndex = (currentPage - 1) * perPage; + const visibleItems = items.slice(startIndex, startIndex + perPage); + + const updateParams = (params: { + page?: string | number; + perPage?: string | number; + }) => { + const newParams = new URLSearchParams(searchParams); + + Object.entries(params).forEach(([key, value]) => { + if (value === null) { + newParams.delete(key); + } else { + newParams.set(key, value.toString()); + } + }); + + setSearchParams(newParams); + }; + + const handlePerPageChange = (event: React.ChangeEvent) => { + updateParams({ + perPage: event.target.value, + page: 1, + }); + }; + + const handlePageChange = (page: number) => { + updateParams({ page }); + }; + return (

Items with Pagination

- Page 1 (items 1 - 5 of 42) + {`Page ${currentPage} (items ${startIndex + 1} - ${Math.min(currentPage * perPage, total)} of ${total})`}

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