debugging from upload flow

space_flow/src/contexts/tabsContext.tsx

@@ -1,18 +1,23 @@
 import { createContext, useEffect, useState, useRef } from "react";
 
-type flow={name:string,id:string,data:any,chat:Array<{message:string,isSend:boolean}>}
+type flow = {
+	name: string;
+	id: string;
+	data: any;
+	chat: Array<{ message: string; isSend: boolean }>;
+};
 
 type TabsContextType = {
 	tabIndex: number;
 	setTabIndex: (index: number) => void;
-    flows:Array<flow>
+	flows: Array<flow>;
 	removeFlow: (id: string) => void;
 	addFlow: (flowData?: any) => void;
 	updateFlow: (newFlow: flow) => void;
-    incrementNodeId:()=>number,
+	incrementNodeId: () => number;
-    downloadFlow:()=>void,
+	downloadFlow: () => void;
-    uploadFlow:()=>void
+	uploadFlow: () => void;
-}
+};
 
 const TabsContextInitialValue = {
 	tabIndex: 0,
@@ -23,17 +28,18 @@ const TabsContextInitialValue = {
 	updateFlow: (newFlow: flow) => {},
 	incrementNodeId: () => 0,
 	downloadFlow: () => {},
-    uploadFlow:()=>{}
+	uploadFlow: () => {},
+};
 
-}
+export const TabsContext = createContext<TabsContextType>(
+	TabsContextInitialValue
+);
 
-export const TabsContext = createContext<TabsContextType>(TabsContextInitialValue)
+let _ = require("lodash");
-
-let _ = require('lodash');
 
 export function TabsProvider({ children }) {
-    const [tabIndex,setTabIndex] = useState(0)
+	const [tabIndex, setTabIndex] = useState(0);
-    const [flows,setFlows] = useState<Array<flow>>([])
+	const [flows, setFlows] = useState<Array<flow>>([]);
 	const [id, setId] = useState(0);
 
 	const newNodeId = useRef(0);
@@ -43,11 +49,14 @@ export function TabsProvider({children}){
 	}
 	useEffect(() => {
 		if (flows.length !== 0)
-            window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id, nodeId: newNodeId.current}));
+			window.localStorage.setItem(
+				"tabsData",
+				JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
+			);
 	}, [flows, id, tabIndex, newNodeId]);
 
 	useEffect(() => {
-        let cookie = window.localStorage.getItem('tabsData');
+		let cookie = window.localStorage.getItem("tabsData");
 		if (cookie) {
 			let cookieObject = JSON.parse(cookie);
 			setTabIndex(cookieObject.tabIndex);
@@ -55,32 +64,36 @@ export function TabsProvider({children}){
 			setId(cookieObject.id);
 			newNodeId.current = cookieObject.nodeId;
 		}
-    }, [])
+	}, []);
 
 	function downloadFlow() {
-        const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(flows[tabIndex]))}`
+		const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-        const link = document.createElement('a')
+			JSON.stringify(flows[tabIndex])
-        link.href = jsonString
+		)}`;
-        link.download = `${flows[tabIndex].name}.json`
+		const link = document.createElement("a");
-        link.click()
+		link.href = jsonString;
+		link.download = `${flows[tabIndex].name}.json`;
+		link.click();
 	}
 	function uploadFlow() {
-        const input = document.createElement('input')
+		const input = document.createElement("input");
-        input.type='file'
+		input.type = "file";
 		input.onchange = (e: Event) => {
 			if ((e.target as HTMLInputElement).files[0].type === "application/json") {
 				const file = (e.target as HTMLInputElement).files[0];
-                file.text().then(text =>addFlow(JSON.parse(text))) 
+				file.text().then((text) => {
+                    console.log(JSON.parse(text),"json from upload")
+					addFlow(JSON.parse(text));
+				});
 			}
-        }
+		};
-        input.click()
+		input.click();
-        
 	}
 
 	function removeFlow(id: string) {
-        setFlows(prevState=>{
+		setFlows((prevState) => {
 			const newFlows = [...prevState];
-            const index = newFlows.findIndex(flow=>flow.id===id);
+			const index = newFlows.findIndex((flow) => flow.id === id);
 			if (index >= 0) {
 				if (index === tabIndex) {
 					setTabIndex(flows.length - 2);
@@ -88,40 +101,56 @@ export function TabsProvider({children}){
 				} else {
 					let flowId = flows[tabIndex].id;
 					newFlows.splice(index, 1);
-                    setTabIndex(newFlows.findIndex(flow=>flow.id === flowId));
+					setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
 				}
-                
 			}
 			return newFlows;
 		});
 	}
 	function addFlow(flowData?: flow) {
-        const data = flowData?.data?flowData:null
+		const data = flowData?.data ? flowData : null;
-        let newFlow: flow = {name:flowData?flowData.name:"flow"+id, id: id.toString(), data,chat:flowData?flowData.chat:[]}
+		let newFlow: flow = {
+			name: flowData ? flowData.name : "flow" + id,
+			id: id.toString(),
+			data,
+			chat: flowData ? flowData.chat : [],
+		};
 		setId((old) => old + 1);
-        setFlows(prevState => {
+		setFlows((prevState) => {
 			const newFlows = [...prevState, newFlow];
 			return newFlows;
 		});
 		setTabIndex(flows.length);
 	}
 	function updateFlow(newFlow: flow) {
-        console.log(newFlow)
+		console.log(newFlow);
-        setFlows(prevState=>{
+		setFlows((prevState) => {
 			const newFlows = [...prevState];
-            const index = newFlows.findIndex(flow=>flow.id===newFlow.id)
+			const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
 			if (index !== -1) {
-                newFlows[index].data = newFlow.data
+				newFlows[index].data = newFlow.data;
-                newFlows[index].name = newFlow.name
+				newFlows[index].name = newFlow.name;
-                newFlows[index].chat = newFlow.chat
+				newFlows[index].chat = newFlow.chat;
 			}
 			return newFlows;
 		});
 	}
 
 	return (
-        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow, downloadFlow, uploadFlow}}>
+		<TabsContext.Provider
+			value={{
+				tabIndex,
+				setTabIndex,
+				flows,
+				incrementNodeId,
+				removeFlow,
+				addFlow,
+				updateFlow,
+				downloadFlow,
+				uploadFlow,
+			}}
+		>
 			{children}
 		</TabsContext.Provider>
-    )
+	);
 }