Add current page parameter to the route in the listing and search block pagination

news/4159.bug

@@ -0,0 +1 @@
+Added current page parameter to route in listing and search block pagination - Fix: #3868 @bipoza

src/components/manage/Blocks/Listing/ListingBody.test.jsx

@@ -36,6 +36,26 @@ test('renders a ListingBody component', () => {
     content: {
       data: {
         is_folderish: true,
+        blocks: {
+          '839ee00b-013b-4f4a-9b10-8867938fdac3': {
+            '@type': 'listing',
+            block: '839ee00b-013b-4f4a-9b10-8867938fdac3',
+            headlineTag: 'h2',
+            query: [],
+            querystring: {
+              b_size: '2',
+              query: [
+                {
+                  i: 'path',
+                  o: 'plone.app.querystring.operation.string.absolutePath',
+                  v: '/',
+                },
+              ],
+              sort_order: 'ascending',
+            },
+            variation: 'default',
+          },
+        },
       },
     },
     intl: {

src/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -25,7 +25,7 @@ export default function withQuerystringResults(WrappedComponent) {
     const [initialPath] = React.useState(getBaseUrl(path));
 
     const copyFields = ['limit', 'query', 'sort_on', 'sort_order', 'depth'];
-
+    const { currentPage, setCurrentPage } = usePagination(data.block, 1);
     const adaptedQuery = Object.assign(
       variation?.fullobjects ? { fullobjects: 1 } : { metadata_fields: '_all' },
       {
@@ -37,7 +37,6 @@ export default function withQuerystringResults(WrappedComponent) {
           : {},
       ),
     );
-    const { currentPage, setCurrentPage } = usePagination(querystring, 1);
     const querystringResults = useSelector(
       (state) => state.querystringsearch.subrequests,
     );

src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -144,12 +144,16 @@ const getSearchFields = (searchData) => {
 };
 
 /**
- * A HOC that will mirror the search block state to a hash location
+ * A hook that will mirror the search block state to a hash location
  */
 const useHashState = () => {
   const location = useLocation();
   const history = useHistory();
 
+  /**
+   * Required to maintain parameter compatibility.
+    With this we will maintain support for receiving hash (#) and search (?) type parameters.
+  */
   const oldState = React.useMemo(() => {
     return {
       ...qs.parse(location.search),
@@ -165,7 +169,7 @@ const useHashState = () => {
 
   const setSearchData = React.useCallback(
     (searchData) => {
-      const newParams = qs.parse(location.hash);
+      const newParams = qs.parse(location.search);
 
       let changed = false;
 
@@ -182,11 +186,11 @@ const useHashState = () => {
 
       if (changed) {
         history.push({
-          hash: qs.stringify(newParams),
+          search: qs.stringify(newParams),
         });
       }
     },
-    [history, oldState, location.hash],
+    [history, oldState, location.search],
   );
 
   return [current, setSearchData];

src/helpers/Utils/usePagination.js

@@ -1,25 +1,53 @@
-import React from 'react';
-import { isEqual } from 'lodash';
-import { usePrevious } from './usePrevious';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useEffect, useRef } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import qs from 'query-string';
+import { useSelector } from 'react-redux';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+/**
+ * @function useCreatePageQueryStringKey
+ * @description A hook that creates a key with an id if there are multiple blocks with pagination.
+ * @returns {string} Example: page || page_012345678
+ */
+const useCreatePageQueryStringKey = (id) => {
+  const blockTypesWithPagination = ['search', 'listing'];
+  const blocks = useSelector((state) => state.content.data.blocks);
+  const hasMultiplePaginations =
+    Object.values(blocks).filter((item) =>
+      blockTypesWithPagination.includes(item['@type']),
+    ).length > 1 || false;
+
+  return hasMultiplePaginations ? slugify(`page-${id}`) : 'page';
+};
 
 /**
  * A pagination helper that tracks the query and resets pagination in case the
  * query changes.
  */
-export const usePagination = (query, defaultPage = 1) => {
-  const previousQuery = usePrevious(query);
-  const [currentPage, setCurrentPage] = React.useState(defaultPage);
+export const usePagination = (id = null, defaultPage = 1) => {
+  const location = useLocation();
+  const history = useHistory();
+  const pageQueryStringKey = useCreatePageQueryStringKey(id);
+  const pageQueryParam =
+    qs.parse(location.search)[pageQueryStringKey] || defaultPage;
+  const [currentPage, setCurrentPage] = React.useState(pageQueryParam);
+  const firstUpdate = useRef(true);
 
-  useDeepCompareEffect(() => {
-    setCurrentPage(defaultPage);
-  }, [query, previousQuery, defaultPage]);
+  useEffect(() => {
+    if (!firstUpdate.current) {
+      const newParams = {
+        ...qs.parse(location.search),
+        [pageQueryStringKey]: currentPage,
+      };
+      history.replace({
+        search: qs.stringify(newParams),
+      });
+    }
+    firstUpdate.current = false;
+  }, [currentPage, defaultPage, location.search, history, pageQueryStringKey]);
 
   return {
-    currentPage:
-      previousQuery && !isEqual(previousQuery, query)
-        ? defaultPage
-        : currentPage,
+    currentPage,
     setCurrentPage,
   };
 };