Merge pull request #359 from avinxshKD/fix/session-restore-local-storage

fix: restore session tabs on reload, remove allgs Set divergence

Author: pradeeban

src/GraphWorkspace.jsx

@@ -4,26 +4,23 @@ import ConfirmModal from './component/modals/ConfirmModal';
 import SearchPanel from './component/SearchPanel';
 import { actionType as T } from './reducer';
 import './graphWorkspace.css';
-// import localStorageManager from './graph-builder/local-storage-manager';
+import localStorageManager from './graph-builder/local-storage-manager';
 import TabBar from './component/TabBar';
 import Graph from './GraphArea';
 
 const GraphComp = (props) => {
     const graphContainerRef = React.useRef();
     const { dispatcher, superState } = props;
-    // const [loadedFromStorage, setLoadedFromStorage] = React.useState(false);
 
-    // The functionality for loading graphs from previous sessions is currently on hold.
-    // useEffect(() => {
-    //     const allSavedGs = localStorageManager.getAllGraphs().map((graphID) => ({
-    //         graphID,
-    //     }));
-    //     dispatcher({
-    //         type: T.ADD_GRAPH_BULK,
-    //         payload: allSavedGs,
-    //     });
-    //     // setLoadedFromStorage(true);
-    // }, []);
+    React.useEffect(() => {
+        const allIDs = localStorageManager.getAllGraphs();
+        const validIDs = allIDs.filter((id) => typeof id === 'string' && id && localStorageManager.get(id) !== null);
+        if (validIDs.length !== allIDs.length) {
+            allIDs.filter((id) => !validIDs.includes(id)).forEach((id) => localStorageManager.remove(id));
+        }
+        if (validIDs.length === 0) return;
+        dispatcher({ type: T.ADD_GRAPH_BULK, payload: validIDs.map((graphID) => ({ graphID })) });
+    }, []);
 
     // Remote server implementation - Not being used.
     // useEffect(() => {

src/component/modals/ProjectDetails.jsx

@@ -39,7 +39,6 @@ const ProjectDetails = ({ superState, dispatcher }) => {
             superState.curGraphInstance.setProjectAuthor(authorName);
             dispatcher({ type: T.SET_EDIT_DETAILS_MODAL, payload: false });
         }
-        localStorageManager.saveAllgs();
         localStorageManager.setAuthorName(authorName);
     };
 

src/graph-builder/local-storage-manager.js

@@ -50,36 +50,10 @@ const localStorageRemove = (key) => {
     }
 };
 
-const getSet = (ALL_GRAPHS) => {
-    if (!localStorageGet(ALL_GRAPHS)) {
-        localStorageSet(ALL_GRAPHS, encodeBase64(JSON.stringify([])));
-    }
-    const raw = localStorageGet(ALL_GRAPHS);
-    if (!raw) return new Set();
-    const parsed = parseStoredJson(raw);
-    if (!Array.isArray(parsed)) {
-        localStorageSet(ALL_GRAPHS, encodeBase64(JSON.stringify([])));
-        return new Set();
-    }
-    return new Set(parsed);
-};
-
 const localStorageManager = {
     ALL_GRAPHS: window.btoa('ALL_GRAPHS'),
     AUTHOR_NAME: window.btoa('AUTHOR_NAME'),
 
-    allgs: getSet(window.btoa('ALL_GRAPHS')),
-
-    saveAllgs() {
-        localStorageSet(this.ALL_GRAPHS, encodeBase64(JSON.stringify(Array.from(this.allgs))));
-    },
-
-    addEmptyIfNot() {
-        if (!localStorageGet(this.ALL_GRAPHS)) {
-            localStorageSet(this.ALL_GRAPHS, encodeBase64(JSON.stringify([])));
-        }
-    },
-
     get(id) {
         const raw = localStorageGet(id);
         if (raw === null) return null;
@@ -100,13 +74,15 @@ const localStorageManager = {
         }
     },
     remove(id) {
-        if (this.allgs.delete(id)) this.saveAllgs();
+        const list = this.getAllGraphs().filter((g) => g !== id);
+        localStorageSet(this.ALL_GRAPHS, encodeBase64(JSON.stringify(list)));
         localStorageRemove(id);
     },
     addGraph(id) {
-        if (this.allgs.has(id)) return;
-        this.allgs.add(id);
-        this.saveAllgs();
+        const list = this.getAllGraphs();
+        if (list.includes(id)) return;
+        list.push(id);
+        localStorageSet(this.ALL_GRAPHS, encodeBase64(JSON.stringify(list)));
     },
     getAllGraphs() {
         const raw = localStorageGet(this.ALL_GRAPHS);
@@ -119,17 +95,10 @@ const localStorageManager = {
         return parsed;
     },
     addToFront(id) {
-        if (this.allgs.has(id)) return;
-        this.allgs.add(id);
-        const raw = localStorageGet(this.ALL_GRAPHS);
-        if (!raw) return;
-        const Garr = parseStoredJson(raw);
-        if (!Array.isArray(Garr)) {
-            this.saveAllgs();
-            return;
-        }
-        Garr.unshift(id);
-        localStorageSet(this.ALL_GRAPHS, encodeBase64(JSON.stringify(Garr)));
+        const list = this.getAllGraphs();
+        if (list.includes(id)) return;
+        list.unshift(id);
+        localStorageSet(this.ALL_GRAPHS, encodeBase64(JSON.stringify(list)));
     },
     getAuthorName() {
         return localStorageGet(this.AUTHOR_NAME) || '';

src/reducer/reducer.js

@@ -109,7 +109,8 @@ const reducer = (state, action) => {
         };
     }
     case T.ADD_GRAPH_BULK: {
-        return { ...state, graphs: [...state.graphs, ...action.payload] };
+        const newGraphs = action.payload.map((g) => ({ ...initialGraphState, ...g }));
+        return { ...state, graphs: [...state.graphs, ...newGraphs], curGraphIndex: 0 };
     }
     case T.SET_CUR_INSTANCE: {
         return { ...state, curGraphInstance: action.payload };