delete tabs working

space_flow/src/contexts/tabsContext.tsx

@@ -6,7 +6,7 @@ type TabsContextType={
     tabIndex:number;
     setTabIndex:(index:number)=>void;
     flows:Array<flow>
-    removeFlow:(index:number)=>void;
+    removeFlow:(id:string)=>void;
     addFlow:(newFlow:flow)=>void;
     updateFlow:(newFLow:flow)=>void;
 }
@@ -15,7 +15,7 @@ const TabsContextInitialValue = {
     tabIndex : 0,
     setTabIndex:(index:number)=>{},
     flows:[],
-    removeFlow:(index:number)=>{},
+    removeFlow:(id:string)=>{},
     addFlow:(newFlow:flow)=>{},
     updateFlow:(newFLow:flow)=>{}
     
@@ -27,11 +27,24 @@ export const TabsContext = createContext<TabsContextType>(TabsContextInitialValu
 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,1)
-        window.sessionStorage.setItem('tabs',JSON.stringify(newFlows))
-        setFlows(newFlows)
+    function removeFlow(id:string){
+        setFlows(prevState=>{
+            const newFlows = [...prevState];
+            const index = newFlows.findIndex(flow=>flow.id===id)
+            if(index!==-1){
+                newFlows.splice(index,1)
+            }
+            if(index===tabIndex){
+                if(tabIndex===0){
+                    //
+                }
+                else{
+                    setTabIndex(tabIndex-1)
+                }
+            }
+            window.sessionStorage.setItem('tabs', JSON.stringify(newFlows));
+            return newFlows;
+        })
     }
     function addFlow(newFlow: flow) {
         setFlows(prevState => {

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

@@ -1,3 +1,4 @@
+import { PlusIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { ReactFlowProvider } from "reactflow";
@@ -19,12 +20,14 @@ export function TabsManager() {
 		<div className="h-full w-full flex flex-col">
 			<div className="w-full flex pr-2 flex-row text-center items-center">
 				{flows.map((flow, index) => {
+          console.log(tabIndex)
 					return (
-						<TabComponent selected={index === tabIndex} key={index}>
+						<TabComponent selected={index === tabIndex} key={index} id={flow.id}>
 							<div onClick={() => setTabIndex(index)}>{flow.name}</div>
 						</TabComponent>
 					);
 				})}
+        <div onClick={()=>addFlow({ name: "untitled", data: null, id: _.uniqueId() })} className="cursor-pointer"><PlusIcon color="black" width={24}></PlusIcon></div>
 			</div>
 			<div className="w-full h-full">
 				<ReactFlowProvider>

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

@@ -1,16 +1,24 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
+import { useContext } from "react";
+import { TabsContext } from "../../../../contexts/tabsContext";
 import { classNames } from "../../../../utils";
 
-type tabProps = {
-    name:string;
+export default function TabComponent({ children, selected, id }) {
+	const { removeFlow, flows } = useContext(TabsContext);
+	return (
+		<div
+			className={classNames(
+				selected ? " shadow-lg" : "bg-gray-300",
+				"flex border-t border-l border-r border-black rounded-t-md shadow-sm cursor-pointer"
+			)}
+		>
+			{children}
+			{flows.length > 1 && (
+				<XMarkIcon
+					className="w-5 hover:text-red-500"
+					onClick={() => removeFlow(id)}
+				></XMarkIcon>
+			)}
+		</div>
+	);
 }
-
-
-export default function TabComponent({children,selected}){
-    return(
-        <div className={classNames(selected?" shadow-lg":"bg-gray-300","flex border-t border-l border-r border-black rounded-t-md shadow-sm cursor-pointer")}>
-            {children}
-            <XMarkIcon className="w-5 hover:text-red-500"></XMarkIcon>
-        </div>
-    )
-}

space_flow/src/pages/FlowPage/index.tsx

@@ -50,7 +50,7 @@ export default function FlowPage({flow}) {
     setViewport(flow.data.viewport)
   }
   useEffect(()=>{
-    if(reactFlowInstance){
+    if(reactFlowInstance && flow){
       flow.data =reactFlowInstance.toObject() 
       updateFlow(flow)
     }