Merge pull request #13 from collective/bookmarking-in-listings

Bookmarking in listings. Jotai instead of actions and redux.

Makefile

@@ -119,6 +119,7 @@ storybook-build: ## Build Storybook
 acceptance-frontend-dev-start: ## Start acceptance frontend in development mode
 	# RAZZLE_API_PATH=http://127.0.0.1:55001/plone pnpm start
 	RAZZLE_API_PATH=http://127.0.0.1:55001/plone NODE_OPTIONS=--dns-result-order=ipv4first pnpm start
+	# RAZZLE_DEV_PROXY_API_PATH=http://127.0.0.1:55001/plone NODE_OPTIONS=--dns-result-order=ipv4first pnpm start
 
 .PHONY: acceptance-frontend-prod-start
 acceptance-frontend-prod-start: ## Start acceptance frontend in production mode

README.md

@@ -90,10 +90,11 @@ config.settings.bookmarks = {
   bookmarkgroupmapping: {
     manual: 'Manuals and HowTos',
     releasenote: 'Release Notes',
-    default_search: 'Search',
+    search: 'Search', // id of search page
+    'search-in-news': 'Search in News', // id of another search page
     default_nogroup: 'Miscellaneous',
   },
-  bookmarkgroupfield: '@type',
+  bookmarkgroupfield: 'type_title',
 };
 ```
 

cypress/tests/content_bookmark.cy.js

@@ -4,33 +4,37 @@ context('Bookmark Acceptance Tests', () => {
       cy.intercept('GET', `/**/*?expand*`).as('content');
       cy.intercept('GET', '/**/Document').as('schema');
       cy.intercept('GET', '/**/@bookmarks').as('bookmarks');
-
-      cy.visit('/');
-      cy.viewport('macbook-16');
+      // Wait a bit to previous teardown to complete correctly because Heisenbug in this point
+      cy.wait(2000);
+      // give a logged in admin
+      cy.autologin();
+
       cy.createContent({
         contentType: 'Document',
         contentId: 'document',
         contentTitle: 'Test document',
       });
-      // give a logged in editor
-      cy.autologin();
-      cy.wait('@content')
     });
 
-
-    it('As authenticated user I can bookmark a Page and see it in my bookmarks menu', function () {
+    it('The bookmarks menu is initially empty', function () {
       cy.visit('/document');
 
       // Bookmarks menu is empty
       cy.get('button#toolbar-show-bookmarks').click();
-      cy.wait('@bookmarks')
-      cy.contains("You don't have any bookmarks.")
+      cy.wait('@bookmarks');
+      cy.contains("You don't have any bookmarks.");
+    });
 
-      cy.get('button#toolbar-addbookmark').click();
+    it('As authenticated user I can bookmark a Page and see it in my bookmarks menu', function () {
+      cy.visit('/document');
 
-      // bookmarks menu contains new bookmark
-      cy.get('button#toolbar-show-bookmarks').click();
-      cy.wait('@bookmarks')
+      // Bookmark current page
+      cy.get('#toolbar-addbookmark').click();
+      cy.wait('@content');
+
+      // Bookmarks menu contains new bookmark
+      cy.get('#toolbar-show-bookmarks').click();
+      cy.wait('@bookmarks');
       cy.get('.volto-bookmarks-list').contains('Test document');
     });
   });

cypress/tests/example.cy.js

@@ -1,19 +1,16 @@
 context('Example Acceptance Tests', () => {
   describe('Visit a page', () => {
     beforeEach(() => {
-      // Given a logged in editor
-      cy.viewport('macbook-16');
+      cy.autologin();
       cy.createContent({
         contentType: 'Document',
         contentId: 'document',
         contentTitle: 'Test document',
       });
-      cy.autologin();
     });
 
     it('As editor I can add edit a Page', function () {
-      cy.visit('/document');
-      cy.navigate('/document/edit');
+      cy.visit('/document/edit');
       cy.get('#toolbar-save').click();
     });
   });

cypress/tests/list_item_bookmark.cy.js

@@ -4,7 +4,7 @@ context('Bookmark Acceptance Tests', () => {
       cy.intercept('GET', `/**/*?expand*`).as('content');
       cy.intercept('GET', '/**/Document').as('schema');
       cy.intercept('GET', '/**/@bookmarks').as('bookmarks');
-      
+
       cy.visit('/');
       cy.viewport('macbook-16');
       cy.createContent({
@@ -16,11 +16,11 @@ context('Bookmark Acceptance Tests', () => {
         contentType: 'Document',
         contentId: 'brunch-on-sunday',
         contentTitle: 'Brunch on sunday',
-        path: 'document'
+        path: 'document',
       });
-      // give a logged in editor
+      // give a logged in admin
       cy.autologin();
-      cy.wait('@content')
+      cy.wait('@content');
     });
 
     it('I can add bookmarks via list block', () => {
@@ -31,9 +31,7 @@ context('Bookmark Acceptance Tests', () => {
       cy.addNewBlock('listing');
 
       // select variation
-      cy.get('#field-variation')
-        .click()
-        .type('intranet1{enter}');
+      cy.get('#field-variation').click().type('intranet1{enter}');
 
       // Add Type criteria filter to force a call of getQueryStringResults
       cy.get('.querystring-widget .fields').contains('Add criteria').click();
@@ -52,13 +50,13 @@ context('Bookmark Acceptance Tests', () => {
       cy.get('#toolbar-save').click();
       cy.wait('@content');
 
-      // Bookmark news item in listing 
+      // Bookmark news item in listing
       cy.get('.block.listing button#toolbar-addbookmark').first().click();
 
       // Check if news item is bookmarked
       cy.get('button#toolbar-show-bookmarks').click();
-      cy.wait('@bookmarks')
+      cy.wait('@bookmarks');
       cy.get('.volto-bookmarks-list').contains('Brunch');
     });
   });
-});
+});

mrs.developer.json

@@ -4,6 +4,6 @@
     "package": "@plone/volto",
     "url": "[email protected]:plone/volto.git",
     "https": "https://github.com/plone/volto.git",
-    "tag": "18.4.0"
+    "tag": "18.8.2"
   }
 }

packages/policy/src/index.js

@@ -1,5 +1,5 @@
 import Bookmarking from '@plone-collective/volto-bookmarks/components/Bookmarking';
-import ListingVariationTemplateWithBookmarks from './components/ListingVariationTemplateWithBookmarks';
+import ListingVariationTemplateWithBookmarks from '@plone-collective/volto-bookmarks/components/ListingVariationTemplateWithBookmarks';
 
 const applyConfig = (config) => {
   config.settings.appExtras = [

packages/volto-bookmarks/news/14.feature

@@ -0,0 +1 @@
+Bookmarking in listing and search block. @ksuess

packages/volto-bookmarks/package.json

@@ -26,7 +26,8 @@
     "release-major-alpha": "release-it major --preRelease=alpha",
     "release-alpha": "release-it --preRelease=alpha"
   },
-  "dependencies": {},
+  "dependencies": {
+  },
   "peerDependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0"

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

@@ -1,10 +1,19 @@
 /**
  * Bookmark actions
  */
+import Api from '@plone/volto/helpers/Api/Api';
+import { sortQuerystring } from '../helpers';
 
-import { ADD_BOOKMARK, DEL_BOOKMARK, GET_BOOKMARKS } from '../constants';
+import config from '@plone/volto/registry';
 
-import { sortQuerystring } from '../helpers';
+function _getApiPath() {
+  const { settings } = config;
+  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
+  const apiPath = settings.internalApiPath ?? settings.apiPath;
+
+  const apiPathWithSuffix = `${apiPath}${apiSuffix}`;
+  return apiPathWithSuffix;
+}
 
 /**
  * addBookmark
@@ -13,20 +22,23 @@ import { sortQuerystring } from '../helpers';
  * @param {String} querystring
  * @param {Object} payload
  */
-export function addBookmark(uid, group, querystring = null, payload = {}) {
-  return {
-    type: ADD_BOOKMARK,
-    request: {
-      op: 'post',
-      path: `/@bookmark`,
-      data: {
-        uid,
-        group,
-        queryparams: sortQuerystring(querystring),
-        payload,
-      },
+export async function addBookmark(
+  uid,
+  group,
+  querystring = null,
+  payload = {},
+) {
+  const api = new Api();
+  const path = `${_getApiPath()}/@bookmark`;
+  const result = await api['post'](path, {
+    data: {
+      uid,
+      group,
+      queryparams: sortQuerystring(querystring),
+      payload,
     },
-  };
+  });
+  return result;
 }
 
 /**
@@ -35,31 +47,27 @@ export function addBookmark(uid, group, querystring = null, payload = {}) {
  * @param {String} group
  * @param {Object} queryObjectStringified
  */
-export function deleteBookmark(uid, group, querystring = null) {
-  return {
-    type: DEL_BOOKMARK,
-    request: {
-      op: 'del',
-      path: `/@bookmark`,
-      data: {
-        uid,
-        group,
-        queryparams: sortQuerystring(querystring),
-      },
+export async function deleteBookmark(uid, group, querystring = null) {
+  const api = new Api();
+  const path = `${_getApiPath()}/@bookmark`;
+  const result = await api['del'](path, {
+    data: {
+      uid,
+      group,
+      queryparams: sortQuerystring(querystring),
     },
-  };
+  });
+  return result;
 }
 
 /**
+ * getBookmarks
  * Get list of bookmarks
  * @param {string} group
  */
-export function getAllBookmarks(group) {
-  return {
-    type: GET_BOOKMARKS,
-    request: {
-      op: 'get',
-      path: `/@bookmarks` + (group ? `?group=${group}` : ``),
-    },
-  };
+export async function getBookmarks(group) {
+  const api = new Api();
+  const path = `${_getApiPath()}/@bookmarks` + (group ? `?group=${group}` : ``);
+  const result = await api['get'](path);
+  return result;
 }

packages/volto-bookmarks/src/atoms.js

@@ -1,4 +1,22 @@
+// https://github.com/ipenywis/redux-alternatives/blob/main/src/libraries/jotai.tsx#L27
 import { atom } from 'jotai';
+import { getBookmarks } from './actions';
 
-// Jotai store for bookmarks of the current user
-export const allBookmarksAtom = atom({ items_total: 0, items: [] });
+const bookmarksAtom = atom(null);
+
+export const fetchBookmarksAtom = atom(
+  (get) => get(bookmarksAtom),
+  async (get, set, value) => {
+    if (value === null) {
+      set(bookmarksAtom, null);
+    } else {
+      const result = await getBookmarks(value);
+      set(bookmarksAtom, {
+        items: result || [],
+        items_total: (result || []).length,
+      });
+    }
+  },
+);
+
+export const searchkitQueryAtom = atom(null);

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

@@ -1,17 +1,22 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useSetAtom } from 'jotai';
+import { fetchBookmarksAtom } from '@plone-collective/volto-bookmarks/atoms';
 
-import { getAllBookmarks } from '@plone-collective/volto-bookmarks/actions';
+const AppExtrasBookmarking = () => {
+  const fetchBookmarks = useSetAtom(fetchBookmarksAtom);
 
-const FooComponent = () => {
   const token = useSelector((state) => state.userSession.token);
-  const dispatch = useDispatch();
 
-  React.useEffect(() => {
-    dispatch(getAllBookmarks());
-  }, [dispatch, token]);
+  useEffect(() => {
+    if (token) {
+      fetchBookmarks();
+    } else {
+      fetchBookmarks(null);
+    }
+  }, [fetchBookmarks, token]);
 
   return <React.Fragment></React.Fragment>;
 };
 
-export default FooComponent;
+export default AppExtrasBookmarking;