Fix bookmarking of search requests

.github/workflows/acceptance.yml

@@ -26,7 +26,7 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
 
       - name: Enable corepack
-        run: corepack enable
+        run: npm i -g corepack@latest && corepack enable
 
       - name: Get pnpm store directory
         shell: bash

.github/workflows/changelog.yml

@@ -27,7 +27,7 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
 
       - name: Enable corepack
-        run: corepack enable
+        run: npm i -g corepack@latest && corepack enable
 
       - name: Get pnpm store directory
         shell: bash

.github/workflows/code.yml

@@ -25,7 +25,7 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
 
       - name: Enable corepack
-        run: corepack enable
+        run: npm i -g corepack@latest && corepack enable
 
       - name: Get pnpm store directory
         shell: bash

.github/workflows/i18n.yml

@@ -25,7 +25,7 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
 
       - name: Enable corepack
-        run: corepack enable
+        run: npm i -g corepack@latest && corepack enable
 
       - name: Get pnpm store directory
         shell: bash

.github/workflows/storybook.yml

@@ -27,7 +27,7 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
 
       - name: Enable corepack
-        run: corepack enable
+        run: npm i -g corepack@latest && corepack enable
 
       - name: Get pnpm store directory
         shell: bash

.github/workflows/unit.yml

@@ -25,7 +25,7 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
 
       - name: Enable corepack
-        run: corepack enable
+        run: npm i -g corepack@latest && corepack enable
 
       - name: Get pnpm store directory
         shell: bash

README.md

@@ -36,8 +36,10 @@ There are two options:
 
 > This requires Volto >= 16.10.0 with a pluggable toolbar.
 
-Include bookmarking in your Volto project by integrating a component `Bookmarking`.
-This component adds two buttons to the toolbar: one for toggling the bookmark of the current page and one for displaying a menu with a list of bookmarks.
+Include bookmarking in your Volto project by integrating the component `Bookmarking`.
+This component adds two buttons to the toolbar: 
+one for toggling the bookmark of the current page and 
+one for displaying a menu with a list of bookmarks.
 
 `config.js`:
 
@@ -98,27 +100,17 @@ config.settings.bookmarks = {
 Add a mapping for search filters:
 
 ```js
-    config.settings.bookmarks.filtermapping = {
-      facet_fields: {
-        '5237dc43-c573-4651-a5b8-cf24bfde13a6': 'Datendrehscheibe',
-        allgemeines: 'Allgemeines',
-        arbeitsliste: 'Arbeitsliste',
-        beb2k: 'BEB2k',
-        'release-note': 'Release-Note',
-        tutorial: 'Tutorial',
-        'superuser-innen': 'Superuser/innen',
-        ai: 'AI',
-        andere: 'Andere',
-        tg: 'TG',
-        zh: 'ZH',
-      },
-      search_sections: {
-        others: 'Website',
-        dokumentation: 'Dokumentation',
-        inside: 'IGIB-Inside',
-        geologie: 'Geologie',
-      },
+  config.settings.bookmarks.filtermapping = {
+    facet_fields: {
+      'News Item': 'Nachricht',
+      Document: 'Seite',
+      Event: 'Veranstaltung',
     },
+    search_sections: {
+      others: 'Website',
+      nachrichten: 'Nachrichten',
+    },
+  };
 ```
 
 <img align="right" width="50" alt="volto-bookmarks" src="./packages/volto-bookmarks/src/icons/bookmark.svg" />

packages/policy/src/index.js

@@ -17,9 +17,12 @@ const applyConfig = (config) => {
 
   config.settings.bookmarks.filtermapping = {
     facet_fields: {
-      'News Item': 'News',
+      'News Item': 'News Item',
+      Document: 'Page',
+      Event: 'Event',
     },
     search_sections: {
+      others: 'Website',
       news: 'News',
     },
   };

packages/volto-bookmarks/news/7.feature

@@ -0,0 +1 @@
+Enhance bookmarking of search requests: bookmarks menu: labels according search parameters. @ksuess

packages/volto-bookmarks/src/actions/index.js

@@ -4,7 +4,7 @@
 
 import { ADD_BOOKMARK, DEL_BOOKMARK, GET_BOOKMARKS } from '../constants';
 
-import { generateSearchQueryObject } from '../helpers';
+import { sortQuerystring } from '../helpers';
 
 /**
  * addBookmark
@@ -13,7 +13,7 @@ import { generateSearchQueryObject } from '../helpers';
  * @param {String} querystring
  * @param {Object} payload
  */
-export function addBookmark(uid, group, querystring = '', payload = {}) {
+export function addBookmark(uid, group, querystring = null, payload = {}) {
   return {
     type: ADD_BOOKMARK,
     request: {
@@ -22,7 +22,7 @@ export function addBookmark(uid, group, querystring = '', payload = {}) {
       data: {
         uid,
         group,
-        queryparams: JSON.stringify(generateSearchQueryObject(querystring)),
+        queryparams: sortQuerystring(querystring),
         payload,
       },
     },
@@ -35,7 +35,7 @@ export function addBookmark(uid, group, querystring = '', payload = {}) {
  * @param {String} group
  * @param {Object} queryObjectStringified
  */
-export function deleteBookmark(uid, group, queryObjectStringified = '') {
+export function deleteBookmark(uid, group, querystring = null) {
   return {
     type: DEL_BOOKMARK,
     request: {
@@ -44,7 +44,7 @@ export function deleteBookmark(uid, group, queryObjectStringified = '') {
       data: {
         uid,
         group,
-        queryparams: queryObjectStringified,
+        queryparams: sortQuerystring(querystring),
       },
     },
   };

packages/volto-bookmarks/src/components/BookmarksEditorComponent.jsx

@@ -15,9 +15,9 @@ import './volto-bookmarks.css';
 import config from '@plone/volto/registry';
 
 function getTitle(queryparams) {
-  const searchParamsObject = JSON.parse(queryparams);
+  const searchParamsObject = new URLSearchParams(queryparams);
 
-  let query = searchParamsObject['query'];
+  let query = searchParamsObject.get('query');
 
   // default search block
   if (query && query.length > 0) {
@@ -43,8 +43,8 @@ function getTitle(queryparams) {
 
   // searchkit block of volto-searchkit-block
   let title_array = [];
-  query = searchParamsObject['q'];
-  let filters = searchParamsObject['f'];
+  query = searchParamsObject.get('q');
+  let filters = searchParamsObject.getAll('f');
   let section = '';
 
   if (query && query[0].length) {
@@ -85,7 +85,6 @@ function getTitle(queryparams) {
   search_bookmark_title = section
     ? `${section}: ${search_bookmark_title}`
     : search_bookmark_title;
-
   return search_bookmark_title;
 }
 

packages/volto-bookmarks/src/components/EventListenerSearchkitSearch.jsx

@@ -3,11 +3,11 @@ import { useDispatch } from 'react-redux';
 
 import { getAllBookmarks } from '@plone-collective/volto-bookmarks/actions';
 
+// event handler for searchkitQueryChanged event of package react-searchkit
 const EventListenerSearchkitSearch = () => {
   const dispatch = useDispatch();
 
   function searchOnUrlQueryStringChanged(event) {
-    // event handler for searchkitQueryChanged event of package react-searchkit
     dispatch(getAllBookmarks());
   }
 

packages/volto-bookmarks/src/components/MenuItem.jsx

@@ -12,7 +12,6 @@ import {
   deleteBookmark,
   getAllBookmarks,
 } from '@plone-collective/volto-bookmarks/actions';
-import { generateSearchQueryParamsString } from '@plone-collective/volto-bookmarks/helpers';
 
 const messages = defineMessages({
   title_bookmarks: {
@@ -44,25 +43,17 @@ const MenuItem = ({ intl, item }) => {
     <li className="bookmarkitem" key={item['@id']}>
       <Link
         title={item.description || ''}
-        to={`${
-          flattenToAppURL(item['@id']) +
-          '?' +
-          generateSearchQueryParamsString(item.queryparams)
-        }`}
+        to={`${flattenToAppURL(item['@id']) + '?' + item.queryparams}`}
         onClick={() => {
           // Hack: Select a bookmark of a search, then select another bookmark of another search.
           // Search is triggered!
           // Criterion: search parameters do exist
           // Event 'popstate' triggers a search.
           const url = `${
-            flattenToAppURL(item['@id']) +
-            '?' +
-            generateSearchQueryParamsString(item.queryparams)
+            flattenToAppURL(item['@id']) + '?' + item.queryparams
           }`;
-          const queryparams_object = item.queryparams
-            ? JSON.parse(item.queryparams)
-            : {};
-          if (Object.keys(queryparams_object).length > 0) {
+
+          if (item.queryparams) {
             window.history.pushState({}, 'search bookmark', url);
             let evt = new CustomEvent('popstate', {
               detail: {},

packages/volto-bookmarks/src/components/ToggleBookmarkButton.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { defineMessages, injectIntl, useIntl } from 'react-intl';
 import { useAtomValue } from 'jotai';
 import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button } from 'semantic-ui-react';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
@@ -16,7 +15,7 @@ import {
   getAllBookmarks,
 } from '@plone-collective/volto-bookmarks/actions';
 
-import { generateSearchQueryObject } from '@plone-collective/volto-bookmarks/helpers';
+import { sortQuerystring } from '@plone-collective/volto-bookmarks/helpers';
 
 import { allBookmarksAtom } from '@plone-collective/volto-bookmarks/atoms';
 
@@ -52,14 +51,13 @@ const ToggleBookmarkButton = ({ item = null }) => {
   React.useEffect(() => {
     // Check if page is bookmarked
     setBookmarked(false);
-    const doLoSearch = generateSearchQueryObject(document.location.search);
+    const doLoSearch = sortQuerystring(document.location.search);
     bookmarksArray &&
       bookmarksArray.forEach((element) => {
         if (
           item
             ? element.uid === item?.UID
-            : element.uid === content?.UID &&
-              isEqual(JSON.parse(element.queryparams), doLoSearch)
+            : element.uid === content?.UID && element.queryparams === doLoSearch
         ) {
           setBookmarked(true);
         }
@@ -89,11 +87,7 @@ const ToggleBookmarkButton = ({ item = null }) => {
         deleteBookmark(
           item?.UID || content.UID,
           group,
-          JSON.stringify(
-            generateSearchQueryObject(
-              item?.UID ? '' : document.location.search,
-            ),
-          ),
+          item?.UID ? null : document.location.search,
         ),
       ).then(() => {
         dispatch(getAllBookmarks());
@@ -104,7 +98,7 @@ const ToggleBookmarkButton = ({ item = null }) => {
         addBookmark(
           item?.UID || content.UID,
           group,
-          item?.UID ? '' : document.location.search,
+          item?.UID ? null : document.location.search,
           {},
         ),
       ).then(() => {

packages/volto-bookmarks/src/helpers.js

@@ -12,53 +12,19 @@ const translateSearch = (el, type) => {
 };
 
 /**
- * generateSearchQueryObject
- * @function generateSearchQueryObject
+ * sortQuerystring
+ * @function sortQuerystring
  * @param {string} querystring querystring of url
- * @return {string} ready for 'get' request. part of unique identifier of a bookmark
+ * @return {string} ready for request. part of unique identifier of a bookmark
  */
-function generateSearchQueryObject(querystring) {
-  const params = new URLSearchParams(querystring);
-  let obj = {};
-  for (let key of params.keys()) {
-    const values = params.getAll(key);
-    if (values.length > 1) {
-      obj[key] = {};
-      values.forEach((el) => {
-        var [k, v] = el.split(':');
-        obj[key][k] = v;
-      });
-    } else {
-      obj[key] = values[0];
-    }
-  }
-  return obj;
-}
-
-/**
- * generateSearchQueryParamsString
- * counterpart of generateSearchQueryObject
- * @function generateSearchQueryParamsString
- * @param {string} searchparamstring Json stringified object with search params (values are lists!)
- * @return {string} querystring, ready to use in url
- */
-function generateSearchQueryParamsString(searchparamstring) {
-  const obj = JSON.parse(searchparamstring);
-  const params = new URLSearchParams();
-  for (const [key, value] of Object.entries(obj)) {
-    if (typeof value == 'string') {
-      params.append(key, value);
-    } else if (value.length > 0) {
-      for (const el of value) {
-        params.append(key, el);
-      }
-    } else {
-      Object.keys(value).forEach((filterkey) => {
-        params.append(key, `${filterkey}:${value[filterkey]}`);
-      });
-    }
+function sortQuerystring(querystring) {
+  if (!querystring) {
+    return '';
   }
-  return params.toString();
+  let params = new URLSearchParams(querystring);
+  params.sort();
+  let sortedParams = params.toString();
+  return sortedParams;
 }
 
 function parseSearchBlockQuery(query) {
@@ -73,9 +39,4 @@ function parseSearchBlockQuery(query) {
   return obj;
 }
 
-export {
-  generateSearchQueryParamsString,
-  generateSearchQueryObject,
-  parseSearchBlockQuery,
-  translateSearch,
-};
+export { sortQuerystring, parseSearchBlockQuery, translateSearch };

packages/volto-bookmarks/src/index.js

@@ -17,6 +17,18 @@ const applyConfig = (config) => {
     bookmarkgroupfield: '@type',
   };
 
+  config.settings.bookmarks.filtermapping = {
+    facet_fields: {
+      'News Item': 'News Item',
+      Document: 'Page',
+      Event: 'Event',
+    },
+    search_sections: {
+      others: 'Website',
+      news: 'News',
+    },
+  };
+
   // menu body
   config.settings.additionalToolbarComponents = {
     bookmarksMenu: {