feat: create common component for pagination

bcgov · May 26, 2020 · 8b551e7 · 8b551e7
1 parent 4e078b5
commit 8b551e7
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 60 deletions.
diff --git a/app/components/PaginationBar.tsx b/app/components/PaginationBar.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import {Pagination} from 'react-bootstrap';
+
+interface Props {
+  setOffset: (...args: any[]) => void;
+  setActivePage: (...args: any[]) => void;
+  offsetValue: number;
+  maxPages: number;
+  activePage: number;
+}
+export const PaginationBarComponent: React.FunctionComponent<Props> = (
+  props
+) => {
+  const {setOffset, setActivePage, offsetValue, maxPages, activePage} = props;
+
+  const previousTenPagination = () => {
+    if (offsetValue > 0) {
+      setOffset(offsetValue - 20);
+      setActivePage(activePage - 1);
+    }
+  };
+
+  const nextTenPagination = () => {
+    if (activePage !== maxPages) {
+      setOffset(offsetValue + 20);
+      setActivePage(activePage + 1);
+    }
+  };
+
+  const items = [];
+  const handlePaginationByPageNumber = (pageNumber: number) => {
+    setOffset((pageNumber - 1) * 20);
+    setActivePage(pageNumber);
+  };
+
+  let startPage;
+  let endPage;
+  if (maxPages <= 9) {
+    startPage = 1;
+    endPage = maxPages;
+  } else if (maxPages - activePage <= 4) {
+    startPage = maxPages - 8;
+    endPage = maxPages;
+  } else if (activePage <= 5) {
+    startPage = 1;
+    endPage = 9;
+  } else {
+    startPage = activePage - 4;
+    endPage = activePage + 4;
+  }
+
+  for (let pageNumber = startPage; pageNumber <= endPage; pageNumber++) {
+    items.push(
+      <Pagination.Item
+        key={pageNumber}
+        active={pageNumber === activePage}
+        onClick={() => handlePaginationByPageNumber(pageNumber)}
+      >
+        {pageNumber}
+      </Pagination.Item>
+    );
+  }
+
+  return (
+    <Pagination>
+      <Pagination.First onClick={() => handlePaginationByPageNumber(1)} />
+      <Pagination.Prev onClick={previousTenPagination} />
+      {startPage !== 1 && <Pagination.Ellipsis />}
+      <Pagination>{items}</Pagination>
+      {endPage !== maxPages && <Pagination.Ellipsis />}
+      <Pagination.Next onClick={nextTenPagination} />
+      <Pagination.Last onClick={() => handlePaginationByPageNumber(maxPages)} />
+    </Pagination>
+  );
+};
+
+export default PaginationBarComponent;
diff --git a/app/containers/Certifier/CertificationRequestsContainer.tsx b/app/containers/Certifier/CertificationRequestsContainer.tsx
@@ -1,9 +1,10 @@
 import React, {useEffect, useState} from 'react';
-import {Button, Alert, Pagination} from 'react-bootstrap';
+import {Button, Alert} from 'react-bootstrap';
 import moment from 'moment-timezone';
 import Link from 'next/link';
 import {graphql, createRefetchContainer, RelayRefetchProp} from 'react-relay';
 import SearchTableLayout from 'components/SearchTableLayout';
+import PaginationBar from 'components/PaginationBar';
 import {CertificationRequestsContainer_query} from '__generated__/CertificationRequestsContainer_query.graphql';
 
 const TIME_ZONE = 'America/Vancouver';
@@ -91,57 +92,9 @@ export const CertificationRequestsComponent: React.FunctionComponent<Props> = ({
     </tbody>
   );
 
-  const previousTenPagination = () => {
-    if (offsetValue > 0) {
-      setOffset(offsetValue - 20);
-      setActivePage(activePage - 1);
-    }
-  };
-
-  const nextTenPagination = () => {
-    if (activePage !== maxPages) {
-      setOffset(offsetValue + 20);
-      setActivePage(activePage + 1);
-    }
-  };
-
-  // Pagination
-  const items = [];
   const maxPages = Math.ceil(
     query?.searchCertificationRequests?.edges[0]?.node?.totalRequestCount / 20
   );
-  const handlePaginationByPageNumber = (pageNumber: number) => {
-    setOffset((pageNumber - 1) * 20);
-    setActivePage(pageNumber);
-  };
-
-  let startPage;
-  let endPage;
-  if (maxPages <= 9) {
-    startPage = 1;
-    endPage = maxPages;
-  } else if (maxPages - activePage <= 4) {
-    startPage = maxPages - 8;
-    endPage = maxPages;
-  } else if (activePage <= 5) {
-    startPage = 1;
-    endPage = 9;
-  } else {
-    startPage = activePage - 4;
-    endPage = activePage + 4;
-  }
-
-  for (let pageNumber = startPage; pageNumber <= endPage; pageNumber++) {
-    items.push(
-      <Pagination.Item
-        key={pageNumber}
-        active={pageNumber === activePage}
-        onClick={() => handlePaginationByPageNumber(pageNumber)}
-      >
-        {pageNumber}
-      </Pagination.Item>
-    );
-  }
 
   return query.searchCertificationRequests.edges.length === 0 ? (
     <Alert variant="info">You have no current certification requests.</Alert>
@@ -153,17 +106,13 @@ export const CertificationRequestsComponent: React.FunctionComponent<Props> = ({
         handleEvent={handleEvent}
       />
       {maxPages > 1 && (
-        <Pagination>
-          <Pagination.First onClick={() => handlePaginationByPageNumber(1)} />
-          <Pagination.Prev onClick={previousTenPagination} />
-          {startPage !== 1 && <Pagination.Ellipsis />}
-          <Pagination>{items}</Pagination>
-          {endPage !== maxPages && <Pagination.Ellipsis />}
-          <Pagination.Next onClick={nextTenPagination} />
-          <Pagination.Last
-            onClick={() => handlePaginationByPageNumber(maxPages)}
-          />
-        </Pagination>
+        <PaginationBar
+          setOffset={setOffset}
+          setActivePage={setActivePage}
+          offsetValue={offsetValue}
+          maxPages={maxPages}
+          activePage={activePage}
+        />
       )}
     </>
   );