feat: paginate by first/offset, move activePage to querystring

bcgov · Mar 4, 2021 · 1f145d5 · 1f145d5
1 parent 932ed02
commit 1f145d5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 60 deletions.
diff --git a/app/components/FilterableComponents/FilterableTablePagination.tsx b/app/components/FilterableComponents/FilterableTablePagination.tsx
@@ -1,11 +1,10 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {useRouter} from 'next/router';
 import {Pagination} from 'react-bootstrap';
 
 interface Props {
   totalCount: number;
   maxResultsPerPage: number;
-  firstEdgeCursor: string;
   pageInfo: {
     hasNextPage: boolean;
     hasPreviousPage: boolean;
@@ -15,18 +14,22 @@ export const FilterableTablePaginationComponent: React.FunctionComponent<Props>
   props
 ) => {
   const {hasNextPage, hasPreviousPage} = props.pageInfo;
-  const {totalCount, firstEdgeCursor, maxResultsPerPage} = props;
+  const {totalCount, maxResultsPerPage} = props;
   const router = useRouter();
-  const [activePage, setActivePage] = useState(1);
-
   const maxPages = Math.ceil(totalCount / maxResultsPerPage);
 
+  // Set the activePage by query string value. If no value exists, the activePage is the first page
+  let activePage = 1;
+  if (router?.query?.pageVars)
+    activePage =
+      JSON.parse(router?.query?.pageVars?.toString())?.activePage || 1;
+
   const items = [];
 
   const paginate = (pageNumber: number) => {
     const paginationObject = {
-      after_cursor: pageNumber > 1 ? firstEdgeCursor : null,
-      offset: pageNumber > 1 ? (pageNumber - 1) * maxResultsPerPage - 1 : 0
+      offset: (pageNumber - 1) * maxResultsPerPage,
+      activePage: pageNumber
     };
     const url = {
       pathname: router.pathname,
@@ -35,34 +38,10 @@ export const FilterableTablePaginationComponent: React.FunctionComponent<Props>
         pageVars: JSON.stringify(paginationObject)
       }
     };
-    router.replace(url, url, {shallow: true});
-  };
-
-  const paginateByNumber = (pageNumber) => {
-    setActivePage(pageNumber);
-    paginate(pageNumber);
-  };
-
-  const forwardOnePage = () => {
-    setActivePage(activePage + 1);
-    paginate(activePage + 1);
-  };
-
-  const backOnePage = () => {
-    setActivePage(activePage - 1);
-    paginate(activePage - 1);
-  };
-
-  const firstPage = () => {
-    setActivePage(1);
-    paginate(1);
-  };
-
-  const lastPage = () => {
-    setActivePage(maxPages);
-    paginate(maxPages);
+    router.push(url, url, {shallow: true});
   };
 
+  // Determines what page numbers to render based on the location of the activePage
   let startPage;
   let endPage;
   if (maxPages <= 9) {
@@ -79,12 +58,13 @@ export const FilterableTablePaginationComponent: React.FunctionComponent<Props>
     endPage = activePage + 4;
   }
 
+  // Populate the Pagination items with page numbers & functionality
   for (let pageNumber = startPage; pageNumber <= endPage; pageNumber++) {
     items.push(
       <Pagination.Item
         key={pageNumber}
         active={pageNumber === activePage}
-        onClick={() => paginateByNumber(pageNumber)}
+        onClick={() => paginate(pageNumber)}
       >
         {pageNumber}
       </Pagination.Item>
@@ -94,17 +74,17 @@ export const FilterableTablePaginationComponent: React.FunctionComponent<Props>
   return (
     <>
       <Pagination>
-        <Pagination.First onClick={() => firstPage()} />
+        <Pagination.First onClick={() => paginate(1)} />
         <Pagination.Prev
-          onClick={() => (hasPreviousPage ? backOnePage() : null)}
+          onClick={() => (hasPreviousPage ? paginate(activePage - 1) : null)}
         />
         {startPage !== 1 && <Pagination.Ellipsis />}
         {items}
         {endPage !== maxPages && <Pagination.Ellipsis />}
         <Pagination.Next
-          onClick={() => (hasNextPage ? forwardOnePage() : null)}
+          onClick={() => (hasNextPage ? paginate(activePage + 1) : null)}
         />
-        <Pagination.Last onClick={() => lastPage()} />
+        <Pagination.Last onClick={() => paginate(maxPages)} />
       </Pagination>
     </>
   );

diff --git a/app/containers/Applications/ApplicationListContainer.tsx b/app/containers/Applications/ApplicationListContainer.tsx
@@ -19,7 +19,6 @@ interface Props {
 
 export const ApplicationList: React.FunctionComponent<Props> = (props) => {
   const {edges, pageInfo, totalCount} = props?.query?.allApplications;
-  const firstEdgeCursor = props?.query?.firstEdge.pageInfo.startCursor;
   const {maxResultsPerPage} = props;
 
   const searchOptions: ISearchOption[] = [
@@ -54,7 +53,6 @@ export const ApplicationList: React.FunctionComponent<Props> = (props) => {
       <FilterableTablePagination
         totalCount={totalCount}
         pageInfo={pageInfo}
-        firstEdgeCursor={firstEdgeCursor}
         maxResultsPerPage={maxResultsPerPage}
       />
     </>
@@ -72,14 +70,12 @@ export default createFragmentContainer(ApplicationList, {
       submission_date: {type: "Datetime"}
       status: {type: "CiipApplicationRevisionStatus"}
       order_by: {type: "[ApplicationsOrderBy!]"}
-      after_cursor: {type: "Cursor"}
       max_results: {type: "Int"}
       offset: {type: "Int"}
     ) {
       allApplications(
         first: $max_results
         offset: $offset
-        after: $after_cursor
         filter: {
           rowId: {equalTo: $id}
           operatorName: {includesInsensitive: $operator_name}
@@ -102,22 +98,6 @@ export default createFragmentContainer(ApplicationList, {
         }
         totalCount
       }
-      firstEdge: allApplications(
-        first: 1
-        filter: {
-          rowId: {equalTo: $id}
-          operatorName: {includesInsensitive: $operator_name}
-          facilityName: {includesInsensitive: $facility_name}
-          reportingYear: {equalTo: $reporting_year}
-          submissionDate: {equalTo: $submission_date}
-          status: {notEqualTo: DRAFT, equalTo: $status}
-        }
-        orderBy: $order_by
-      ) {
-        pageInfo {
-          startCursor
-        }
-      }
     }
   `
 });
diff --git a/app/pages/analyst/applications.tsx b/app/pages/analyst/applications.tsx
@@ -23,7 +23,6 @@ class Applications extends Component<Props> {
       $submission_date: Datetime
       $status: CiipApplicationRevisionStatus
       $order_by: [ApplicationsOrderBy!]
-      $after_cursor: Cursor
       $max_results: Int
       $offset: Int
     ) {
@@ -40,7 +39,6 @@ class Applications extends Component<Props> {
             submission_date: $submission_date
             status: $status
             order_by: $order_by
-            after_cursor: $after_cursor
             max_results: $max_results
             offset: $offset
           )