Merge pull request #10 from collective/searchkit-block-fix

Refactor ToggleBookmarkButton to work without access to Redux store.
collective · Jan 12, 2025 · 090e404 · 090e404
2 parents 5f9abf9 + b69c409
commit 090e404
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 17 deletions.
diff --git a/packages/volto-bookmarks/news/9.feature b/packages/volto-bookmarks/news/9.feature
@@ -0,0 +1 @@
+Refactor ToggleBookmarkButton to work without access to Redux store. Use Jotai atom. @ksuess
diff --git a/packages/volto-bookmarks/src/atoms.js b/packages/volto-bookmarks/src/atoms.js
@@ -0,0 +1,4 @@
+import { atom } from 'jotai';
+
+// Jotai store for bookmarks of the current user
+export const allBookmarksAtom = atom({ items_total: 0, items: [] });
diff --git a/packages/volto-bookmarks/src/components/AppExtrasJotaiBookmarking.jsx b/packages/volto-bookmarks/src/components/AppExtrasJotaiBookmarking.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useSetAtom } from 'jotai';
+import { allBookmarksAtom } from '@plone-collective/volto-bookmarks/atoms';
+
+const FooComponent = () => {
+  const dispatch = useDispatch();
+  const bookmarks = useSelector(
+    (state) => state.collectivebookmarks?.items || [],
+  );
+  const setAllBookmarksAtom = useSetAtom(allBookmarksAtom);
+
+  React.useEffect(() => {
+    setAllBookmarksAtom({ items: bookmarks });
+  }, [dispatch, bookmarks, setAllBookmarksAtom]);
+
+  return <React.Fragment></React.Fragment>;
+};
+
+export default FooComponent;
diff --git a/packages/volto-bookmarks/src/components/ToggleBookmarkButton.jsx b/packages/volto-bookmarks/src/components/ToggleBookmarkButton.jsx
@@ -1,5 +1,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';
@@ -17,6 +18,8 @@ import {
 
 import { generateSearchQueryObject } from '@plone-collective/volto-bookmarks/helpers';
 
+import { allBookmarksAtom } from '@plone-collective/volto-bookmarks/atoms';
+
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -30,16 +33,15 @@ const messages = defineMessages({
  * Add a bookmark to users bookmark list
  */
 const ToggleBookmarkButton = ({ item = null }) => {
-  const token = useSelector((state) => state.userSession?.token);
   const content = useSelector((state) => state.content?.data);
-  const bookmarksArray = useSelector(
-    (state) => state.collectivebookmarks?.items,
-  );
+
+  const bookmarksArray = useAtomValue(allBookmarksAtom)?.items;
+
   const querystringResults = useSelector(
-    (state) => state.querystringsearch.subrequests,
+    (state) => state.querystringsearch?.subrequests,
   );
   const routerLocationSearch = useSelector(
-    (state) => state.router.location.search,
+    (state) => state.router?.location?.search,
   );
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -51,16 +53,17 @@ const ToggleBookmarkButton = ({ item = null }) => {
     // Check if page is bookmarked
     setBookmarked(false);
     const doLoSearch = generateSearchQueryObject(document.location.search);
-    bookmarksArray.forEach((element) => {
-      if (
-        item
-          ? element.uid === item?.UID
-          : element.uid === content?.UID &&
-            isEqual(JSON.parse(element.queryparams), doLoSearch)
-      ) {
-        setBookmarked(true);
-      }
-    });
+    bookmarksArray &&
+      bookmarksArray.forEach((element) => {
+        if (
+          item
+            ? element.uid === item?.UID
+            : element.uid === content?.UID &&
+              isEqual(JSON.parse(element.queryparams), doLoSearch)
+        ) {
+          setBookmarked(true);
+        }
+      });
 
     // group
     if (document.location.search && !item) {
@@ -110,7 +113,7 @@ const ToggleBookmarkButton = ({ item = null }) => {
     }
   }
 
-  return token && (item || content['@type'] !== 'Plone Site') ? (
+  return bookmarksArray && (item || content['@type'] !== 'Plone Site') ? (
     <Button
       icon
       basic

diff --git a/packages/volto-bookmarks/src/index.js b/packages/volto-bookmarks/src/index.js
@@ -2,6 +2,7 @@ import BookmarksEditorComponent from '@plone-collective/volto-bookmarks/componen
 import { collectivebookmarks } from '@plone-collective/volto-bookmarks/reducers';
 import EventListenerSearchkitSearch from '@plone-collective/volto-bookmarks/components/EventListenerSearchkitSearch';
 import AppExtrasBookmarking from '@plone-collective/volto-bookmarks/components/AppExtrasBookmarking';
+import AppExtrasJotaiBookmarking from '@plone-collective/volto-bookmarks/components/AppExtrasJotaiBookmarking';
 
 const applyConfig = (config) => {
   // button and menu are added in Volto project. See README.txt
@@ -30,6 +31,10 @@ const applyConfig = (config) => {
       match: '/',
       component: AppExtrasBookmarking,
     },
+    {
+      match: '/',
+      component: AppExtrasJotaiBookmarking,
+    },
     {
       match: '/',
       component: EventListenerSearchkitSearch,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Refactor ToggleBookmarkButton to work without access to Redux store. Use Jotai atom. @ksuess