fixed routing, working perfectly

src/frontend/src/App.tsx

@@ -42,13 +42,6 @@ export default function App() {
 
   const { flows, addFlow } = useContext(TabsContext);
 
-  useEffect(() => {
-    //create the first flow
-    if (flows.length === 0) {
-      addFlow();
-    }
-  }, [addFlow, flows.length]);
-
   // Initialize state variable for the list of alerts
   const [alertsList, setAlertsList] = useState<
     Array<{
@@ -133,12 +126,8 @@ export default function App() {
         }}
         FallbackComponent={CrashErrorComponent}
       >
-        {flows.length !== 0 && (
-          <>
             <Header />
             <Router />
-          </>
-        )}
       </ErrorBoundary>
       <div></div>
       <div

src/frontend/src/components/headerComponent/index.tsx

@@ -36,6 +36,7 @@ export default function Header(){
       }, [addFlow, flows.length, templates]);
     return (
         <div className="w-full h-16 flex justify-between items-center border-b">
+          {flows.findIndex((f) => tabId === f.id) !== -1 && 
           <MenuBar
             activeTab={activeTab}
             setRename={setRename}
@@ -43,6 +44,7 @@ export default function Header(){
             flows={flows}
             tabId={tabId}
           />
+        }
           <div className="flex">
             <Button>Explore</Button>
             <Button>My Flows</Button>

src/frontend/src/contexts/tabsContext.tsx

@@ -130,12 +130,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }, [templates]);
 
-  function getLocalStorageTabsData() {
-    let cookie = window.localStorage.getItem("tabsData");
-    let cookieObject: LangFlowState = JSON.parse(cookie);
-    return cookieObject;
-  }
-
   function getTabsDataFromDB() {
     //get tabs from db
     return readFlowsFromDatabase();

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -1,6 +1,21 @@
 import _ from "lodash";
 import { useContext, useRef, useState, useEffect, useCallback } from "react";
-import ReactFlow, { OnSelectionChangeParams, useNodesState, useEdgesState, useReactFlow, EdgeChange, Connection, addEdge, NodeDragHandler, SelectionDragHandler, OnEdgesDelete, Edge, updateEdge, Background, Controls } from "reactflow";
+import ReactFlow, {
+  OnSelectionChangeParams,
+  useNodesState,
+  useEdgesState,
+  useReactFlow,
+  EdgeChange,
+  Connection,
+  addEdge,
+  NodeDragHandler,
+  SelectionDragHandler,
+  OnEdgesDelete,
+  Edge,
+  updateEdge,
+  Background,
+  Controls,
+} from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
 import { alertContext } from "../../../../contexts/alertContext";
@@ -14,8 +29,6 @@ import useUndoRedo from "../../hooks/useUndoRedo";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import ExtraSidebar from "../extraSidebarComponent";
 
-
-
 const nodeTypes = {
   genericNode: GenericNode,
 };
@@ -295,55 +308,68 @@ export default function Page({ flow }: { flow: FlowType }) {
   const { setDisableCopyPaste } = useContext(TabsContext);
 
   return (
-    <div className="w-full h-full" ref={reactFlowWrapper}>
+    <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
-      {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
+      <ExtraSidebar />
-        <>
+      {/* Main area */}
-          <ReactFlow
+      <main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
-            nodes={nodes}
+        {/* Primary column */}
-            onMove={() => {
+        <div className="w-full h-full">
-              updateFlow({ ...flow, data: reactFlowInstance.toObject() });
+          <div className="w-full h-full" ref={reactFlowWrapper}>
-            }}
+            {Object.keys(templates).length > 0 &&
-            edges={edges}
+            Object.keys(types).length > 0 ? (
-            onPaneClick={() => {
+                <div className="w-full h-full">
-              setDisableCopyPaste(false);
+                  <ReactFlow
-            }}
+                    nodes={nodes}
-            onPaneMouseLeave={() => {
+                    onMove={() => {
-              setDisableCopyPaste(true);
+                      updateFlow({
-            }}
+                        ...flow,
-            onNodesChange={onNodesChange}
+                        data: reactFlowInstance.toObject(),
-            onEdgesChange={onEdgesChangeMod}
+                      });
-            onConnect={onConnect}
+                    }}
-            disableKeyboardA11y={true}
+                    edges={edges}
-            onLoad={setReactFlowInstance}
+                    onPaneClick={() => {
-            onInit={setReactFlowInstance}
+                      setDisableCopyPaste(false);
-            nodeTypes={nodeTypes}
+                    }}
-            onEdgeUpdate={onEdgeUpdate}
+                    onPaneMouseLeave={() => {
-            onEdgeUpdateStart={onEdgeUpdateStart}
+                      setDisableCopyPaste(true);
-            onEdgeUpdateEnd={onEdgeUpdateEnd}
+                    }}
-            onNodeDragStart={onNodeDragStart}
+                    onNodesChange={onNodesChange}
-            onSelectionDragStart={onSelectionDragStart}
+                    onEdgesChange={onEdgesChangeMod}
-            onSelectionEnd={onSelectionEnd}
+                    onConnect={onConnect}
-            onSelectionStart={onSelectionStart}
+                    disableKeyboardA11y={true}
-            onEdgesDelete={onEdgesDelete}
+                    onLoad={setReactFlowInstance}
-            connectionLineComponent={ConnectionLineComponent}
+                    onInit={setReactFlowInstance}
-            onDragOver={onDragOver}
+                    nodeTypes={nodeTypes}
-            onDrop={onDrop}
+                    onEdgeUpdate={onEdgeUpdate}
-            onNodesDelete={onDelete}
+                    onEdgeUpdateStart={onEdgeUpdateStart}
-            onSelectionChange={onSelectionChange}
+                    onEdgeUpdateEnd={onEdgeUpdateEnd}
-            nodesDraggable={!disableCopyPaste}
+                    onNodeDragStart={onNodeDragStart}
-            panOnDrag={!disableCopyPaste}
+                    onSelectionDragStart={onSelectionDragStart}
-            zoomOnDoubleClick={!disableCopyPaste}
+                    onSelectionEnd={onSelectionEnd}
-            selectNodesOnDrag={false}
+                    onSelectionStart={onSelectionStart}
-            className="theme-attribution"
+                    onEdgesDelete={onEdgesDelete}
-          >
+                    connectionLineComponent={ConnectionLineComponent}
-            <Background className="dark:bg-gray-900" />
+                    onDragOver={onDragOver}
-            <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
+                    onDrop={onDrop}
-          </ReactFlow>
+                    onNodesDelete={onDelete}
-          <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+                    onSelectionChange={onSelectionChange}
-        </>
+                    nodesDraggable={!disableCopyPaste}
-      ) : (
+                    panOnDrag={!disableCopyPaste}
-        <></>
+                    zoomOnDoubleClick={!disableCopyPaste}
-      )}
+                    selectNodesOnDrag={false}
+                    className="theme-attribution"
+                  >
+                    <Background className="dark:bg-gray-900" />
+                    <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
+                  </ReactFlow>
+                  <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+                </div>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+      </main>
     </div>
   );
 }

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -49,7 +49,7 @@ export default function ExtraSidebar() {
   }
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col overflow-auto scrollbar-hide">
       <div className="relative mt-2 flex items-center mb-2 mx-2">
         <input
           type="text"

src/frontend/src/pages/MainPage/components/menuBar/index.tsx

@@ -19,6 +19,7 @@ import ExportModal from "../../../../modals/exportModal";
 import ApiModal from "../../../../modals/ApiModal";
 import { alertContext } from "../../../../contexts/alertContext";
 import { updateFlowInDatabase } from "../../../../controllers/API";
+import { Link } from "react-router-dom";
 
 export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
@@ -129,6 +130,7 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
             <MenubarMenu>
               <MenubarTrigger>Flows</MenubarTrigger>
               <MenubarContent>
+                
                 <MenubarRadioGroup
                   value={tabId}
                   onValueChange={(value) => {
@@ -137,9 +139,12 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
                 >
                   {flows.map((flow, idx) => {
                     return (
-                      <MenubarRadioItem value={idx.toString()}>
+                      <Link to={"/flow/" + flow.id}>
+                  <MenubarRadioItem value={flow.id}>
                         {emoji} {flow.name}
                       </MenubarRadioItem>
+                </Link>
+                      
                     );
                   })}
                 </MenubarRadioGroup>

src/frontend/src/pages/MainPage/index.tsx

@@ -30,7 +30,6 @@ export default function HomePage() {
     setTabId,
   } = useContext(TabsContext);
   return (
-    Object.keys(flows).length !== 0 && (
       <div
         className="w-full h-full flex flex-col bg-muted"
       >
@@ -45,6 +44,5 @@ export default function HomePage() {
             ))}
           </div>
       </div>
-    )
   );
 }