From 48149e1d237c962707126dca64bfb9237e6c7779 Mon Sep 17 00:00:00 2001
From: Honghui-Li-8 <honghuili8@gmail.com>
Date: Wed, 9 Oct 2024 20:51:53 -0700
Subject: [PATCH] serialize, de-serialize, save, and load map state

---
 components/MapEditorCanvas/AddNodeButton.tsx | 109 ++++---------------
 scripts/mapDataSerialization.ts              |  21 ++++
 store/NavMapSlice.ts                         |  11 +-
 3 files changed, 48 insertions(+), 93 deletions(-)
 create mode 100644 scripts/mapDataSerialization.ts

diff --git a/components/MapEditorCanvas/AddNodeButton.tsx b/components/MapEditorCanvas/AddNodeButton.tsx
index f45c279..5909e9a 100644
--- a/components/MapEditorCanvas/AddNodeButton.tsx
+++ b/components/MapEditorCanvas/AddNodeButton.tsx
@@ -7,116 +7,45 @@ import {
   addNode_Dev,
   addEdge,
   removeEdge,
+  loadMapState,
+  NavMapState
 } from "@/store/NavMapSlice";
 import { Coordinate } from "@/constants/Coordinate";
 import { NavNodeType } from "@/constants/NavigationNode";
 import { useState } from "react";
 import { ActionCreators as UndoActionCreators } from 'redux-undo';
+import { serializeMapData, deSerializationMapData } from "@/scripts/mapDataSerialization";
 
 const AddNodeButton = () => {
   const [count, setCount] = useState(0);
+  const [savedMap, setSavedMap] = useState<string>("");
   const dispatch = useDispatch<AppDispatch>();
 
   const curState = useSelector((state: RootState) => state.NavMapState.present);
   const pastState = useSelector((state: RootState) => state.NavMapState.past);
 
-  const handlePress = () => {
-    const id_1: string = "node_1";
-    const id_2: string = "node_2";
-    const id_3: string = "node_3";
-    const id_4: string = "node_4";
-    const id_5: string = "node_5";
-    const coords_1: Coordinate = { x: 0, y: 100 };
-    const coords_2: Coordinate = { x: 200, y: 300 };
-    const coords_3: Coordinate = { x: 120, y: 500 };
-    const coords_4: Coordinate = { x: -120, y: 500 };
-    const coords_5: Coordinate = { x: -200, y: 300 };
-    if (count == 0) {
-      dispatch(addNode_Dev({ id: id_1, coords: coords_1 }));
-      dispatch(addNode_Dev({ id: id_2, coords: coords_2 }));
-      dispatch(addNode_Dev({ id: id_3, coords: coords_3 }));
-      dispatch(addNode_Dev({ id: id_4, coords: coords_4 }));
-      dispatch(addNode_Dev({ id: id_5, coords: coords_5 }));
-      setCount(count + 1);
-    } else if (count == 1) {
-      dispatch(addEdge({ nodeID_1: id_1, nodeID_2: id_2 }));
-      dispatch(addEdge({ nodeID_1: id_2, nodeID_2: id_3 }));
-      dispatch(addEdge({ nodeID_1: id_3, nodeID_2: id_4 }));
-      dispatch(addEdge({ nodeID_1: id_4, nodeID_2: id_5 }));
-      dispatch(addEdge({ nodeID_1: id_5, nodeID_2: id_1 }));
-
-      setCount(count + 1);
-    } else if (count == 2) {
-      dispatch(addEdge({ nodeID_1: id_1, nodeID_2: id_3 }));
-      dispatch(addEdge({ nodeID_1: id_3, nodeID_2: id_5 }));
-      dispatch(addEdge({ nodeID_1: id_5, nodeID_2: id_2 }));
-      dispatch(addEdge({ nodeID_1: id_2, nodeID_2: id_4 }));
-      dispatch(addEdge({ nodeID_1: id_4, nodeID_2: id_1 }));
-
-      setCount(count + 1);
-    } else if (count == 3) {
-      dispatch(removeNode({ key: id_1 }));
-      dispatch(removeNode({ key: id_2 }));
-
-      setCount(count + 1);
-    } else {
-      dispatch(removeNode({ key: id_3 }));
-      dispatch(removeNode({ key: id_4 }));
-      dispatch(removeNode({ key: id_5 }));
-      setCount(0);
-    }
+  const handlePress_s = () => {
+    // console.log("=== original ===");
+    // console.log(curState);
+    // console.log("=== serialized ===");
+    const dataString = serializeMapData(curState);
+    console.log(dataString);
+    setSavedMap(dataString);
   };
 
-  const printState = () => {
-    console.log("===== state history =====");
-    // console.log(curState)
-    console.log("history length: " + pastState.length);
-  };
-
-  const handlePress_2 = () => {
-    const id_1: string = "node_1";
-    const id_2: string = "node_2";
-    const coords_1: Coordinate = { x: 0, y: 100 };
-    const coords_2: Coordinate = { x: 200, y: 300 };
-
-    switch (count) {
-      case 0:
-        dispatch(addNode_Dev({ id: id_1, coords: coords_1 }));
-        setCount(count + 1);
-        printState();
-        break;
-      case 1:
-        dispatch(addNode_Dev({ id: id_2, coords: coords_2 }));
-        setCount(count + 1);
-        printState();
-        break;
-      case 2:
-        dispatch(addEdge({ nodeID_1: id_1, nodeID_2: id_2 }));
-        setCount(count + 1);
-        printState();
-        break;
-      case 3:
-        dispatch(removeNode({ key: id_1 }));
-        setCount(count + 1);
-        printState();
-        break;
-      default:
-        dispatch(removeNode({ key: id_2 }));
-        setCount(0);
-        printState();
-        break;
-    }
+  const handlePress_l = () => {
+    // console.log("=== de-serialized ===");
+    // console.log(deSerializationMapData(savedMap));
+    const newMapState = deSerializationMapData(savedMap);
+    dispatch(loadMapState({newMapState: newMapState}));
+    // console.log("=== loaded ===");
   };
 
-  const func2  = () => {
-    dispatch(UndoActionCreators.undo());
-    printState();
-  }
 
   return (
     <>
-      <Button title="Add Node Tester (star)" onPress={handlePress_2} />
-      <Button title="undo" onPress={func2} />
+      <Button title="save State" onPress={handlePress_s} />
+      <Button title="load state" onPress={handlePress_l} />
     </>
   );
 };
diff --git a/scripts/mapDataSerialization.ts b/scripts/mapDataSerialization.ts
new file mode 100644
index 0000000..096f680
--- /dev/null
+++ b/scripts/mapDataSerialization.ts
@@ -0,0 +1,21 @@
+
+import {NavNodeType} from "@/constants/NavigationNode";
+import {AdjacencyList, NavMapState} from "@/store/NavMapSlice"
+import { Map as Map_I } from 'immutable';
+
+export const serializeMapData = (mapData:NavMapState):string => {
+
+  return JSON.stringify(mapData);
+}
+
+
+export const deSerializationMapData = (mapDataString:string): NavMapState => {
+  let mapDataJson = JSON.parse(mapDataString);
+  let mapData:NavMapState = {
+    nodes: Map_I<string, NavNodeType>(Object.entries(mapDataJson.nodes)),
+    graph: Map_I<string, AdjacencyList>(Object.entries(mapDataJson.graph)),
+    graphModifiedFlag: 0,
+  };
+
+  return mapData;
+}
\ No newline at end of file
diff --git a/store/NavMapSlice.ts b/store/NavMapSlice.ts
index f318f6b..415d7c0 100644
--- a/store/NavMapSlice.ts
+++ b/store/NavMapSlice.ts
@@ -5,13 +5,13 @@ import { NavNodeType } from '@/constants/NavigationNode';
 import { Coordinate } from '@/constants/Coordinate';
 import { pressNode } from './NavStateSlice';
 
-interface AdjacencyList {
+export interface AdjacencyList {
   forwardList: string[],
   backwardList: string[]
 }
 
 // Define the initial state using an Immutable.js Map
-interface NavMapState {
+export interface NavMapState {
   nodes: Map_I<string, NavNodeType>;
   graph: Map_I<string, AdjacencyList>;
   graphModifiedFlag: number;
@@ -198,6 +198,11 @@ const navMapSlice = createSlice({
       state.graphModifiedFlag = (state.graphModifiedFlag + 1) % 100
       // console.log("====== after =====")
       // console.log(state.graph)
+    },
+    loadMapState: (state, action:PayloadAction<{newMapState: NavMapState}>) => {
+      state.nodes  = action.payload.newMapState.nodes;
+      state.graph  = action.payload.newMapState.graph;
+      state.graphModifiedFlag = (state.graphModifiedFlag + 1) % 100
     }
   },
 });
@@ -207,7 +212,7 @@ export const {addNode_Dev, addNode,
               addNodeWithCoord, removeNode, 
               updateNodeCoords, updateNodeCoordsFinal,
               updateNodeProperties,
-              addEdge, removeEdge } = navMapSlice.actions;
+              addEdge, removeEdge, loadMapState } = navMapSlice.actions;
 
 // Export the reducer
 export default navMapSlice.reducer;
\ No newline at end of file