changed node id, bug: not displaying changes

space_flow/src/contexts/tabsContext.tsx

@@ -9,6 +9,8 @@ type TabsContextType={
     removeFlow:(id:string)=>void;
     addFlow:()=>void;
     updateFlow:(newFlow:flow)=>void;
+    setNodeId:(newState:any)=>void;
+    nodeId:number;
 }
 
 const TabsContextInitialValue = {
@@ -17,7 +19,9 @@ const TabsContextInitialValue = {
     flows:[],
     removeFlow:(id:string)=>{},
     addFlow:()=>{},
-    updateFlow:(newFlow:flow)=>{}
+    updateFlow:(newFlow:flow)=>{},
+    setNodeId:(newState:any)=>{},
+    nodeId:0,
     
 
 }
@@ -28,10 +32,11 @@ export function TabsProvider({children}){
     const [tabIndex,setTabIndex] = useState(0)
     const [flows,setFlows] = useState<Array<flow>>([])
     const [id, setId] = useState(0);
+    const [nodeId, setNodeId] = useState(0);
     useEffect(() => {
         if(flows.length !== 0)
-            window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id}));
-    }, [flows, id, tabIndex]);
+            window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id, nodeId}));
+    }, [flows, id, nodeId, tabIndex]);
 
     useEffect(() => {
         let cookie = window.localStorage.getItem('tabsData');
@@ -40,6 +45,7 @@ export function TabsProvider({children}){
             setTabIndex(cookieObject.tabIndex);
             setFlows(cookieObject.flows)
             setId(cookieObject.id)
+            setNodeId(cookieObject.nodeId)
         }
     }, [])
     
@@ -83,7 +89,7 @@ export function TabsProvider({children}){
     }
 
     return(
-        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,removeFlow,addFlow,updateFlow}}>
+        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,setNodeId, nodeId,removeFlow,addFlow,updateFlow}}>
             {children}
         </TabsContext.Provider>
     )

space_flow/src/contexts/typesContext.tsx

@@ -8,6 +8,7 @@ type typesContextType=
     deleteNode:(idx:number)=>void;
     types: {};
     setTypes:(newState:{})=>void;
+
 }
 
 const initialValue= {

space_flow/src/pages/FlowPage/index.tsx

@@ -32,11 +32,16 @@ const nodeTypes = {
 var _ = require("lodash");
 
 export default function FlowPage({ flow }) {
-  const { updateFlow } = useContext(TabsContext);
-  const { types, reactFlowInstance, setReactFlowInstance } = useContext(typesContext);
+  const { updateFlow, nodeId, setNodeId } = useContext(TabsContext);
+  const { types, reactFlowInstance, setReactFlowInstance } =
+    useContext(typesContext);
   const reactFlowWrapper = useRef(null);
 
-  const getId = () => `dndnode_${_.uniqueId()}`;
+  const getId = () => {
+    console.log(nodeId);
+    setNodeId(old => old + 1);
+    return `dndnode_${nodeId}`;
+  };
 
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
   const { setErrorData } = useContext(alertContext);