Fix #9686 duplicate fonts in Geonode MapStore Client - GeoStory Edit …

…Mode (#9759)

web/client/actions/geostory.js

@@ -167,11 +167,12 @@ export const toggleSettingsPanel = (withSave = false) => ({ type: TOGGLE_SETTING
  * @param {object} element the object to update
  * @param {string|object} [mode="replace"] "merge" or "replace", if "merge", the object passed as element will be merged with the original one (if present and if it is an object)
  */
-export const update = (path, element, mode = "replace") => ({
+export const update = (path, element, mode = "replace", options) => ({
     type: UPDATE,
     path,
     element,
-    mode
+    mode,
+    options
 });
 /**
  * updates the current page with current value of sectionId (future can be extended adding other info about current content).

web/client/plugins/GeoStory.jsx

@@ -71,7 +71,8 @@ const GeoStory = ({
     }, []);
 
     useEffect(() => {
-        onUpdate("settings.theme.fontFamilies", fontFamilies, "merge");
+        // Appended options in actions for key handling to avoid fonts duplication
+        onUpdate("settings.theme.fontFamilies", fontFamilies, "merge", {uniqueByKey: "family"});
         // we need to store settings for media editor
         // so we could use them later when we open the media editor plugin
         if (mediaEditorSettings) {

web/client/reducers/__tests__/geostory-test.js

@@ -121,6 +121,22 @@ describe('geostory reducer', () => {
     });
     describe('update contents', () => {
         const STATE_STORY = geostory(undefined, setCurrentStory(TEST_STORY));
+        it('should handle UPDATE action with fontFamilies and mode merge', () => {
+            const initialState = {
+                currentStory: {
+                    fontFamilies: ['Arial', 'Helvetica']
+                }
+            };
+            const action = {
+                type: 'UPDATE',
+                path: 'fontFamilies',
+                mode: 'merge',
+                element: ['Times New Roman', 'Arial', 'Verdana'],
+                options: { uniqueByKey: 'id' }
+            };
+            const newState = geostory(initialState, action);
+            expect(newState).toBe(initialState);
+        });
         it('update with index path', () => {
             const TEST_CONTENT = "<h1>UNIT TEST CONTENT</h1>";
             const pathToContentHtml = `sections[0].contents[0].html`;

web/client/reducers/geostory.js

@@ -306,7 +306,7 @@ export default (state = INITIAL_STATE, action) => {
         )(state);
     }
     case UPDATE: {
-        const { path: rawPath, mode } = action;
+        const { path: rawPath, mode, options } = action;
         let { element: newElement } = action;
         const path = getEffectivePath(`currentStory.${rawPath}`, state);
         const oldElement = get(state, path);
@@ -317,7 +317,8 @@ export default (state = INITIAL_STATE, action) => {
         }
 
         if (isArray(oldElement) && isArray(newElement) && mode === "merge") {
-            newElement = [ ...oldElement, ...newElement ];
+            // check for options to filter unique options
+            newElement = (options?.uniqueByKey) ? uniqBy([ ...oldElement, ...newElement ], options.uniqueByKey) : [...oldElement, ...newElement ];
         }
         return set(path, newElement, state);
     }