debugging from upload flow
This commit is contained in:
anovazzi1
parent
8cb6cac06c
commit
8ea68be22b
1 changed files with 149 additions and 120 deletions
|
|
@ -1,127 +1,156 @@
|
||||||
import { createContext, useEffect, useState, useRef } from "react";
|
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 = {
|
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}){
|
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 [id, setId] = useState(0);
|
||||||
|
|
||||||
const newNodeId = useRef(0);
|
const newNodeId = useRef(0);
|
||||||
function incrementNodeId(){
|
function incrementNodeId() {
|
||||||
newNodeId.current = newNodeId.current + 1;
|
newNodeId.current = newNodeId.current + 1;
|
||||||
return newNodeId.current;
|
return newNodeId.current;
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(flows.length !== 0)
|
if (flows.length !== 0)
|
||||||
window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id, nodeId: newNodeId.current}));
|
window.localStorage.setItem(
|
||||||
}, [flows, id, tabIndex, newNodeId]);
|
"tabsData",
|
||||||
|
JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
|
||||||
useEffect(() => {
|
);
|
||||||
let cookie = window.localStorage.getItem('tabsData');
|
}, [flows, id, tabIndex, newNodeId]);
|
||||||
if(cookie){
|
|
||||||
let cookieObject = JSON.parse(cookie);
|
useEffect(() => {
|
||||||
setTabIndex(cookieObject.tabIndex);
|
let cookie = window.localStorage.getItem("tabsData");
|
||||||
setFlows(cookieObject.flows);
|
if (cookie) {
|
||||||
setId(cookieObject.id);
|
let cookieObject = JSON.parse(cookie);
|
||||||
newNodeId.current= cookieObject.nodeId;
|
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
|
function downloadFlow() {
|
||||||
link.download = `${flows[tabIndex].name}.json`
|
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
|
||||||
link.click()
|
JSON.stringify(flows[tabIndex])
|
||||||
}
|
)}`;
|
||||||
function uploadFlow(){
|
const link = document.createElement("a");
|
||||||
const input = document.createElement('input')
|
link.href = jsonString;
|
||||||
input.type='file'
|
link.download = `${flows[tabIndex].name}.json`;
|
||||||
input.onchange = (e:Event)=>{
|
link.click();
|
||||||
if((e.target as HTMLInputElement).files[0].type === "application/json"){
|
}
|
||||||
const file = (e.target as HTMLInputElement).files[0];
|
function uploadFlow() {
|
||||||
file.text().then(text =>addFlow(JSON.parse(text)))
|
const input = document.createElement("input");
|
||||||
}
|
input.type = "file";
|
||||||
}
|
input.onchange = (e: Event) => {
|
||||||
input.click()
|
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")
|
||||||
function removeFlow(id:string){
|
addFlow(JSON.parse(text));
|
||||||
setFlows(prevState=>{
|
});
|
||||||
const newFlows = [...prevState];
|
}
|
||||||
const index = newFlows.findIndex(flow=>flow.id===id);
|
};
|
||||||
if(index >= 0){
|
input.click();
|
||||||
if(index===tabIndex){
|
}
|
||||||
setTabIndex(flows.length-2);
|
|
||||||
newFlows.splice(index,1);
|
function removeFlow(id: string) {
|
||||||
} else {
|
setFlows((prevState) => {
|
||||||
let flowId = flows[tabIndex].id;
|
const newFlows = [...prevState];
|
||||||
newFlows.splice(index,1);
|
const index = newFlows.findIndex((flow) => flow.id === id);
|
||||||
setTabIndex(newFlows.findIndex(flow=>flow.id === flowId));
|
if (index >= 0) {
|
||||||
}
|
if (index === tabIndex) {
|
||||||
|
setTabIndex(flows.length - 2);
|
||||||
}
|
newFlows.splice(index, 1);
|
||||||
return newFlows;
|
} else {
|
||||||
});
|
let flowId = flows[tabIndex].id;
|
||||||
}
|
newFlows.splice(index, 1);
|
||||||
function addFlow(flowData?:flow) {
|
setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
|
||||||
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);
|
return newFlows;
|
||||||
setFlows(prevState => {
|
});
|
||||||
const newFlows = [...prevState, newFlow];
|
}
|
||||||
return newFlows;
|
function addFlow(flowData?: flow) {
|
||||||
});
|
const data = flowData?.data ? flowData : null;
|
||||||
setTabIndex(flows.length);
|
let newFlow: flow = {
|
||||||
}
|
name: flowData ? flowData.name : "flow" + id,
|
||||||
function updateFlow(newFlow:flow){
|
id: id.toString(),
|
||||||
console.log(newFlow)
|
data,
|
||||||
setFlows(prevState=>{
|
chat: flowData ? flowData.chat : [],
|
||||||
const newFlows = [...prevState];
|
};
|
||||||
const index = newFlows.findIndex(flow=>flow.id===newFlow.id)
|
setId((old) => old + 1);
|
||||||
if(index!==-1){
|
setFlows((prevState) => {
|
||||||
newFlows[index].data = newFlow.data
|
const newFlows = [...prevState, newFlow];
|
||||||
newFlows[index].name = newFlow.name
|
return newFlows;
|
||||||
newFlows[index].chat = newFlow.chat
|
});
|
||||||
}
|
setTabIndex(flows.length);
|
||||||
return newFlows;
|
}
|
||||||
});
|
function updateFlow(newFlow: flow) {
|
||||||
}
|
console.log(newFlow);
|
||||||
|
setFlows((prevState) => {
|
||||||
return(
|
const newFlows = [...prevState];
|
||||||
<TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow, downloadFlow, uploadFlow}}>
|
const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
|
||||||
{children}
|
if (index !== -1) {
|
||||||
</TabsContext.Provider>
|
newFlows[index].data = newFlow.data;
|
||||||
)
|
newFlows[index].name = newFlow.name;
|
||||||
|
newFlows[index].chat = newFlow.chat;
|
||||||
|
}
|
||||||
|
return newFlows;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TabsContext.Provider
|
||||||
|
value={{
|
||||||
|
tabIndex,
|
||||||
|
setTabIndex,
|
||||||
|
flows,
|
||||||
|
incrementNodeId,
|
||||||
|
removeFlow,
|
||||||
|
addFlow,
|
||||||
|
updateFlow,
|
||||||
|
downloadFlow,
|
||||||
|
uploadFlow,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</TabsContext.Provider>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue