From c148353b166c341bed9f1b9d25ca8554276d10a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Katja=20Su=CC=88ss?= Date: Wed, 23 Oct 2024 13:53:43 +0200 Subject: [PATCH] appExtras : FetchTooltipTerms always, CalculateTexts only if location should get tooltips --- .../src/components/Tooltips.jsx | 46 ++++++++++--------- .../__snapshots__/Tooltips.test.js.snap | 12 ----- packages/volto-slate-glossary/src/index.js | 9 ++++ packages/volto-slate-glossary/src/utils.js | 35 ++++++++++---- 4 files changed, 59 insertions(+), 43 deletions(-) diff --git a/packages/volto-slate-glossary/src/components/Tooltips.jsx b/packages/volto-slate-glossary/src/components/Tooltips.jsx index 5c13c4c..0c39260 100644 --- a/packages/volto-slate-glossary/src/components/Tooltips.jsx +++ b/packages/volto-slate-glossary/src/components/Tooltips.jsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import jwtDecode from 'jwt-decode'; -import { atom, useSetAtom } from 'jotai'; +import { useSetAtom } from 'jotai'; import _ from 'lodash'; import { Text } from 'slate'; import { v5 as uuidv5 } from 'uuid'; @@ -9,23 +9,11 @@ import { Popup } from 'semantic-ui-react'; import { getUser } from '@plone/volto/actions'; import { getTooltipTerms } from '../actions'; import { MY_NAMESPACE } from '../utils'; +import { tooltippedTextsAtom } from '../utils'; import config from '@plone/volto/registry'; -// jotai store for tooltip enhanced slate leafs -export const tooltippedTextsAtom = atom({}); - -const Tooltips = () => { - return ( - <> - - - - ); -}; - -const Fetch = () => { +export const FetchTooltipTerms = ({ token }) => { const dispatch = useDispatch(); - const token = useSelector((state) => state.userSession?.token); useEffect(() => { dispatch(getTooltipTerms()); @@ -41,23 +29,36 @@ const Fetch = () => { return
; }; -const CalculateTexts = () => { +const Tooltips = (props) => { + return ( + <> + + + ); +}; + +const CalculateTexts = ({ pathname }) => { const glossaryterms = useSelector( (state) => state.glossarytooltipterms?.result?.items, ); const blocks_layout = useSelector( - (state) => state.content.data?.blocks_layout, + (state) => state.content?.data?.blocks_layout, ); - const blocks = useSelector((state) => state.content.data?.blocks); + const blocks = useSelector((state) => state.content?.data?.blocks); + + // We can't use atom Family as pathname is not known here. const setTooltippedTexts = useSetAtom(tooltippedTextsAtom); useEffect(() => { if (glossaryterms) { let texts = calculateTexts(blocks, blocks_layout, glossaryterms); - // Update jotai atom - setTooltippedTexts(texts); + // Store texts and pathname in atom + setTooltippedTexts({ pathname: pathname, texts: texts }); + // return () => { + // setTooltippedTexts({ pathname: undefined, texts: [] }); + // }; } - }, [blocks, blocks_layout, glossaryterms, setTooltippedTexts]); + }, [blocks, blocks_layout, glossaryterms, pathname, setTooltippedTexts]); return
; }; @@ -238,6 +239,9 @@ const calculateTexts = (blocks, blocks_layout, glossaryterms) => { return; } let key = uuidv5(str, MY_NAMESPACE); + if (Object.keys(result).includes(key)) { + return; + } let [value, newTerms] = enhanceTextWithTooltips( str, remainingGlossaryterms, diff --git a/packages/volto-slate-glossary/src/components/__snapshots__/Tooltips.test.js.snap b/packages/volto-slate-glossary/src/components/__snapshots__/Tooltips.test.js.snap index cb2c9a3..e85156c 100644 --- a/packages/volto-slate-glossary/src/components/__snapshots__/Tooltips.test.js.snap +++ b/packages/volto-slate-glossary/src/components/__snapshots__/Tooltips.test.js.snap @@ -120,9 +120,6 @@ exports[`Tooltips are generated for all occurrences 1`] = ` id="Portal" /> -
@@ -226,9 +223,6 @@ exports[`Tooltips are generated only case sensitive 1`] = ` id="Portal" />
-
@@ -337,9 +331,6 @@ exports[`Tooltips are generated only for first occurrences per page 1`] = ` id="Portal" />
-
@@ -424,9 +415,6 @@ exports[`Tooltips divers – NO tooltips if route doesn't match configuration 1 exports[`Tooltips divers – component Tooltips is rendered in AppExtras 1`] = `
-
diff --git a/packages/volto-slate-glossary/src/index.js b/packages/volto-slate-glossary/src/index.js index 3220dab..6568c9d 100644 --- a/packages/volto-slate-glossary/src/index.js +++ b/packages/volto-slate-glossary/src/index.js @@ -2,6 +2,7 @@ import GlossaryView from './components/GlossaryView'; import TermView from './components/TermView'; import { glossarytermsReducer, glossarytooltiptermsReducer } from './reducers'; import { TextWithGlossaryTooltips } from './utils'; +import { FetchTooltipTerms } from './components/Tooltips'; const applyConfig = (config) => { config.settings.glossary = { @@ -13,6 +14,14 @@ const applyConfig = (config) => { text: ({ children }) => , }; + config.settings.appExtras = [ + ...config.settings.appExtras, + { + match: '/', + component: FetchTooltipTerms, + }, + ]; + config.views = { ...config.views, contentTypesViews: { diff --git a/packages/volto-slate-glossary/src/utils.js b/packages/volto-slate-glossary/src/utils.js index 5214203..6b66f00 100644 --- a/packages/volto-slate-glossary/src/utils.js +++ b/packages/volto-slate-glossary/src/utils.js @@ -1,29 +1,41 @@ import { useSelector } from 'react-redux'; import { v5 as uuidv5 } from 'uuid'; -import { useAtomValue } from 'jotai'; -import { tooltippedTextsAtom } from './components/Tooltips'; +import { atom, useAtomValue } from 'jotai'; + +// Jotai store for tooltip enhanced slate leafs +export const tooltippedTextsAtom = atom({ pathname: undefined, texts: [] }); export const MY_NAMESPACE = '4549d0a3-5fc2-4a94-bf96-eb7ddf5363a4'; export const TextWithGlossaryTooltips = ({ text }) => { - // Read jotai atom and return value with the appropriate key. + const { pathname } = useSelector((state) => state.router?.location); + + // Read Jotai atom and return value with the appropriate key. const tooltippedTexts = useAtomValue(tooltippedTextsAtom); - const location = useSelector((state) => state.router?.location); + const currentuser = useSelector((state) => state.users?.user); + + /** + * Skip enhancing with tooltip markup for some conditions + */ + + // No tooltips if pathname is not configured to have tooltips + if (!tooltippedTexts?.pathname || tooltippedTexts?.pathname !== pathname) { + return text; + } // No tooltips if user opted out - const currentuser = useSelector((state) => state.users?.user); const showGlossarytooltipsUser = currentuser?.glossarytooltips ?? true; if (!showGlossarytooltipsUser) { return text; } // No tooltips on home page, in edit mode, and add mode - if (location === undefined) { + if (pathname === undefined) { return text; } - const isEditMode = location.pathname.slice(-5) === '/edit'; - if (isEditMode || location.pathname === '/' || !__CLIENT__) { + const isEditMode = pathname.slice(-5) === '/edit'; + if (isEditMode || pathname === '/' || !__CLIENT__) { return text; } @@ -37,6 +49,9 @@ export const TextWithGlossaryTooltips = ({ text }) => { return text; } let uid = uuidv5(text, MY_NAMESPACE); - // No match in store if this route is not configured for tooltips. Return text unchanged. - return tooltippedTexts[uid] ? tooltippedTexts[uid] : text; + // No match in store if this location is not configured for tooltips. Return text unchanged. + const newText = Object.keys(tooltippedTexts?.texts).includes(uid) + ? tooltippedTexts.texts[uid] + : text; + return newText; };