Revert "Add current page parameter to the route in the listing and se… (

#4696)

news/4695.bugfix

@@ -0,0 +1 @@
+Revert "Add current page parameter to the route in the listing and search block pagination (#4159)" @sneridagh

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

@@ -36,26 +36,6 @@ 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,6 +37,7 @@ 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,16 +144,12 @@ const getSearchFields = (searchData) => {
 };
 
 /**
- * A hook that will mirror the search block state to a hash location
+ * A HOC 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),
@@ -169,7 +165,7 @@ const useHashState = () => {
 
   const setSearchData = React.useCallback(
     (searchData) => {
-      const newParams = qs.parse(location.search);
+      const newParams = qs.parse(location.hash);
 
       let changed = false;
 
@@ -186,11 +182,11 @@ const useHashState = () => {
 
       if (changed) {
         history.push({
-          search: qs.stringify(newParams),
+          hash: qs.stringify(newParams),
         });
       }
     },
-    [history, oldState, location.search],
+    [history, oldState, location.hash],
   );
 
   return [current, setSearchData];

src/helpers/Utils/usePagination.js

@@ -1,59 +1,25 @@
-import React, { useRef, useEffect } 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 blocksLayout =
-    useSelector((state) => state?.content?.data?.blocks_layout?.items) || [];
-  const displayedBlocks = blocksLayout?.map((item) => blocks[item]);
-  const hasMultiplePaginations =
-    displayedBlocks.filter((item) =>
-      blockTypesWithPagination.includes(item['@type']),
-    ).length > 1 || false;
-
-  return hasMultiplePaginations ? slugify(`page-${id}`) : 'page';
-};
+import React from 'react';
+import { isEqual } from 'lodash';
+import { usePrevious } from './usePrevious';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 
 /**
  * A pagination helper that tracks the query and resets pagination in case the
  * query changes.
  */
-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(
-    parseInt(pageQueryParam),
-  );
-  const queryRef = useRef(qs.parse(location.search)?.query);
+export const usePagination = (query, defaultPage = 1) => {
+  const previousQuery = usePrevious(query);
+  const [currentPage, setCurrentPage] = React.useState(defaultPage);
 
-  useEffect(() => {
-    if (queryRef.current !== qs.parse(location.search)?.query) {
-      setCurrentPage(defaultPage);
-      queryRef.current = qs.parse(location.search)?.query;
-    }
-    const newParams = {
-      ...qs.parse(location.search),
-      [pageQueryStringKey]: currentPage,
-    };
-    history.replace({
-      search: qs.stringify(newParams),
-    });
-  }, [currentPage, defaultPage, location.search, history, pageQueryStringKey]);
+  useDeepCompareEffect(() => {
+    setCurrentPage(defaultPage);
+  }, [query, previousQuery, defaultPage]);
 
   return {
-    currentPage,
+    currentPage:
+      previousQuery && !isEqual(previousQuery, query)
+        ? defaultPage
+        : currentPage,
     setCurrentPage,
   };
 };