tabs context created

space_flow/src/contexts/tabsContext.tsx

@@ -0,0 +1,41 @@
+import { createContext, useState } from "react";
+
+type flow={name:string,id:string,flow:any}
+
+type TabsContextType={
+    tabIndex:number;
+    setTabIndex:(index:number)=>void;
+    flows:Array<flow>
+    removeFlow:(index:number)=>void;
+    addFlow:(newFlow:flow)=>void;
+}
+
+const TabsContextInitialValue = {
+    tabIndex : 0,
+    setTabIndex:(index:number)=>{},
+    flows:[],
+    removeFlow:(index:number)=>{},
+    addFlow:(newFlow:flow)=>{}
+
+}
+
+export const TabsContext = createContext<TabsContextType>(TabsContextInitialValue)
+
+export function TabsProvider({children}){
+    const [tabIndex,setTabIndex] = useState(0)
+    const [flows,setFlows] = useState<Array<flow>>([])
+    function removeFlow(index:number){
+        let newFlows = flows
+        newFlows.splice(index)
+        setFlows(newFlows)
+    }
+    function addFlow(newFlow:flow){
+        setFlows([...flows,newFlow])
+    }
+
+    return(
+        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,removeFlow,addFlow}}>
+            {children}
+        </TabsContext.Provider>
+    )
+}

space_flow/src/pages/FlowPage/flowManager/index.tsx

@@ -47,3 +47,12 @@ function App() {
     </Tabs>
   );
 }
+/*
+tabs initial logic
+TO DO
+- create a context with the tabs control so tabs can be changed inside the flow
+- create a logic to save tabs and flow state for multitabs and each flow inside each tab
+- think about the save logic and how to implement it the best way
+- define what each tab will need to show and how it will be displayed
+
+*/