Switch to custom services

src/actions/glossary.js

@@ -0,0 +1,21 @@
+import { GET_GLOSSARYTERMS, GET_TOOLTIPTERMS } from '../constants/ActionTypes';
+
+export function getGlossaryTerms() {
+  return {
+    type: GET_GLOSSARYTERMS,
+    request: {
+      op: 'get',
+      path: '/@glossary_terms',
+    },
+  };
+}
+
+export function getTooltipTerms() {
+  return {
+    type: GET_TOOLTIPTERMS,
+    request: {
+      op: 'get',
+      path: '/@tooltip_terms',
+    },
+  };
+}

src/actions/index.js

@@ -0,0 +1,3 @@
+import { getGlossaryTerms, getTooltipTerms } from './glossary';
+
+export { getGlossaryTerms, getTooltipTerms };

src/components/Tooltips.jsx

@@ -1,27 +1,15 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import jwtDecode from 'jwt-decode';
-import { getUser, searchContent } from '@plone/volto/actions';
+import { getUser } from '@plone/volto/actions';
+import { getTooltipTerms } from '../actions';
 
 const Tooltips = () => {
   const dispatch = useDispatch();
   const token = useSelector((state) => state.userSession?.token);
 
   useEffect(() => {
-    dispatch(
-      searchContent(
-        '/',
-        {
-          portal_type: ['Term'],
-          review_state: ['published'],
-          sort_on: 'id',
-          sort_order: 'descending',
-          b_size: 1000,
-          fullobjects: true,
-        },
-        'glossaryterms',
-      ),
-    );
+    dispatch(getTooltipTerms());
   }, [dispatch]);
 
   React.useEffect(() => {

src/constants/ActionTypes.js

@@ -0,0 +1,2 @@
+export const GET_GLOSSARYTERMS = 'GET_GLOSSARYTERMS';
+export const GET_TOOLTIPTERMS = 'GET_TOOLTIPTERMS';

src/index.js

@@ -1,44 +1,11 @@
 import { serializeNodes } from './utils';
 import GlossaryView from './components/GlossaryView';
 import TermView from './components/TermView';
-import { searchContent } from '@plone/volto/actions';
-
-const searchoptions = [
-  '/',
-  {
-    portal_type: ['Term'],
-    review_state: ['published'],
-    sort_on: 'id',
-    sort_order: 'descending',
-    b_size: 1000,
-  },
-  'glossaryterms',
-];
+import { glossarytermsReducer, glossarytooltiptermsReducer } from './reducers';
 
 // TODO restrict tooltips to paths and portal_types
 
 export default (config) => {
-  config.settings.asyncPropsExtenders = [
-    ...(config.settings.asyncPropsExtenders ?? []),
-    {
-      path: '/',
-      extend: (dispatchActions) => {
-        if (
-          dispatchActions.filter(
-            (asyncAction) => asyncAction.key === 'glossaryterms',
-          ).length === 0
-        ) {
-          dispatchActions.push({
-            key: 'glossaryterms',
-            promise: ({ location, store: { dispatch } }) =>
-              __SERVER__ && dispatch(searchContent(searchoptions)),
-          });
-        }
-        return dispatchActions;
-      },
-    },
-  ];
-
   config.views = {
     ...config.views,
     contentTypesViews: {
@@ -48,6 +15,12 @@ export default (config) => {
     },
   };
 
+  config.addonReducers = {
+    ...config.addonReducers,
+    glossaryterms: glossarytermsReducer,
+    glossarytooltipterms: glossarytooltiptermsReducer,
+  };
+
   return config;
 };
 

src/reducers/index.js

@@ -0,0 +1,61 @@
+import { GET_GLOSSARYTERMS, GET_TOOLTIPTERMS } from '../constants/ActionTypes';
+
+const initialState = {
+  error: null,
+  hasErrror: false,
+  result: [],
+  loadingResults: false,
+};
+
+export const glossarytermsReducer = (state = initialState, action = {}) => {
+  switch (action.type) {
+    case `${GET_GLOSSARYTERMS}_PENDING`:
+      return {
+        ...state,
+        loadingResults: true,
+      };
+    case `${GET_GLOSSARYTERMS}_SUCCESS`:
+      return {
+        ...state,
+        result: action.result,
+        loadingResults: false,
+      };
+    case `${GET_GLOSSARYTERMS}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        hasError: true,
+        loadingResults: false,
+      };
+    default:
+      return state;
+  }
+};
+
+export const glossarytooltiptermsReducer = (
+  state = initialState,
+  action = {},
+) => {
+  switch (action.type) {
+    case `${GET_TOOLTIPTERMS}_PENDING`:
+      return {
+        ...state,
+        loadingResults: true,
+      };
+    case `${GET_TOOLTIPTERMS}_SUCCESS`:
+      return {
+        ...state,
+        result: action.result,
+        loadingResults: false,
+      };
+    case `${GET_TOOLTIPTERMS}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        hasError: true,
+        loadingResults: false,
+      };
+    default:
+      return state;
+  }
+};

src/utils.js

@@ -4,7 +4,6 @@
  * See https://community.plone.org/t/slate-rendering/13787/4
  */
 
-import { concat } from 'lodash';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { flatten, isEqual } from 'lodash';
@@ -15,49 +14,29 @@ import { Element, Leaf } from 'volto-slate/editor/render';
 
 const TextWithGlossaryTooltips = ({ text }) => {
   const glossaryterms = useSelector(
-    (state) => state.search.subrequests.glossaryterms?.items,
+    (state) => state.glossarytooltipterms?.result?.items,
   );
 
   // no tooltips if user opted out
   const currentuser = useSelector((state) => state.users?.user);
   const glossarytooltips = currentuser?.glossarytooltips ?? true;
-
   if (!glossarytooltips) {
     return <span>{text}</span>;
   }
 
-  let variations = [];
-  if (glossaryterms !== undefined) {
-    glossaryterms.forEach((el) => {
-      let vrs = el.variations;
-      variations.push({
-        title: el.title,
-        description: el.description,
-        definition: el.definition,
-      });
-      vrs.forEach((vr) => {
-        variations.push({
-          title: vr,
-          description: el.description,
-          definition: el.definition,
-        });
-      });
-    });
-  }
-
   let result = [{ type: 'text', val: text }];
   if (glossaryterms !== undefined) {
-    variations.forEach((term) => {
+    glossaryterms.forEach((term) => {
       result = result.map((chunk) => {
         if (chunk.type === 'text') {
-          let myre = `\\b${term.title}\\b`;
+          let myre = `\\b${term.term}\\b`;
           let regExpTerm = new RegExp(myre);
           let splittedtext = chunk.val.split(regExpTerm).reverse();
           chunk = [{ type: 'text', val: splittedtext.pop() }];
           while (splittedtext.length > 0) {
             chunk.push({
-              type: 'popup',
-              val: term.title,
+              type: 'glossarytermtooltip',
+              val: term.term,
             });
             chunk.push({ type: 'text', val: splittedtext.pop() });
           }
@@ -68,24 +47,40 @@ const TextWithGlossaryTooltips = ({ text }) => {
     });
   }
   result = flatten(result);
+  console.debug('result', result);
 
   return result.map((el, j) => {
     if (el.type === 'text') {
       return <span key={j}>{el.val}</span>;
     } else {
-      let idx = variations.findIndex((variation) => variation.title === el.val);
-      let descr =
-        variations[idx].definition?.data || variations[idx].description;
+      let idx = glossaryterms.findIndex((variant) => variant.term === el.val);
+      console.debug('idx', el, idx, glossaryterms[idx]);
+      let definition = glossaryterms[idx]?.definition || '';
+      // TODO convert definition to ul
+      switch (definition.length) {
+        case 0:
+          definition = '';
+          break;
+        case 1:
+          definition = definition[0];
+          break;
+        default:
+          let foo = definition.map((el) => `<li>${el}</li>`).join('');
+          definition = `<ol>${foo}</ol>`;
+      }
+      console.debug('definition', definition);
       return (
         <Popup
           position="bottom left"
           trigger={<span className="glossarytooltip">{el.val}</span>}
           key={j}
+          className="tooltip"
         >
           <Popup.Content>
             <div
+              className="tooltip_content"
               dangerouslySetInnerHTML={{
-                __html: descr,
+                __html: definition,
               }}
             />
           </Popup.Content>