From 8ea68be22b4c9c1d63c27484692c2390c2da3026 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 12:59:38 -0300 Subject: [PATCH] debugging from upload flow --- space_flow/src/contexts/tabsContext.tsx | 269 +++++++++++++----------- 1 file changed, 149 insertions(+), 120 deletions(-) diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index e8e15d0a0..86bf32e22 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/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={ - tabIndex:number; - setTabIndex:(index:number)=>void; - flows:Array - removeFlow:(id:string)=>void; - addFlow:(flowData?:any)=>void; - updateFlow:(newFlow:flow)=>void; - incrementNodeId:()=>number, - downloadFlow:()=>void, - uploadFlow:()=>void -} +type TabsContextType = { + tabIndex: number; + setTabIndex: (index: number) => void; + flows: Array; + removeFlow: (id: string) => void; + addFlow: (flowData?: any) => void; + updateFlow: (newFlow: flow) => void; + incrementNodeId: () => number; + downloadFlow: () => void; + uploadFlow: () => void; +}; const TabsContextInitialValue = { - tabIndex : 0, - setTabIndex:(index:number)=>{}, - flows:[], - removeFlow:(id:string)=>{}, - addFlow:(flowData?:any)=>{}, - updateFlow:(newFlow:flow)=>{}, - incrementNodeId:()=>0, - downloadFlow:()=>{}, - uploadFlow:()=>{} + tabIndex: 0, + setTabIndex: (index: number) => {}, + flows: [], + removeFlow: (id: string) => {}, + addFlow: (flowData?: any) => {}, + updateFlow: (newFlow: flow) => {}, + incrementNodeId: () => 0, + downloadFlow: () => {}, + uploadFlow: () => {}, +}; -} - -export const TabsContext = createContext(TabsContextInitialValue) - -let _ = require('lodash'); - -export function TabsProvider({children}){ - const [tabIndex,setTabIndex] = useState(0) - const [flows,setFlows] = useState>([]) - const [id, setId] = useState(0); - - const newNodeId = useRef(0); - function incrementNodeId(){ - newNodeId.current = newNodeId.current + 1; - return newNodeId.current; - } - useEffect(() => { - if(flows.length !== 0) - window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id, nodeId: newNodeId.current})); - }, [flows, id, tabIndex, newNodeId]); - - useEffect(() => { - let cookie = window.localStorage.getItem('tabsData'); - if(cookie){ - let cookieObject = JSON.parse(cookie); - setTabIndex(cookieObject.tabIndex); - setFlows(cookieObject.flows); - setId(cookieObject.id); - newNodeId.current= cookieObject.nodeId; - } - }, []) - - function downloadFlow(){ - const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(flows[tabIndex]))}` - const link = document.createElement('a') - link.href = jsonString - link.download = `${flows[tabIndex].name}.json` - link.click() - } - function uploadFlow(){ - const input = document.createElement('input') - 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))) - } - } - input.click() - - } - - function removeFlow(id:string){ - setFlows(prevState=>{ - const newFlows = [...prevState]; - const index = newFlows.findIndex(flow=>flow.id===id); - if(index >= 0){ - if(index===tabIndex){ - setTabIndex(flows.length-2); - newFlows.splice(index,1); - } else { - let flowId = flows[tabIndex].id; - newFlows.splice(index,1); - setTabIndex(newFlows.findIndex(flow=>flow.id === flowId)); - } - - } - return newFlows; - }); - } - function addFlow(flowData?:flow) { - const data = flowData?.data?flowData:null - let newFlow: flow = {name:flowData?flowData.name:"flow"+id, 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){ - console.log(newFlow) - setFlows(prevState=>{ - const newFlows = [...prevState]; - const index = newFlows.findIndex(flow=>flow.id===newFlow.id) - if(index!==-1){ - newFlows[index].data = newFlow.data - newFlows[index].name = newFlow.name - newFlows[index].chat = newFlow.chat - } - return newFlows; - }); - } - - return( - - {children} - - ) +export const TabsContext = createContext( + TabsContextInitialValue +); + +let _ = require("lodash"); + +export function TabsProvider({ children }) { + const [tabIndex, setTabIndex] = useState(0); + const [flows, setFlows] = useState>([]); + const [id, setId] = useState(0); + + const newNodeId = useRef(0); + function incrementNodeId() { + newNodeId.current = newNodeId.current + 1; + return newNodeId.current; + } + useEffect(() => { + if (flows.length !== 0) + window.localStorage.setItem( + "tabsData", + JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current }) + ); + }, [flows, id, tabIndex, newNodeId]); + + useEffect(() => { + let cookie = window.localStorage.getItem("tabsData"); + if (cookie) { + let cookieObject = JSON.parse(cookie); + setTabIndex(cookieObject.tabIndex); + setFlows(cookieObject.flows); + setId(cookieObject.id); + newNodeId.current = cookieObject.nodeId; + } + }, []); + + function downloadFlow() { + const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( + JSON.stringify(flows[tabIndex]) + )}`; + const link = document.createElement("a"); + link.href = jsonString; + link.download = `${flows[tabIndex].name}.json`; + link.click(); + } + function uploadFlow() { + const input = document.createElement("input"); + 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) => { + console.log(JSON.parse(text),"json from upload") + addFlow(JSON.parse(text)); + }); + } + }; + input.click(); + } + + function removeFlow(id: string) { + setFlows((prevState) => { + const newFlows = [...prevState]; + const index = newFlows.findIndex((flow) => flow.id === id); + if (index >= 0) { + if (index === tabIndex) { + setTabIndex(flows.length - 2); + newFlows.splice(index, 1); + } else { + let flowId = flows[tabIndex].id; + newFlows.splice(index, 1); + setTabIndex(newFlows.findIndex((flow) => flow.id === flowId)); + } + } + return newFlows; + }); + } + function addFlow(flowData?: flow) { + const data = flowData?.data ? flowData : null; + let newFlow: flow = { + name: flowData ? flowData.name : "flow" + id, + 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) { + console.log(newFlow); + setFlows((prevState) => { + const newFlows = [...prevState]; + const index = newFlows.findIndex((flow) => flow.id === newFlow.id); + if (index !== -1) { + newFlows[index].data = newFlow.data; + newFlows[index].name = newFlow.name; + newFlows[index].chat = newFlow.chat; + } + return newFlows; + }); + } + + return ( + + {children} + + ); }