diff --git a/README.md b/README.md index be8a8c6b6..41f1a15ca 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://timurradkevic.github.io/react_pagination/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index 189a990c8..e985f38ef 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,29 @@ -import React from 'react'; +import React, { ChangeEvent, useState } from 'react'; import './App.css'; import { getNumbers } from './utils'; +import { Pagination } from './components/Pagination'; // eslint-disable-next-line @typescript-eslint/no-unused-vars const items = getNumbers(1, 42).map(n => `Item ${n}`); export const App: React.FC = () => { + const total = 42; + const [perPage, setPerPage] = useState(5); + const [currentPage, setCurrentPage] = useState(1); + const start = (currentPage - 1) * perPage; + const end = currentPage * perPage > total ? total : currentPage * perPage; + + const handleChangePerPage = (event: ChangeEvent) => { + setPerPage(+event.target.value); + setCurrentPage(1); + }; + return (

Items with Pagination

- Page 1 (items 1 - 5 of 42) + Page {currentPage} (items {start + 1} - {end} of 42)

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