[F] Use query params in admin

client/src/backend/components/list/EntitiesList/List/Pagination.js

@@ -9,6 +9,7 @@ export default class ListEntitiesListPagination extends PureComponent {
     pagination: PropTypes.object.isRequired,
     onPageClick: PropTypes.func.isRequired,
     paginationTarget: PropTypes.string,
+    usesQueryParams: PropTypes.bool,
     style: PropTypes.oneOf(["normal", "compact"]),
     padding: PropTypes.number
   };
@@ -37,6 +38,8 @@ export default class ListEntitiesListPagination extends PureComponent {
   }
 
   get paginationTarget() {
+    if (this.props.usesQueryParams) return undefined;
+
     return this.props.paginationTarget ?? "#";
   }
 

client/src/backend/components/list/EntitiesList/List/index.js

@@ -307,6 +307,7 @@ export default class ListEntities extends PureComponent {
                   padding={this.paginationPadding}
                   onPageClick={this.callback("onPageClick")}
                   style={this.paginationStyle}
+                  usesQueryParams={this.props.usesQueryParams}
                 />
               )}
             </div>

client/src/backend/containers/entitlements-pending/List.js

@@ -12,7 +12,8 @@ import {
   useFetch,
   usePaginationState,
   useFilterState,
-  useApiCallback
+  useApiCallback,
+  useSetLocation
 } from "hooks";
 import { childRoutes } from "helpers/router";
 import withFilteredLists, { entitlementFilters } from "hoc/withFilteredLists";
@@ -38,6 +39,11 @@ function PendingEntitlementsList({
     dependencies: [filters]
   });
 
+  useSetLocation({
+    filters,
+    page: pagination.number
+  });
+
   const renderChildRoutes = () => {
     const closeUrl = lh.link("backendRecordsEntitlements");
 
@@ -138,8 +144,12 @@ function PendingEntitlementsList({
               count: meta.pagination.totalCount
             })}
             callbacks={{
-              onPageClick: page => () => setPageNumber(page)
+              onPageClick: page => e => {
+                e.preventDefault();
+                setPageNumber(page);
+              }
             }}
+            usesQueryParams
           />
         </>
       )}

client/src/backend/containers/entitlements-pending/imports/List.js

@@ -5,7 +5,7 @@ import { entitlementImportsAPI } from "api";
 import EntitiesList, {
   EntitlementImportRow
 } from "backend/components/list/EntitiesList";
-import { useFetch, usePaginationState } from "hooks";
+import { useFetch, usePaginationState, useSetLocation } from "hooks";
 import PageHeader from "backend/components/layout/PageHeader";
 
 export default function EntitlementImportsList() {
@@ -17,6 +17,10 @@ export default function EntitlementImportsList() {
     request: [entitlementImportsAPI.index, null, pagination]
   });
 
+  useSetLocation({
+    page: pagination.number
+  });
+
   const actions = [
     {
       label: "entitlements.imports.view_pending_label",
@@ -41,8 +45,12 @@ export default function EntitlementImportsList() {
           count: meta.pagination?.totalCount
         })}
         callbacks={{
-          onPageClick: page => () => setPageNumber(page)
+          onPageClick: page => e => {
+            e.preventDefault();
+            setPageNumber(page);
+          }
         }}
+        usesQueryParams
       />
     </>
   ) : null;

client/src/backend/containers/journal/Issues.js

@@ -6,7 +6,7 @@ import lh from "helpers/linkHandler";
 import { childRoutes } from "helpers/router";
 import { journalsAPI } from "api";
 import { withRouter } from "react-router-dom";
-import { useFetch, usePaginationState } from "hooks";
+import { useFetch, usePaginationState, useSetLocation } from "hooks";
 import EntitiesList, {
   Button,
   JournalIssueRow
@@ -23,6 +23,11 @@ function JournalIssuesContainer({ refresh, journal, route }) {
     request: [journalsAPI.journalIssues, journal.id, pagination, filters]
   });
 
+  useSetLocation({
+    filters,
+    page: pagination.number
+  });
+
   const { t } = useTranslation();
 
   if (!data) return null;
@@ -48,7 +53,10 @@ function JournalIssuesContainer({ refresh, journal, route }) {
         pagination={meta.pagination}
         showCount
         callbacks={{
-          onPageClick: page => () => setPageNumber(page)
+          onPageClick: page => e => {
+            e.preventDefault();
+            setPageNumber(page);
+          }
         }}
         buttons={[
           <Button
@@ -59,6 +67,7 @@ function JournalIssuesContainer({ refresh, journal, route }) {
             authorizedTo="update"
           />
         ]}
+        usesQueryParams
       />
       {childRoutes(route, {
         drawer: true,

client/src/backend/containers/journal/Volumes.js

@@ -6,7 +6,7 @@ import lh from "helpers/linkHandler";
 import { childRoutes } from "helpers/router";
 import { journalVolumesAPI } from "api";
 import { withRouter } from "react-router-dom";
-import { useFetch, usePaginationState } from "hooks";
+import { useFetch, usePaginationState, useSetLocation } from "hooks";
 import EntitiesList, {
   Button,
   JournalVolumeRow
@@ -23,6 +23,10 @@ function JournalVolumesContainer({ refresh, journal, route }) {
 
   const { t } = useTranslation();
 
+  useSetLocation({
+    page: pagination.number
+  });
+
   if (!data) return null;
 
   return (
@@ -45,7 +49,10 @@ function JournalVolumesContainer({ refresh, journal, route }) {
         pagination={meta.pagination}
         showCount
         callbacks={{
-          onPageClick: page => () => setPageNumber(page)
+          onPageClick: page => e => {
+            e.preventDefault();
+            setPageNumber(page);
+          }
         }}
         buttons={[
           <Button
@@ -55,6 +62,7 @@ function JournalVolumesContainer({ refresh, journal, route }) {
             authorizedFor="journalVolume"
           />
         ]}
+        usesQueryParams
       />
       {childRoutes(route, {
         drawer: true,

client/src/backend/containers/journals/List.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { useFetch, usePaginationState } from "hooks";
+import { useFetch, usePaginationState, useSetLocation } from "hooks";
 import { journalsAPI } from "api";
 import withFilteredLists, { journalFilters } from "hoc/withFilteredLists";
 import HeadContent from "global/components/HeadContent";
@@ -26,6 +26,11 @@ function JournalsList({ entitiesListSearchProps, entitiesListSearchParams }) {
     request: [journalsAPI.index, journalFiltersWithDefaults, pagination]
   });
 
+  useSetLocation({
+    filters: journalFiltersWithDefaults,
+    page: pagination.number
+  });
+
   const { t } = useTranslation();
 
   if (!data) return null;
@@ -50,7 +55,10 @@ function JournalsList({ entitiesListSearchProps, entitiesListSearchParams }) {
         showCount
         showCountInTitle
         callbacks={{
-          onPageClick: page => () => setPageNumber(page)
+          onPageClick: page => e => {
+            e.preventDefault();
+            setPageNumber(page);
+          }
         }}
         buttons={[
           <Button
@@ -60,6 +68,7 @@ function JournalsList({ entitiesListSearchProps, entitiesListSearchParams }) {
             type="add"
           />
         ]}
+        usesQueryParams
       />
     </>
   );