enables pagination to use react router string query

src/client/components/modules/Pagination/Page/index.js

@@ -4,7 +4,7 @@ import './index.scss';
 
 const baseClass = 'paginator__page';
 
-const Page = ({ page, isCurrent, setPage }) => {
+const Page = ({ page, isCurrent, updatePage }) => {
   const classes = [
     baseClass,
     isCurrent && `${baseClass}--is-current`,
@@ -13,7 +13,7 @@ const Page = ({ page, isCurrent, setPage }) => {
   return (
     <button
       className={classes}
-      onClick={() => setPage(page)}
+      onClick={() => updatePage(page)}
       type="button"
     >
       {page}

src/client/components/modules/Pagination/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useHistory, useLocation } from 'react-router-dom';
+import queryString from 'qs';
 
 import Page from './Page';
 import Ellipsis from './Ellipsis';
@@ -18,6 +20,9 @@ const nodeTypes = {
 const baseClass = 'pagination';
 
 const Pagination = (props) => {
+  const history = useHistory();
+  const location = useLocation();
+
   const {
     totalPages,
     page: currentPage,
@@ -26,9 +31,14 @@ const Pagination = (props) => {
     prevPage,
     nextPage,
     numberOfNeighbors,
-    setPage,
   } = props;
 
+  const updatePage = (page) => {
+    const params = queryString.parse(location.search, { ignoreQueryPrefix: true });
+    params.page = page;
+    history.push({ search: queryString.stringify(params, { addQueryPrefix: true }) });
+  };
+
   if (totalPages <= 1) return null;
 
   // Create array of integers for each page
@@ -52,7 +62,7 @@ const Pagination = (props) => {
       type: 'Page',
       props: {
         page: 1,
-        setPage,
+        updatePage,
       },
     });
   }
@@ -64,7 +74,7 @@ const Pagination = (props) => {
       type: 'Page',
       props: {
         page: totalPages,
-        setPage,
+        updatePage,
       },
     });
   }
@@ -74,7 +84,7 @@ const Pagination = (props) => {
     nodes.unshift({
       type: 'PrevArrow',
       props: {
-        setPage: () => setPage(prevPage),
+        updatePage: () => updatePage(prevPage),
       },
     });
   }
@@ -83,7 +93,7 @@ const Pagination = (props) => {
     nodes.push({
       type: 'NextArrow',
       props: {
-        setPage: () => setPage(nextPage),
+        updatePage: () => updatePage(nextPage),
       },
     });
   }
@@ -96,7 +106,7 @@ const Pagination = (props) => {
             <Page
               key={i}
               page={node}
-              setPage={setPage}
+              updatePage={updatePage}
               isCurrent={currentPage === node}
             />
           );
@@ -139,5 +149,4 @@ Pagination.propTypes = {
   prevPage: PropTypes.number,
   nextPage: PropTypes.number,
   numberOfNeighbors: PropTypes.number,
-  setPage: PropTypes.func.isRequired,
 };

src/client/components/views/collections/List/index.js

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import queryString from 'qs';
 import PropTypes from 'prop-types';
 import usePayloadAPI from '../../../../hooks/usePayloadAPI';
 import getSanitizedConfig from '../../../../config/getSanitizedConfig';
@@ -18,11 +20,12 @@ const {
 
 const ListView = (props) => {
   const { collection } = props;
-  const [page, setPage] = useState(null);
+  const location = useLocation();
+  const { page } = queryString.parse(location.search, { ignoreQueryPrefix: true });
 
   const apiURL = [
     `${serverURL}/${collection.slug}?`,
-    page !== null && `page=${page}&`,
+    page && `page=${page}&`,
     'page=4&',
     'limit=4',
   ].filter(Boolean).join('');
@@ -49,7 +52,6 @@ const ListView = (props) => {
         collection={collection}
       />
       <Pagination
-        setPage={setPage}
         totalDocs={data.totalDocs}
         limit={data.limit}
         totalPages={data.totalPages}