Fix nodes sync (#3210)

Signed-off-by: Ayoub LABIDI <[email protected]>

Author: ayolab

src/components/study-navigation-sync-toggle.tsx

@@ -29,7 +29,7 @@ const StudyNavigationSyncToggle = () => {
             localStorage.setItem(STORAGE_KEYS.SYNC_ENABLED, JSON.stringify(newValue));
             if (newValue) {
                 // Save current values when enabling sync for other tabs
-                localStorage.setItem(STORAGE_KEYS.TREE_NODE, JSON.stringify(currentTreeNode));
+                localStorage.setItem(STORAGE_KEYS.TREE_NODE_UUID, JSON.stringify(currentTreeNode?.id));
                 localStorage.setItem(STORAGE_KEYS.ROOT_NETWORK_UUID, JSON.stringify(currentRootNetworkUuid));
             }
         } catch (err) {

src/constants/study-navigation-sync-constants.ts

@@ -5,8 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-export const BASE_KEYS = {
+export const BASE_NAVIGATION_KEYS = {
     SYNC_ENABLED: 'SYNC_ENABLED',
     ROOT_NETWORK_UUID: 'ROOT_NETWORK_UUID',
-    TREE_NODE: 'TREE_NODE',
+    TREE_NODE_UUID: 'TREE_NODE_UUID',
 };

src/hooks/use-study-navigation-sync.ts

@@ -5,7 +5,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { CurrentTreeNode } from 'components/graph/tree-node.type';
 import { UUID } from 'crypto';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -22,6 +21,7 @@ const useStudyNavigationSync = () => {
     const syncEnabled = useSelector((state: AppState) => state.syncEnabled);
     const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
     const currentTreeNode = useSelector((state: AppState) => state.currentTreeNode);
+    const treeModel = useSelector((state: AppState) => state.networkModificationTreeModel);
     const dispatch = useDispatch();
 
     const STORAGE_KEYS = useStudyScopedNavigationKeys();
@@ -36,20 +36,23 @@ const useStudyNavigationSync = () => {
     );
 
     const updateTreeNode = useCallback(
-        (treeNode: CurrentTreeNode | null) => {
-            if (treeNode !== null && JSON.stringify(treeNode) !== JSON.stringify(currentTreeNode)) {
-                dispatch(setCurrentTreeNode(treeNode));
+        (uuid: UUID | null) => {
+            if (uuid !== null && uuid !== currentTreeNode?.id) {
+                const currentNode = treeModel?.treeNodes.find((node) => node.id === uuid);
+                if (currentNode) {
+                    dispatch(setCurrentTreeNode({ ...currentNode }));
+                }
             }
         },
-        [dispatch, currentTreeNode]
+        [dispatch, currentTreeNode, treeModel]
     );
 
     const keyActions = useMemo(
         () => ({
             [STORAGE_KEYS.ROOT_NETWORK_UUID]: updateRootNetworkUuid,
-            [STORAGE_KEYS.TREE_NODE]: updateTreeNode,
+            [STORAGE_KEYS.TREE_NODE_UUID]: updateTreeNode,
         }),
-        [STORAGE_KEYS.ROOT_NETWORK_UUID, STORAGE_KEYS.TREE_NODE, updateRootNetworkUuid, updateTreeNode]
+        [STORAGE_KEYS.ROOT_NETWORK_UUID, STORAGE_KEYS.TREE_NODE_UUID, updateRootNetworkUuid, updateTreeNode]
     );
 
     const syncFromLocalStorage = useCallback(() => {

src/hooks/use-study-scoped-navigation-keys.ts

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { BASE_KEYS } from 'constants/study-navigation-sync-constants';
+import { BASE_NAVIGATION_KEYS } from 'constants/study-navigation-sync-constants';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
@@ -16,9 +16,9 @@ export const useStudyScopedNavigationKeys = () => {
 
     return useMemo(
         () => ({
-            SYNC_ENABLED: `${BASE_KEYS.SYNC_ENABLED}-${studyUuid}`,
-            ROOT_NETWORK_UUID: `${BASE_KEYS.ROOT_NETWORK_UUID}-${studyUuid}`,
-            TREE_NODE: `${BASE_KEYS.TREE_NODE}-${studyUuid}`,
+            SYNC_ENABLED: `${BASE_NAVIGATION_KEYS.SYNC_ENABLED}-${studyUuid}`,
+            ROOT_NETWORK_UUID: `${BASE_NAVIGATION_KEYS.ROOT_NETWORK_UUID}-${studyUuid}`,
+            TREE_NODE_UUID: `${BASE_NAVIGATION_KEYS.TREE_NODE_UUID}-${studyUuid}`,
         }),
         [studyUuid]
     );

src/hooks/use-sync-navigation-actions.ts

@@ -45,13 +45,13 @@ export const useSyncNavigationActions = () => {
             dispatch(setCurrentTreeNode(treeNode));
             if (syncEnabled) {
                 try {
-                    localStorage.setItem(keys.TREE_NODE, JSON.stringify(treeNode));
+                    localStorage.setItem(keys.TREE_NODE_UUID, JSON.stringify(treeNode.id));
                 } catch (err) {
                     console.warn('Failed to set current tree node in localStorage:', err);
                 }
             }
         },
-        [dispatch, syncEnabled, keys.TREE_NODE]
+        [dispatch, syncEnabled, keys.TREE_NODE_UUID]
     );
 
     return {

src/redux/reducer.ts

@@ -317,6 +317,7 @@ import { NodeInsertModes, RootNetworkIndexationStatus, type StudyUpdateNotificat
 import { mapSpreadsheetEquipments } from '../utils/spreadsheet-equipments-mapper';
 import { Layouts } from 'react-grid-layout';
 import { type DiagramConfigPosition } from '../services/explore';
+import { BASE_NAVIGATION_KEYS } from 'constants/study-navigation-sync-constants';
 
 // Redux state
 export type StudyUpdated = {
@@ -1835,6 +1836,16 @@ function synchCurrentTreeNode(state: Draft<AppState>, nextCurrentNodeUuid?: UUID
     //  we need to overwrite state.currentTreeNode to consider label change for example.
     if (nextCurrentNode) {
         state.currentTreeNode = { ...nextCurrentNode };
+        /**
+         * we need to sync the current tree node uuid to localStorage
+         * to avoid having deleted node selected in other tabs for example.
+         */
+        if (state.syncEnabled) {
+            localStorage.setItem(
+                `${BASE_NAVIGATION_KEYS.TREE_NODE_UUID}-${state.studyUuid}`,
+                JSON.stringify(nextCurrentNode.id)
+            );
+        }
     }
 }
 

src/redux/session-storage/local-storage.ts

@@ -9,7 +9,7 @@ import { DARK_THEME, getComputedLanguage, GsLang, GsTheme, LANG_SYSTEM } from '@
 import { APP_NAME } from '../../utils/config-params';
 import { StudyDisplayMode } from 'components/network-modification.type';
 import { UUID } from 'crypto';
-import { BASE_KEYS } from 'constants/study-navigation-sync-constants';
+import { BASE_NAVIGATION_KEYS } from 'constants/study-navigation-sync-constants';
 
 const LOCAL_STORAGE_THEME_KEY = (APP_NAME + '_THEME').toUpperCase();
 const LOCAL_STORAGE_LANGUAGE_KEY = (APP_NAME + '_LANGUAGE').toUpperCase();
@@ -55,7 +55,7 @@ export function saveLocalStorageToggleOptions(studyUuid: UUID, toggleOptions: St
 }
 
 export function getLocalStorageSyncEnabled(studyUuid: UUID): boolean {
-    const saved = localStorage.getItem(`${BASE_KEYS.SYNC_ENABLED}-${studyUuid}`);
+    const saved = localStorage.getItem(`${BASE_NAVIGATION_KEYS.SYNC_ENABLED}-${studyUuid}`);
     if (saved) {
         try {
             return JSON.parse(saved);