From 8d060288406b9ccdd488ff477579a02f9fdc3c45 Mon Sep 17 00:00:00 2001
From: IvanHoncharenko <ivan.honcharenko@onix-systems.com>
Date: Wed, 17 May 2023 10:11:30 +0300
Subject: [PATCH] Pagination implemented

---
 src/components/Button/interfaces/IButton.ts   |  6 +-
 src/components/Icons/ArrowLeftIcon.tsx        | 16 ++++++
 src/components/Icons/ArrowRightIcon.tsx       | 18 ++++++
 src/components/Icons/Vector.svg               |  3 -
 src/components/Icons/index.tsx                |  4 ++
 src/components/Pagination/Pagination.tsx      | 57 +++++++++++++++++++
 .../Pagination/components/PaginationList.tsx  | 45 +++++++++++++++
 .../Pagination/interfaces/IPagination.ts      |  7 +++
 .../Pagination/interfaces/IPaginationPage.ts  |  7 +++
 .../Pagination/sass/Pagination.module.scss    | 14 +++++
 .../sass/PaginationList.module.scss           |  7 +++
 src/constants/values.ts                       |  5 ++
 src/stories/Pagination.stories.tsx            | 19 +++++++
 src/utils/pagination.ts                       | 26 +++++++++
 14 files changed, 228 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Icons/ArrowLeftIcon.tsx
 create mode 100644 src/components/Icons/ArrowRightIcon.tsx
 delete mode 100644 src/components/Icons/Vector.svg
 create mode 100644 src/components/Pagination/Pagination.tsx
 create mode 100644 src/components/Pagination/components/PaginationList.tsx
 create mode 100644 src/components/Pagination/interfaces/IPagination.ts
 create mode 100644 src/components/Pagination/interfaces/IPaginationPage.ts
 create mode 100644 src/components/Pagination/sass/Pagination.module.scss
 create mode 100644 src/components/Pagination/sass/PaginationList.module.scss
 create mode 100644 src/constants/values.ts
 create mode 100644 src/stories/Pagination.stories.tsx
 create mode 100644 src/utils/pagination.ts

diff --git a/src/components/Button/interfaces/IButton.ts b/src/components/Button/interfaces/IButton.ts
index 142e2b8..4946cc9 100644
--- a/src/components/Button/interfaces/IButton.ts
+++ b/src/components/Button/interfaces/IButton.ts
@@ -4,9 +4,9 @@ import { Colors, Variants, ButtonSizes } from '../../../constants/general';
 export interface IButtonProps extends ComponentPropsWithRef<'button'> {
   text?: string,
   isLoading?: boolean,
-  variant: Variants,
-  color: Colors,
-  size: ButtonSizes,
+  variant?: Variants,
+  color?: Colors,
+  size?: ButtonSizes,
   iconLeft?: string,
   iconRight?: string,
 }
diff --git a/src/components/Icons/ArrowLeftIcon.tsx b/src/components/Icons/ArrowLeftIcon.tsx
new file mode 100644
index 0000000..82eb59c
--- /dev/null
+++ b/src/components/Icons/ArrowLeftIcon.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const ArrowLeftIcon = () => (
+  <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d={'M6.71047 0.710469C6.32047 0.320469 5.69047 0.320469 5.30047 0.710469L0.710469 5.30047C0.320469 5.69047'
+        + ' 0.320469 6.32047 0.710469 6.71047L5.30047 11.3005C5.69047 11.6905 6.32047 11.6905 6.71047 11.3005C7.10047'
+        + ' 10.9105 7.10047 10.2805 6.71047 9.89047L2.83047 6.00047L6.71047 2.12047C7.10047 1.73047 7.09047 1.09047 '
+        + '6.71047 0.710469Z'}
+      fill="#8891A3"
+    />
+  </svg>
+
+);
+
+export default ArrowLeftIcon;
diff --git a/src/components/Icons/ArrowRightIcon.tsx b/src/components/Icons/ArrowRightIcon.tsx
new file mode 100644
index 0000000..3340609
--- /dev/null
+++ b/src/components/Icons/ArrowRightIcon.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const ArrowLeftIcon = () => (
+  <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d={'M1.28953 11.2895C1.67953 11.6795 2.30953 11.6795 2.69953 11.2895L7.28953 6.69953C7.67953 6.30953'
+        + ' 7.67953 5.67953 7.28953 5.28953L2.69953 0.699532C2.30953 0.309531 1.67953 0.309531 1.28953'
+        + ' 0.699532C0.899531 1.08953 0.899531 1.71953 1.28953 2.10953L5.16953 5.99953L1.28953 9.87953C0.899531'
+        + ' 10.2695 0.909531 10.9095 1.28953 11.2895Z'}
+        fill="#8891A3"
+      />
+    </svg>
+  </svg>
+
+);
+
+export default ArrowLeftIcon;
diff --git a/src/components/Icons/Vector.svg b/src/components/Icons/Vector.svg
deleted file mode 100644
index 9890292..0000000
--- a/src/components/Icons/Vector.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H8L10 2H18C19.1 2 20 2.9 20 4V14C20 15.1 19.1 16 18 16H2C0.9 16 0 15.1 0 14L0.01 2C0.01 0.9 0.9 0 2 0ZM9.17 4L7.17 2H2V14H18V4H9.17Z" fill="#8891A3"/>
-</svg>
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index ed8dae1..da5119e 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -40,6 +40,8 @@ import BriefcaseIcon from './BriefcaseIcon';
 import PencilIcon from './PencilIcon';
 import CpuIcon from './CpuIcon';
 import TrashCanIcon from './TrashCanIcon';
+import ArrowRightIcon from './ArrowRightIcon';
+import ArrowLeftIcon from './ArrowLeftIcon';
 
 export {
   CloseIcon,
@@ -84,4 +86,6 @@ export {
   PencilIcon,
   CpuIcon,
   TrashCanIcon,
+  ArrowRightIcon,
+  ArrowLeftIcon,
 };
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
new file mode 100644
index 0000000..20a3c18
--- /dev/null
+++ b/src/components/Pagination/Pagination.tsx
@@ -0,0 +1,57 @@
+import React, { FC, useEffect } from 'react';
+import IconButton from '../IconButton/IconButton';
+import PaginationList from './components/PaginationList';
+import { ArrowRightIcon, ArrowLeftIcon } from '../Icons';
+import { IPagination } from './interfaces/IPagination';
+import styles from './sass/Pagination.module.scss';
+
+const Pagination: FC<IPagination> = ({
+  currentPage, lastPage, total, setPage, perPage,
+}) => {
+  const prevPage = currentPage - 1;
+  const prevPageActive = prevPage < 1;
+  const nextPage = currentPage + 1;
+  const nextPageActive = nextPage > lastPage;
+
+  const handleSetPage = (page: number) => {
+    setPage(page);
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    if (currentPage > lastPage) {
+      setPage(lastPage);
+    }
+  }, [setPage, currentPage, lastPage]);
+
+  return (
+    perPage < total ? (
+      <div className={styles.container}>
+        <IconButton
+          disabled={prevPageActive}
+          onClick={() => handleSetPage(prevPage)}
+          icon={<ArrowLeftIcon />}
+        />
+        <PaginationList
+          currentPage={currentPage}
+          lastPage={lastPage}
+          perPage={perPage}
+          total={total}
+          setPage={(page) => handleSetPage(page)}
+        />
+        <IconButton
+          disabled={nextPageActive}
+          onClick={() => handleSetPage(nextPage)}
+          icon={<ArrowRightIcon />}
+        />
+      </div>
+    ) : (
+      <div />
+    )
+  );
+};
+
+export default Pagination;
diff --git a/src/components/Pagination/components/PaginationList.tsx b/src/components/Pagination/components/PaginationList.tsx
new file mode 100644
index 0000000..a4907a2
--- /dev/null
+++ b/src/components/Pagination/components/PaginationList.tsx
@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import { IPaginationPage } from '../interfaces/IPaginationPage';
+import Button from '../../Button/Button';
+import {
+  ONE_PAGE, PAGE_DELIMITER, THREE_PAGES_DELIMITER, ENTRY_DELIMITER,
+} from '../../../constants/values';
+import {
+  calcPage, add, lesser, reduce, bigger,
+} from '../../../utils/pagination';
+import styles from '../sass/PaginationList.module.scss';
+
+const PaginationList: FC<IPaginationPage> = ({
+  currentPage, lastPage, perPage, total, setPage,
+}) => {
+  let firstPaginationPage = calcPage(currentPage, perPage, ONE_PAGE, perPage, reduce, bigger);
+  let lastPaginationPage = calcPage(currentPage, perPage, ENTRY_DELIMITER, total, add, lesser);
+  if (currentPage === PAGE_DELIMITER) {
+    firstPaginationPage = calcPage(currentPage, perPage, PAGE_DELIMITER, perPage, reduce, bigger);
+    lastPaginationPage = calcPage(currentPage, perPage, THREE_PAGES_DELIMITER, total, add, lesser);
+  } else if (currentPage > PAGE_DELIMITER && currentPage <= lastPage - PAGE_DELIMITER) {
+    firstPaginationPage = calcPage(currentPage, perPage, PAGE_DELIMITER, perPage, reduce, bigger);
+    lastPaginationPage = calcPage(currentPage, perPage, PAGE_DELIMITER, total, add, lesser);
+  } else if (currentPage > lastPage - PAGE_DELIMITER) {
+    firstPaginationPage = calcPage(lastPage, perPage, ENTRY_DELIMITER, perPage, reduce, bigger);
+    lastPaginationPage = lastPage;
+  }
+
+  const links = new Array(lastPaginationPage - firstPaginationPage + 1).fill(null);
+
+  return (
+    <>
+      {links.map((item, index) => (
+        <Button
+          className={styles.button}
+          key={[firstPaginationPage, index].join('_')}
+          text={`${firstPaginationPage + index}`}
+          disabled={firstPaginationPage + index === currentPage}
+          onClick={() => setPage(firstPaginationPage + index)}
+        />
+      ))}
+    </>
+  );
+};
+
+export default PaginationList;
diff --git a/src/components/Pagination/interfaces/IPagination.ts b/src/components/Pagination/interfaces/IPagination.ts
new file mode 100644
index 0000000..90ed153
--- /dev/null
+++ b/src/components/Pagination/interfaces/IPagination.ts
@@ -0,0 +1,7 @@
+export interface IPagination {
+  currentPage: number
+  lastPage: number
+  total: number
+  setPage: (pageNumber: number) => void
+  perPage: number
+}
diff --git a/src/components/Pagination/interfaces/IPaginationPage.ts b/src/components/Pagination/interfaces/IPaginationPage.ts
new file mode 100644
index 0000000..414cffa
--- /dev/null
+++ b/src/components/Pagination/interfaces/IPaginationPage.ts
@@ -0,0 +1,7 @@
+export interface IPaginationPage {
+  currentPage: number
+  lastPage: number
+  perPage: number
+  total: number
+  setPage: (pageNumber: number) => void
+}
diff --git a/src/components/Pagination/sass/Pagination.module.scss b/src/components/Pagination/sass/Pagination.module.scss
new file mode 100644
index 0000000..7e43385
--- /dev/null
+++ b/src/components/Pagination/sass/Pagination.module.scss
@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px 0;
+
+  button:first-child {
+    margin-right: 4px;
+  }
+
+  button:last-child {
+    margin-left: 4px;
+  }
+}
diff --git a/src/components/Pagination/sass/PaginationList.module.scss b/src/components/Pagination/sass/PaginationList.module.scss
new file mode 100644
index 0000000..5605bbe
--- /dev/null
+++ b/src/components/Pagination/sass/PaginationList.module.scss
@@ -0,0 +1,7 @@
+.button {
+  padding: 0;
+  width: 24px;
+  min-width: initial;
+  height: 24px;
+  margin: 0 4px;
+}
diff --git a/src/constants/values.ts b/src/constants/values.ts
new file mode 100644
index 0000000..d1c2e54
--- /dev/null
+++ b/src/constants/values.ts
@@ -0,0 +1,5 @@
+export const ONE_PAGE = 1;
+export const PAGE_DELIMITER = 2;
+export const THREE_PAGES_DELIMITER = 3;
+
+export const ENTRY_DELIMITER = 4;
diff --git a/src/stories/Pagination.stories.tsx b/src/stories/Pagination.stories.tsx
new file mode 100644
index 0000000..5c4a184
--- /dev/null
+++ b/src/stories/Pagination.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Pagination from '../components/Pagination/Pagination';
+
+export default {
+  title: 'Example/Pagination',
+  component: Pagination,
+} as ComponentMeta<typeof Pagination>;
+
+const Template: ComponentStory<typeof Pagination> = ({ ...args }) => <Pagination {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  currentPage: 3,
+  perPage: 2,
+  lastPage: 8,
+  total: 8,
+  setPage: () => {},
+};
diff --git a/src/utils/pagination.ts b/src/utils/pagination.ts
new file mode 100644
index 0000000..cc87785
--- /dev/null
+++ b/src/utils/pagination.ts
@@ -0,0 +1,26 @@
+import { ONE_PAGE } from '../constants/values';
+
+export const reduce = (argFirst: number, argSecond: number) => argFirst - argSecond;
+
+export const add = (argFirst: number, argSecond: number) => argFirst + argSecond;
+
+export const bigger = (argFirst: number, argSecond: number) => argFirst > argSecond;
+
+export const lesser = (argFirst: number, argSecond: number) => argFirst < argSecond;
+
+export const calcPage = (
+  page: number,
+  perPage: number,
+  delimiter: number,
+  max: number,
+  calcFunc: (argFirst: number, argSecond: number) => number,
+  boolFunc: (argFirst: number, argSecond: number) => boolean,
+) => {
+  let firstPage = page;
+
+  while (boolFunc(firstPage * perPage, max) && boolFunc(firstPage, calcFunc(page, delimiter))) {
+    firstPage = calcFunc(firstPage, ONE_PAGE);
+  }
+
+  return firstPage;
+};