Solution

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 `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_pagination/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://Anvrey.github.io/react_pagination/) and add it to the PR description.

package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.9.12",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -1,110 +1,53 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import { getNumbers } from './utils';
+import { Pagination } from './components/Pagination';
+import { ItemList } from './components/ItemList/ItemList';
+import { PageInfo } from './components/PageInfo';
+import { PerPageSelector } from './components/PerPageSelector/PerPageSelector';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [perPage, setPerPage] = useState(5);
+  const startIndex = (currentPage - 1) * perPage;
+  const lastIndex = Math.min(startIndex + perPage, items.length);
+  const visibleItems = items.slice(startIndex, lastIndex);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handlePerPageChange = (pages: number) => {
+    setPerPage(pages);
+    setCurrentPage(1);
+  };
+
   return (
     <div className="container">
       <h1>Items with Pagination</h1>
 
-      <p className="lead" data-cy="info">
-        Page 1 (items 1 - 5 of 42)
-      </p>
-
-      <div className="form-group row">
-        <div className="col-3 col-sm-2 col-xl-1">
-          <select
-            data-cy="perPageSelector"
-            id="perPageSelector"
-            className="form-control">
-            <option value="3">3</option>
-            <option value="5">5</option>
-            <option value="10">10</option>
-            <option value="20">20</option>
-          </select>
-        </div>
+      <PageInfo
+        currentPage={currentPage}
+        startIndex={startIndex}
+        lastIndex={lastIndex}
+        total={items.length}
+      />
 
-        <label htmlFor="perPageSelector" className="col-form-label col">
-          items per page
-        </label>
-      </div>
+      <PerPageSelector
+        perPage={perPage}
+        onPerPageChange={handlePerPageChange}
+      />
 
-      {/* Move this markup to Pagination */}
-      <ul className="pagination">
-        <li className="page-item disabled">
-          <a
-            data-cy="prevLink"
-            className="page-link"
-            href="#prev"
-            aria-disabled="true">
-            «
-          </a>
-        </li>
-        <li className="page-item active">
-          <a data-cy="pageLink" className="page-link" href="#1">
-            1
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#2">
-            2
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#3">
-            3
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#4">
-            4
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#5">
-            5
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#6">
-            6
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#7">
-            7
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#8">
-            8
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#9">
-            9
-          </a>
-        </li>
-        <li className="page-item">
-          <a
-            data-cy="nextLink"
-            className="page-link"
-            href="#next"
-            aria-disabled="false">
-            »
-          </a>
-        </li>
-      </ul>
-      <ul>
-        <li data-cy="item">Item 1</li>
-        <li data-cy="item">Item 2</li>
-        <li data-cy="item">Item 3</li>
-        <li data-cy="item">Item 4</li>
-        <li data-cy="item">Item 5</li>
-      </ul>
+      <Pagination
+        total={items.length}
+        perPage={perPage}
+        currentPage={currentPage}
+        onPageChange={handlePageChange}
+      />
+      <ItemList visibleItems={visibleItems} />
     </div>
   );
 };

src/components/ItemList/ItemList.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+interface VisiblevisibleItems {
+  visibleItems: string[];
+}
+export const ItemList: React.FC<VisiblevisibleItems> = ({ visibleItems }) => {
+  return (
+    <ul>
+      {visibleItems.map(item => (
+        <li data-cy="item" key={item}>
+          {item}
+        </li>
+      ))}
+    </ul>
+  );
+};

src/components/PageInfo.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface PageInfoProps {
+  currentPage: number;
+  startIndex: number;
+  lastIndex: number;
+  total: number;
+}
+export const PageInfo: React.FC<PageInfoProps> = ({
+  currentPage,
+  startIndex,
+  lastIndex,
+  total,
+}) => {
+  return (
+    <p className="lead" data-cy="info">
+      Page {currentPage} (items {startIndex + 1} - {lastIndex} of {total})
+    </p>
+  );
+};

src/components/Pagination/Pagination.tsx

@@ -1 +1,76 @@
-export const Pagination = () => {};
+import React from 'react';
+import cn from 'classnames';
+interface PaginationProps {
+  total: number;
+  perPage: number;
+  currentPage?: number;
+  onPageChange: (page: number) => void;
+}
+export const Pagination: React.FC<PaginationProps> = ({
+  total,
+  perPage,
+  currentPage = 1,
+  onPageChange,
+}) => {
+  const totalPages = Math.ceil(total / perPage);
+  const pages = [];
+
+  for (let i = 1; i <= totalPages; i++) {
+    pages.push(i);
+  }
+
+  return (
+    <ul className="pagination">
+      <li className={cn('page-item', { disabled: currentPage === 1 })}>
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#prev"
+          aria-disabled={currentPage === 1}
+          onClick={e => {
+            e.preventDefault();
+            if (currentPage > 1) {
+              onPageChange(currentPage - 1);
+            }
+          }}
+        >
+          «
+        </a>
+      </li>
+      {pages.map(page => (
+        <li
+          className={cn('page-item', { active: page === currentPage })}
+          key={page}
+        >
+          <a
+            data-cy="pageLink"
+            className="page-link"
+            href={`#${page}`}
+            onClick={e => {
+              e.preventDefault();
+              onPageChange(page);
+            }}
+          >
+            {page}
+          </a>
+        </li>
+      ))}
+      <li className={cn('page-item', { disabled: currentPage === totalPages })}>
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={currentPage === totalPages}
+          onClick={e => {
+            e.preventDefault();
+            if (currentPage < totalPages) {
+              onPageChange(currentPage + 1);
+            }
+          }}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};

src/components/PerPageSelector/PerPageSelector.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+interface PerPageSelectorProps {
+  perPage: number;
+  onPerPageChange: (perPage: number) => void;
+}
+export const PerPageSelector: React.FC<PerPageSelectorProps> = ({
+  perPage,
+  onPerPageChange,
+}) => {
+  return (
+    <div className="form-group row">
+      <div className="col-3 col-sm-2 col-xl-1">
+        <select
+          data-cy="perPageSelector"
+          id="perPageSelector"
+          className="form-control"
+          value={perPage}
+          onChange={e => onPerPageChange(+e.target.value)}
+        >
+          <option value="3">3</option>
+          <option value="5">5</option>
+          <option value="10">10</option>
+          <option value="20">20</option>
+        </select>
+      </div>
+
+      <label htmlFor="perPageSelector" className="col-form-label col">
+        items per page
+      </label>
+    </div>
+  );
+};