debugging from upload flow

space_flow/src/contexts/tabsContext.tsx

@@ -1,127 +1,156 @@
 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={
+type TabsContextType = {
-    tabIndex:number;
+	tabIndex: number;
-    setTabIndex:(index:number)=>void;
+	setTabIndex: (index: number) => void;
-    flows:Array<flow>
+	flows: Array<flow>;
-    removeFlow:(id:string)=>void;
+	removeFlow: (id: string) => void;
-    addFlow:(flowData?:any)=>void;
+	addFlow: (flowData?: any) => void;
-    updateFlow:(newFlow:flow)=>void;
+	updateFlow: (newFlow: flow) => void;
-    incrementNodeId:()=>number,
+	incrementNodeId: () => number;
-    downloadFlow:()=>void,
+	downloadFlow: () => void;
-    uploadFlow:()=>void
+	uploadFlow: () => void;
-}
+};
 
 const TabsContextInitialValue = {
-    tabIndex : 0,
+	tabIndex: 0,
-    setTabIndex:(index:number)=>{},
+	setTabIndex: (index: number) => {},
-    flows:[],
+	flows: [],
-    removeFlow:(id:string)=>{},
+	removeFlow: (id: string) => {},
-    addFlow:(flowData?:any)=>{},
+	addFlow: (flowData?: any) => {},
-    updateFlow:(newFlow:flow)=>{},
+	updateFlow: (newFlow: flow) => {},
-    incrementNodeId:()=>0,
+	incrementNodeId: () => 0,
-    downloadFlow:()=>{},
+	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);
-export function TabsProvider({children}){
+	const [flows, setFlows] = useState<Array<flow>>([]);
-    const [tabIndex,setTabIndex] = useState(0)
-    const [flows,setFlows] = useState<Array<flow>>([])
 	const [id, setId] = useState(0);
 
 	const newNodeId = useRef(0);
-    function incrementNodeId(){
+	function incrementNodeId() {
 		newNodeId.current = newNodeId.current + 1;
 		return newNodeId.current;
 	}
 	useEffect(() => {
-        if(flows.length !== 0)
+		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){
+		if (cookie) {
 			let cookieObject = JSON.parse(cookie);
 			setTabIndex(cookieObject.tabIndex);
 			setFlows(cookieObject.flows);
 			setId(cookieObject.id);
-            newNodeId.current= cookieObject.nodeId;
+			newNodeId.current = cookieObject.nodeId;
 		}
-    }, [])
+	}, []);
 
-    function downloadFlow(){
+	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(){
+	function uploadFlow() {
-        const input = document.createElement('input')
+		const input = document.createElement("input");
-        input.type='file'
+		input.type = "file";
-        input.onchange = (e:Event)=>{
+		input.onchange = (e: Event) => {
-            if((e.target as HTMLInputElement).files[0].type === "application/json"){
+			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){
+	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 >= 0) {
-                if(index===tabIndex){
+				if (index === tabIndex) {
-                    setTabIndex(flows.length-2);
+					setTabIndex(flows.length - 2);
-                    newFlows.splice(index,1);
+					newFlows.splice(index, 1);
 				} else {
 					let flowId = flows[tabIndex].id;
-                    newFlows.splice(index,1);
+					newFlows.splice(index, 1);
-                    setTabIndex(newFlows.findIndex(flow=>flow.id === flowId));
+					setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
 				}
-                
 			}
 			return newFlows;
 		});
 	}
-    function addFlow(flowData?:flow) {
+	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 = {
-        setId((old) => old+1);
+			name: flowData ? flowData.name : "flow" + id,
-        setFlows(prevState => {
+			id: id.toString(),
+			data,
+			chat: flowData ? flowData.chat : [],
+		};
+		setId((old) => old + 1);
+		setFlows((prevState) => {
 			const newFlows = [...prevState, newFlow];
 			return newFlows;
 		});
 		setTabIndex(flows.length);
 	}
-    function updateFlow(newFlow:flow){
+	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){
+			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(
+	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>
-    )
+	);
 }