Implement pagination components

src/App.tsx

@@ -1,110 +1,53 @@
-import React from 'react';
-import './App.css';
+import { useState } from 'react';
+import { Pagination } from './components/Pagination';
+import { ItemList } from './components/ItemList';
+import { PerPageSelector } from './components/PerPageSelector';
+import { PER_PAGE_OPTIONS } from './constants/pagination';
 import { getNumbers } from './utils';
+import './App.css';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
-export const App: React.FC = () => {
+export const App = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [perPage, setPerPage] = useState(5);
+
+  const itemsCount = items.length;
+
+  const indexOfFirstItem = (currentPage - 1) * perPage;
+  const indexOfLastItem = Math.min(currentPage * perPage, itemsCount);
+
+  const startItem = itemsCount === 0 ? 0 : indexOfFirstItem + 1;
+
+  const visibleItems = items.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePageSelect = (value: number) => {
+    setPerPage(value);
+    setCurrentPage(1);
+  };
+
   return (
     <div className="container">
       <h1>Items with Pagination</h1>
 
       <p className="lead" data-cy="info">
-        Page 1 (items 1 - 5 of 42)
+        {`Page ${currentPage} (items ${startItem} - ${indexOfLastItem} of ${itemsCount})`}
       </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>
+      <PerPageSelector
+        value={perPage}
+        options={PER_PAGE_OPTIONS}
+        onChange={handlePageSelect}
+      />
 
-        <label htmlFor="perPageSelector" className="col-form-label col">
-          items per page
-        </label>
-      </div>
+      <Pagination
+        total={itemsCount}
+        perPage={perPage}
+        currentPage={currentPage}
+        onPageChange={setCurrentPage}
+      />
 
-      {/* 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>
+      <ItemList items={visibleItems} />
     </div>
   );
 };

src/components/Item/Item.tsx

@@ -0,0 +1,9 @@
+interface Props {
+  item: string;
+}
+
+export const Item = ({ item }: Props) => (
+  <li key={item} data-cy="item">
+    {item}
+  </li>
+);

src/components/Item/index.ts

@@ -0,0 +1 @@
+export * from './Item';

src/components/ItemList/ItemList.tsx

@@ -0,0 +1,13 @@
+import { Item } from '../Item';
+
+interface Props {
+  items: string[];
+}
+
+export const ItemList = ({ items }: Props) => (
+  <ul>
+    {items.map(item => (
+      <Item key={item} item={item} />
+    ))}
+  </ul>
+);

src/components/ItemList/index.ts

@@ -0,0 +1 @@
+export * from './ItemList';

src/components/Pagination/Pagination.tsx

@@ -1 +1,88 @@
-export const Pagination = () => {};
+import classNames from 'classnames';
+
+interface Props {
+  total: number;
+  perPage: number;
+  currentPage: number;
+  onPageChange: (value: number) => void;
+}
+
+export const Pagination = ({
+  total,
+  perPage,
+  currentPage,
+  onPageChange,
+}: Props) => {
+  const lastPage = Math.ceil(total / perPage);
+
+  const pageNumbers: number[] = [];
+
+  for (let i = 1; i <= lastPage; i++) {
+    pageNumbers.push(i);
+  }
+
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === lastPage;
+
+  const handlePageChange =
+    (page: number) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      if (page >= 1 && page <= lastPage) {
+        onPageChange(page);
+      }
+    };
+
+  return (
+    <ul className="pagination">
+      <li
+        className={classNames('page-item', {
+          disabled: isFirstPage,
+        })}
+      >
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#prev"
+          aria-disabled={isFirstPage}
+          onClick={handlePageChange(currentPage - 1)}
+        >
+          «
+        </a>
+      </li>
+
+      {pageNumbers.map(pageNumber => (
+        <li
+          key={pageNumber}
+          className={classNames('page-item', {
+            active: currentPage === pageNumber,
+          })}
+        >
+          <a
+            data-cy="pageLink"
+            className="page-link"
+            href={`#${pageNumber}`}
+            onClick={handlePageChange(pageNumber)}
+          >
+            {pageNumber}
+          </a>
+        </li>
+      ))}
+
+      <li
+        className={classNames('page-item', {
+          disabled: isLastPage,
+        })}
+      >
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={isLastPage}
+          onClick={handlePageChange(currentPage + 1)}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};

src/components/PerPageSelector/PerPageSelector.tsx

@@ -0,0 +1,31 @@
+interface Props {
+  value: number;
+  options: number[];
+  onChange: (value: number) => void;
+}
+
+export const PerPageSelector = ({ value, options, onChange }: Props) => {
+  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={value}
+          onChange={event => onChange(Number(event.target.value))}
+        >
+          {options.map(option => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <label htmlFor="perPageSelector" className="col-form-label col">
+        items per page
+      </label>
+    </div>
+  );
+};

src/components/PerPageSelector/index.ts

@@ -0,0 +1 @@
+export * from './PerPageSelector';

src/constants/pagination.ts

@@ -0,0 +1 @@
+export const PER_PAGE_OPTIONS = [3, 5, 10, 20];