@plone/volto 16.20.0 → 16.20.2

package/.changelog.draft

@@ -1,26 +1,8 @@
-## 16.20.0 (2023-04-12)
-
-### Feature
-
-- Support RelationList field with named StaticCatalogVocabulary and SelectWidget. @ksuess [#4614](https://github.com/plone/volto/issues/4614)
-- Support for declaring a theme in `volto.config.js` or in `package.json`
-  Add two entry points to allow extension of a theme from other add-ons. @sneridagh [#4625](https://github.com/plone/volto/issues/4625)
-- Added querystring search get option. @robgietema [#4658](https://github.com/plone/volto/issues/4658)
+## 16.20.2 (2023-04-18)
 
 ### Bugfix
 
-- Added current page parameter to route in listing and search block pagination - Fix: #3868 @bipoza [#4159](https://github.com/plone/volto/issues/4159)
-- Fixed wrong localization on password reset page @iRohitSingh [#4656](https://github.com/plone/volto/issues/4656)
-- fix sitemap.xml.gz not is not compressed @dobri1408 [#4663](https://github.com/plone/volto/issues/4663)
-
-### Internal
-
-- Update to p.restapi 8.36.0 and Plone 6.0.3 @sneridagh [#4682](https://github.com/plone/volto/issues/4682)
-
-### Documentation
-
-- Update Volto contributing to align with and refer to the new Plone core code contributing requirements. @stevepiercy [#4634](https://github.com/plone/volto/issues/4634)
-- Improve creating views documentation page. @rboixaderg [#4636](https://github.com/plone/volto/issues/4636)
-- Rename "Developer Guidelines" to "Contributing". @stevepiercy [#4666](https://github.com/plone/volto/issues/4666)
-- Fix broken link to `ReactJS.org`. @stevepiercy [#4667](https://github.com/plone/volto/issues/4667)
+- Fix robot.txt - the sitemap link should respect x-forwarded headers @reebalazs [#4638](https://github.com/plone/volto/issues/4638)
+- Fix Move to top of folder ordering in folder content view by searching also @iFlameing [#4690](https://github.com/plone/volto/issues/4690)
+- Fix faulty D&D elements in ObjectBrowserList widget @sneridagh [#4703](https://github.com/plone/volto/issues/4703)
 

package/.eslintrc

@@ -44,8 +44,28 @@
         "rootPathSuffix": "src"
       }
     },
-    "import/core-modules": ["load-volto-addons"]
+    "import/core-modules": ["load-volto-addons"],
+    "react": {
+      "version": "detect"
+    }
   },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "extends": ["plugin:@typescript-eslint/recommended", "react-app", "prettier", "plugin:jsx-a11y/recommended"],
+      "plugins": ["@typescript-eslint", "prettier", "react-hooks", "jsx-a11y"],
+      "parser": "@typescript-eslint/parser"
+    },
+    {
+      "files": [
+        "**/*.stories.js",
+        "**/*.stories.jsx"
+      ],
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    }
+  ],
   "globals": {
     "root": true,
     "__DEVELOPMENT__": true,

package/CHANGELOG.md

@@ -8,6 +8,25 @@
 
 <!-- towncrier release notes start -->
 
+## 16.20.2 (2023-04-18)
+
+### Bugfix
+
+- Fix robot.txt - the sitemap link should respect x-forwarded headers @reebalazs [#4638](https://github.com/plone/volto/issues/4638)
+- Fix Move to top of folder ordering in folder content view by searching also @iFlameing [#4690](https://github.com/plone/volto/issues/4690)
+- Fix faulty D&D elements in ObjectBrowserList widget @sneridagh [#4703](https://github.com/plone/volto/issues/4703)
+
+
+## 16.20.1 (2023-04-14)
+
+### Bugfix
+
+- Generate a split sitemap @reebalazs [#4638](https://github.com/plone/volto/issues/4638)
+- Fix Move to top of folder ordering in folder content view @iFlameing [#4690](https://github.com/plone/volto/issues/4690)
+- Revert "Add current page parameter to the route in the listing and search block pagination (#4159)" @sneridagh [#4695](https://github.com/plone/volto/issues/4695)
+- Fix search block in edit mode re-queries multiple blocks with an empty search text @reebalazs [#4697](https://github.com/plone/volto/issues/4697)
+
+
 ## 16.20.0 (2023-04-12)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.20.0",
+  "version": "16.20.2",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -49,8 +49,8 @@
     "stylelint": "./node_modules/.bin/stylelint 'theme/**/*.{css,less}' 'src/**/*.{css,less}'",
     "stylelint:overrides": "./node_modules/.bin/stylelint 'theme/**/*.overrides' 'src/**/*.overrides'",
     "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "lint": "./node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx,json}'",
-    "lint:fix": "./node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx,json}'",
+    "lint": "./node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "lint:fix": "./node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n",
     "i18n:ci": "yarn i18n && git diff -G'^[^\"POT]' --exit-code",
     "dry-release": "release-it --dry-run",
@@ -412,6 +412,8 @@
     "@storybook/addon-essentials": "^6.3.0",
     "@storybook/addon-links": "^6.3.0",
     "@storybook/react": "^6.3.0",
+    "@typescript-eslint/eslint-plugin": "5.58.0",
+    "@typescript-eslint/parser": "5.58.0",
     "babel-loader": "8.2.2",
     "full-icu": "1.4.0",
     "identity-obj-proxy": "3.0.0",
@@ -421,6 +423,7 @@
     "react-is": "^16.13.1",
     "release-it": "^15.1.3",
     "tmp": "0.2.1",
+    "typescript": "5.0.4",
     "use-trace-update": "1.3.2",
     "why": "0.6.2"
   },

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "16.20.0",
+  "version": "16.20.2",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/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: {

package/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,
     );

package/src/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 import { compose } from 'redux';
 
@@ -60,9 +59,11 @@ const SearchBlockEdit = (props) => {
   };
 
   const { query = {} } = data || {};
-  useDeepCompareEffect(() => {
+  // We don't need deep compare here, as this is just json serializable data.
+  const deepQuery = JSON.stringify(query);
+  useEffect(() => {
     onTriggerSearch();
-  }, [query, onTriggerSearch]);
+  }, [deepQuery, onTriggerSearch]);
 
   return (
     <>

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

@@ -114,15 +114,19 @@ function normalizeState({
     block: id,
   };
 
-  // TODO: need to check if SearchableText facet is not already in the query
-  // Ideally the searchtext functionality should be restructured as being just
-  // another facet
-  params.query = params.query.reduce(
-    // Remove SearchableText from query
-    (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
-    [],
-  );
+  // Note Ideally the searchtext functionality should be restructured as being just
+  // another facet. But right now it's the same. This means that if a searchText
+  // is provided, it will override the SearchableText facet.
+  // If there is no searchText, the SearchableText in the query remains in effect.
+  // TODO eventually the searchText should be a distinct facet from SearchableText, and
+  // the two conditions could be combined, in comparison to the current state, when
+  // one overrides the other.
   if (searchText) {
+    params.query = params.query.reduce(
+      // Remove SearchableText from query
+      (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+      [],
+    );
     params.query.push({
       i: 'SearchableText',
       o: 'plone.app.querystring.operation.string.contains',
@@ -144,16 +148,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 +169,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 +186,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];
@@ -282,8 +282,14 @@ const withSearch = (options) => (WrappedComponent) => {
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;
 
+    const deepQuery = JSON.stringify(data.query);
     const onTriggerSearch = React.useCallback(
-      (toSearchText, toSearchFacets, toSortOn, toSortOrder) => {
+      (
+        toSearchText = undefined,
+        toSearchFacets = undefined,
+        toSortOn = undefined,
+        toSortOrder = undefined,
+      ) => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(
           () => {
@@ -291,7 +297,7 @@ const withSearch = (options) => (WrappedComponent) => {
               id,
               query: data.query || {},
               facets: toSearchFacets || facets,
-              searchText: toSearchText,
+              searchText: toSearchText || searchText,
               sortOn: toSortOn || sortOn,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
@@ -305,11 +311,14 @@ const withSearch = (options) => (WrappedComponent) => {
           toSearchFacets ? inputDelay / 3 : inputDelay,
         );
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [
-        data.query,
+        // Use deep comparison of data.query
+        deepQuery,
         facets,
         id,
         setLocationSearchData,
+        searchText,
         sortOn,
         sortOrder,
         facetSettings,

package/src/components/manage/Contents/Contents.jsx

@@ -796,18 +796,20 @@ class Contents extends Component {
    */
   onMoveToTop(event, { value }) {
     const id = this.state.items[value]['@id'];
-    value = this.state.currentPage * this.state.pageSize + value;
-    this.props.orderContent(
-      getBaseUrl(this.props.pathname),
-      id.replace(/^.*\//, ''),
-      -value,
-    );
-    this.setState(
-      {
-        currentPage: 0,
-      },
-      () => this.fetchContents(),
-    );
+    this.props
+      .orderContent(
+        getBaseUrl(this.props.pathname),
+        id.replace(/^.*\//, ''),
+        'top',
+      )
+      .then(() => {
+        this.setState(
+          {
+            currentPage: 0,
+          },
+          () => this.fetchContents(),
+        );
+      });
   }
 
   /**
@@ -818,18 +820,21 @@ class Contents extends Component {
    * @returns {undefined}
    */
   onMoveToBottom(event, { value }) {
-    this.onOrderItem(
-      this.state.items[value]['@id'],
-      value,
-      this.state.items.length - 1 - value,
-      false,
-    );
-    this.onOrderItem(
-      this.state.items[value]['@id'],
-      value,
-      this.state.items.length - 1 - value,
-      true,
-    );
+    const id = this.state.items[value]['@id'];
+    this.props
+      .orderContent(
+        getBaseUrl(this.props.pathname),
+        id.replace(/^.*\//, ''),
+        'bottom',
+      )
+      .then(() => {
+        this.setState(
+          {
+            currentPage: 0,
+          },
+          () => this.fetchContents(),
+        );
+      });
   }
 
   /**

package/src/components/manage/Widgets/ObjectListWidget.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Accordion, Button, Segment } from 'semantic-ui-react';
 import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
-import { applySchemaDefaults } from '@plone/volto/helpers';
+import { applySchemaDefaults, reorderArray } from '@plone/volto/helpers';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
@@ -164,13 +164,8 @@ const ObjectListWidget = (props) => {
           if (!destination) {
             return;
           }
-
-          const first = value[source.index];
-          const second = value[destination.index];
-          value[destination.index] = first;
-          value[source.index] = second;
-
-          onChange(id, value);
+          const newValue = reorderArray(value, source.index, destination.index);
+          onChange(id, newValue);
           return true;
         }}
       >

package/src/express-middleware/sitemap.js

@@ -1,11 +1,34 @@
 import express from 'express';
-import { generateSitemap } from '@plone/volto/helpers';
+import {
+  generateSitemap,
+  generateSitemapIndex,
+  SITEMAP_BATCH_SIZE,
+} from '@plone/volto/helpers/Sitemap/Sitemap';
 
 export const sitemap = function (req, res, next) {
-  generateSitemap(req).then((sitemap) => {
+  let start = 0;
+  let size = undefined;
+  const { batch: batchStr } = req.params;
+  if (batchStr !== undefined) {
+    const batch = parseInt(batchStr);
+    if (isNaN(batch) || batch === 0 || '' + batch !== batchStr) {
+      res.status(404);
+      // Some data, such as the internal API address, may be sensitive to be published
+      res.send(
+        `Invalid sitemap name, use sitemap.xml.gz, or batched sitemapN.xml.gz where N is a positive integer.`,
+      );
+      return;
+    }
+    start = SITEMAP_BATCH_SIZE * (batch - 1);
+    size = SITEMAP_BATCH_SIZE;
+  }
+  generateSitemap(req, start, size).then((sitemap) => {
     if (Buffer.isBuffer(sitemap)) {
       res.set('Content-Type', 'application/x-gzip');
-      res.set('Content-Disposition', 'attachment; filename="sitemap.xml.gz"');
+      res.set(
+        'Content-Disposition',
+        `attachment; filename="sitemap${batchStr || ''}.xml.gz"`,
+      );
       res.send(sitemap);
     } else {
       // {"errno":-111, "code":"ECONNREFUSED", "host": ...}
@@ -16,10 +39,20 @@ export const sitemap = function (req, res, next) {
   });
 };
 
+export const sitemapIndex = function (req, res, next) {
+  generateSitemapIndex(req).then((sitemapIndex) => {
+    res.set('Content-Type', 'application/xml');
+    res.set('Content-Disposition', 'attachment; filename="sitemap-index.xml"');
+    res.send(sitemapIndex);
+  });
+};
+
 export default function () {
   const middleware = express.Router();
 
   middleware.all('**/sitemap.xml.gz', sitemap);
+  middleware.all('**/sitemap:batch.xml.gz', sitemap);
+  middleware.all('**/sitemap-index.xml', sitemapIndex);
   middleware.id = 'sitemap.xml.gz';
   return middleware;
 }

package/src/helpers/Robots/Robots.js

@@ -15,12 +15,9 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
  */
 export const generateRobots = (req) =>
   new Promise((resolve) => {
-    //const url = `${req.protocol}://${req.get('Host')}`;
-    const request = superagent.get(
-      `${
-        config.settings.internalApiPath ?? config.settings.apiPath
-      }/robots.txt`,
-    );
+    const internalUrl =
+      config.settings.internalApiPath ?? config.settings.apiPath;
+    const request = superagent.get(`${internalUrl}/robots.txt`);
     request.set('Accept', 'text/plain');
     const authToken = req.universalCookies.get('auth_token');
     if (authToken) {
@@ -31,6 +28,27 @@ export const generateRobots = (req) =>
       if (error) {
         resolve(text || error);
       } else {
+        // It appears that express does not take the x-forwarded headers into
+        // consideration, so we do it ourselves.
+        const {
+          'x-forwarded-proto': forwardedProto,
+          'x-forwarded-host': forwardedHost,
+          'x-forwarded-port': forwardedPort,
+        } = req.headers;
+        const proto = forwardedProto ?? req.protocol;
+        const host = forwardedHost ?? req.get('Host');
+        const portNum = forwardedPort ?? req.get('Port');
+        const port =
+          (proto === 'https' && '' + portNum === '443') ||
+          (proto === 'http' && '' + portNum === '80')
+            ? ''
+            : `:${portNum}`;
+        // Plone has probably returned the sitemap link with the internal url.
+        // If so, let's replace it with the current one.
+        const url = `${proto}://${host}${port}`;
+        text = text.replace(internalUrl, url);
+        // Replace the sitemap with the sitemap index.
+        text = text.replace('sitemap.xml.gz', 'sitemap-index.xml');
         resolve(text);
       }
     });

package/src/helpers/Sitemap/Sitemap.js

@@ -11,19 +11,23 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 
 import config from '@plone/volto/registry';
 
+export const SITEMAP_BATCH_SIZE = 5000;
+
 /**
  * Generate sitemap
  * @function generateSitemap
  * @param {Object} _req Request object
  * @return {string} Generated sitemap
  */
-export const generateSitemap = (_req) =>
+export const generateSitemap = (_req, start = 0, size = undefined) =>
   new Promise((resolve) => {
     const { settings } = config;
     const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_size=100000000&use_site_search_settings=1`,
+      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_start=${start}&b_size=${
+        size !== undefined ? size : 100000000
+      }&use_site_search_settings=1`,
     );
     request.set('Accept', 'application/json');
     request.use(addHeadersFactory(_req));
@@ -50,3 +54,41 @@ export const generateSitemap = (_req) =>
       }
     });
   });
+
+/**
+ * Generate sitemap
+ * @function generateSitemapIndex
+ * @param {Object} _req Request object
+ * @return {string} Generated sitemap index
+ */
+export const generateSitemapIndex = (_req) =>
+  new Promise((resolve) => {
+    const { settings } = config;
+    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiPath = settings.internalApiPath ?? settings.apiPath;
+    const request = superagent.get(
+      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
+    );
+    request.set('Accept', 'application/json');
+    const authToken = _req.universalCookies.get('auth_token');
+    if (authToken) {
+      request.set('Authorization', `Bearer ${authToken}`);
+    }
+    request.end((error, { body } = {}) => {
+      if (error) {
+        resolve(body || error);
+      } else {
+        const items = Array.from(
+          { length: Math.ceil(body.items_total / SITEMAP_BATCH_SIZE) },
+          (_, i) =>
+            `  <sitemap>
+    <loc>${toPublicURL('/sitemap' + (i + 1) + '.xml.gz')}</loc>
+  </sitemap>`,
+        );
+        const result = `<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${items.join('\n')}\n</sitemapindex>`;
+        resolve(result);
+      }
+    });
+  });

package/src/helpers/Utils/Utils.js

@@ -258,11 +258,11 @@ export const removeFromArray = (array, index) => {
 };
 
 /**
- * Reorder array
+ * Moves an item from origin to target inside an array in an immutable way
  * @param {Array} array Array with data
- * @param {number} origin Index of item to be reordered
- * @param {number} target Index of item to be reordered to
- * @returns {Array} Array with reordered elements
+ * @param {number} origin Index of item to be moved from
+ * @param {number} target Index of item to be moved to
+ * @returns {Array} Resultant array
  */
 export const reorderArray = (array, origin, target) => {
   const result = Array.from(array);

package/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,
   };
 };

package/src/helpers/index.js

@@ -86,6 +86,7 @@ export {
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,
+  reorderArray,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
 export {

package/src/helpers/Utils/usePagination.test.js

@@ -1,115 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { usePagination } from './usePagination';
-import * as redux from 'react-redux';
-import routeData from 'react-router';
-import { slugify } from '@plone/volto/helpers/Utils/Utils';
-
-const searchBlockId = '545b33de-92cf-4747-969d-68851837b317';
-const searchBlockId2 = '454b33de-92cf-4747-969d-68851837b713';
-const searchBlock = {
-  '@type': 'search',
-  query: {
-    b_size: '4',
-    query: [
-      {
-        i: 'path',
-        o: 'plone.app.querystring.operation.string.relativePath',
-        v: '',
-      },
-    ],
-    sort_order: 'ascending',
-  },
-  showSearchInput: true,
-  showTotalResults: true,
-};
-let state = {
-  content: {
-    data: {
-      blocks: {
-        [searchBlockId]: searchBlock,
-      },
-      blocks_layout: {
-        items: [searchBlockId],
-      },
-    },
-  },
-};
-
-let mockUseLocationValue = {
-  pathname: '/testroute',
-  search: '',
-};
-
-const setUp = (searchParam, numberOfSearches) => {
-  mockUseLocationValue.search = searchParam;
-  if (numberOfSearches > 1) {
-    state.content.data.blocks[searchBlockId2] = searchBlock;
-    state.content.data.blocks_layout.items.push(searchBlockId2);
-  }
-  return renderHook(({ id, defaultPage }) => usePagination(id, defaultPage), {
-    initialProps: {
-      id: searchBlockId,
-      defaultPage: 1,
-    },
-  });
-};
-
-describe(`Tests for usePagination, for the block ${searchBlockId}`, () => {
-  const useLocation = jest.spyOn(routeData, 'useLocation');
-  const useHistory = jest.spyOn(routeData, 'useHistory');
-  const useSelector = jest.spyOn(redux, 'useSelector');
-  beforeEach(() => {
-    useLocation.mockReturnValue(mockUseLocationValue);
-    useHistory.mockReturnValue({ replace: jest.fn() });
-    useSelector.mockImplementation((cb) => cb(state));
-  });
-
-  it('1 paginated block with id and defaultPage 1 - shoud be 1', () => {
-    const { result } = setUp();
-    expect(result.current.currentPage).toBe(1);
-  });
-
-  it('1 paginated block without params - shoud be 1', () => {
-    const { result } = setUp();
-    expect(result.current.currentPage).toBe(1);
-  });
-
-  const param1 = '?page=2';
-  it(`1 paginated block with params: ${param1} - shoud be 2`, () => {
-    const { result } = setUp(param1);
-    expect(result.current.currentPage).toBe(2);
-  });
-
-  const param2 = `?${slugify(`page-${searchBlockId}`)}=2`;
-  it(`2 paginated blocks with current block in the params: ${param2} - shoud be 2`, () => {
-    const { result } = setUp(param2, 2);
-    expect(result.current.currentPage).toBe(2);
-  });
-
-  const param3 = `?${slugify(`page-${searchBlockId2}`)}=2`;
-  it(`2 paginated blocks with the other block in the params: ${param3} - shoud be 1`, () => {
-    const { result } = setUp(param3, 2);
-    expect(result.current.currentPage).toBe(1);
-  });
-
-  const param4 = `?${slugify(`page-${searchBlockId}`)}=2&${slugify(
-    `page-${searchBlockId2}`,
-  )}=1`;
-  it(`2 paginated blocks with both blocks in the params, current 2: ${param4} - shoud be 2`, () => {
-    const { result } = setUp(param4, 2);
-    expect(result.current.currentPage).toBe(2);
-  });
-
-  const param5 = `?${slugify(`page-${searchBlockId}`)}=1&${slugify(
-    `page-${searchBlockId2}`,
-  )}=2`;
-  it(`2 paginated blocks with both blocks in the params, current 1: ${param5} - shoud be 1`, () => {
-    const { result } = setUp(param5, 2);
-    expect(result.current.currentPage).toBe(1);
-  });
-
-  it(`2 paginated blocks with wrong page param: ${param1} - shoud be 1`, () => {
-    const { result } = setUp(param1, 2);
-    expect(result.current.currentPage).toBe(1);
-  });
-});