From 90974d9ef486b433d89250b4dff54966a88ef057 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 20 Feb 2023 18:13:22 -0300
Subject: [PATCH] nested reactFlow inside tab

---
 space_flow/src/App.tsx                        |  6 +-
 space_flow/src/contexts/tabsContext.tsx       |  8 ++-
 .../src/pages/FlowPage/flowManager/index.tsx  | 55 +++++--------------
 .../flowManager/tabComponent/index.tsx        | 12 ++++
 space_flow/src/pages/FlowPage/index.tsx       |  2 +-
 5 files changed, 39 insertions(+), 44 deletions(-)
 create mode 100644 space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx

diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index 9b1a39a0d..bd55a4fb9 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -12,6 +12,8 @@ import { locationContext } from "./contexts/locationContext";
 import FlowPage from "./pages/FlowPage";
 import Sidebar from "./components/SidebarComponent";
 import Header from "./components/HeaderComponent";
+import { TabsProvider } from "./contexts/tabsContext";
+import { TabsManager } from "./pages/FlowPage/flowManager";
 
 export default function App() {
   var _ = require("lodash");
@@ -108,7 +110,9 @@ export default function App() {
           <main className="min-w-0 flex-1 border-t border-gray-200 flex">
             {/* Primary column */}
             <div className="w-full h-full">
-              <FlowPage />
+              <TabsProvider>
+                <TabsManager></TabsManager>
+              </TabsProvider>
             </div>
           </main>
         </div>
diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx
index 35ab53190..6cf88b8aa 100644
--- a/space_flow/src/contexts/tabsContext.tsx
+++ b/space_flow/src/contexts/tabsContext.tsx
@@ -23,14 +23,18 @@ export const TabsContext = createContext<TabsContextType>(TabsContextInitialValu
 
 export function TabsProvider({children}){
     const [tabIndex,setTabIndex] = useState(0)
-    const [flows,setFlows] = useState<Array<flow>>([])
+    const [flows,setFlows] = useState<Array<flow>>(JSON.parse(window.sessionStorage.getItem('tabs'))??[])
     function removeFlow(index:number){
         let newFlows = flows
         newFlows.splice(index)
+        window.sessionStorage.setItem('tabs',JSON.stringify(newFlows))
         setFlows(newFlows)
     }
     function addFlow(newFlow:flow){
-        setFlows([...flows,newFlow])
+        let newFlows = [...flows,newFlow]
+        window.sessionStorage.setItem('tabs',JSON.stringify(newFlows))
+        setFlows(newFlows)
+        
     }
 
     return(
diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx
index 6979f8963..1d360d545 100644
--- a/space_flow/src/pages/FlowPage/flowManager/index.tsx
+++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx
@@ -1,52 +1,27 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import FlowPage from '..';
-import 'react-tabs/style/react-tabs.css';
+import { TabsContext } from '../../../contexts/tabsContext';
+import TabComponent from './tabComponent';
+var _ = require("lodash");
 
-interface FlowTabProps {
-  flow:any;
-}
-
-function FlowTab() {
-  return (
-    <FlowPage></FlowPage>
-  );
-}
-
-function App() {
-  const [flows, setFlows] = useState([]); // Start with one flow
-  const [activeIndex, setActiveIndex] = useState(0);
-
-  function onElementsChange(flowIndex: number, elements: any[]) {
-    setFlows((prevFlows) => {
-      const newFlows = [...prevFlows];
-      newFlows[flowIndex] = elements;
-      return newFlows;
-    });
+export function TabsManager(){
+  const {flows,addFlow} = useContext(TabsContext);
+  if(flows.length===0){
+    addFlow({name:"untitled",flow:null,id:_.uniqueId()})
   }
 
-  function addTab() {
-    setFlows([...flows, []]); // Add a new flow to the state
-    setActiveIndex(flows.length); // Activate the new tab
-  }
-
-  return (
-    <Tabs selectedIndex={activeIndex} onSelect={setActiveIndex}>
+  return(
+    <Tabs className="h-full w-full flex flex-col">
       <TabList>
-        {flows.map((flow, index) => (
-          <Tab key={index}>Flow {index + 1}</Tab>
-        ))}
-        <button onClick={addTab}>+</button> {/* Render the plus button */}
+        {flows.map(flow=><Tab key={flow.id}><TabComponent>{flow.name}</TabComponent></Tab>)}
+        <Tab><button>+</button></Tab>
       </TabList>
-
-      {flows.map((flow, index) => (
-        <TabPanel key={index}>
-          <FlowTab />
-        </TabPanel>
-      ))}
+      {flows.map(flow=><TabPanel key={flow.id} className="h-full w-full"><FlowPage></FlowPage></TabPanel>)}
     </Tabs>
-  );
+  )
 }
+
 /*
 tabs initial logic
 TO DO
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
new file mode 100644
index 000000000..4da771019
--- /dev/null
+++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
@@ -0,0 +1,12 @@
+type tabProps = {
+    name:string;
+}
+
+
+export default function TabComponent({children}){
+    return(
+        <div className="bg-blue-400 w-2">
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx
index 10009d942..4e4923a98 100644
--- a/space_flow/src/pages/FlowPage/index.tsx
+++ b/space_flow/src/pages/FlowPage/index.tsx
@@ -141,7 +141,7 @@ export default function FlowPage() {
         onDrop={onDrop}
       >
         <Background />
-        <Controls></Controls>
+        <Controls ></Controls>
       </ReactFlow>
       <Chat reactFlowInstance={reactFlowInstance} />
     </div>