add routing using react-router-dom

package.json

@@ -15,6 +15,7 @@
     "lucide-react": "^0.323.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "reactflow": "^11.10.3",
     "typescript": "^4.9.5",

src/App.tsx

@@ -1,62 +1,28 @@
-import React from "react";
-import ReactFlow, {
-  MiniMap,
-  Controls,
-  Background,
-  useNodesState,
-  useEdgesState,
-  addEdge,
-  BackgroundVariant,
-  Connection,
-  ReactFlowProvider,
-} from "reactflow";
-import { MessageData, nodeTypes } from "./components/nodes";
-import { addEndMarker } from "./utils";
-import { NodesPanel, SettingsPanel } from "./components/panels";
-import Header from "./components/header";
+import { ReactFlowProvider } from "reactflow";
+import { Home, Create, View, Settings } from "./routes";
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+  RouterProvider,
+} from "react-router-dom";
+import { Layout } from "./components/layout";
 
 export default function App() {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [nodes, setNodes, onNodesChange] = useNodesState<MessageData>([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState<never>([]);
-
-  const onConnect = React.useCallback(
-    (params: Connection) => {
-      // do not connect same node
-      if (params.source === params.target) return;
-      // do not allow more than one edge from same source
-      if (edges.some((edge) => edge.source === params.source)) return;
-
-      setEdges((eds) => addEdge(params, eds).map(addEndMarker));
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setEdges]
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route element={<Layout />}>
+        <Route path="/" index element={<Home />} />
+        <Route path="/create" element={<Create />} />
+        <Route path="/view" element={<View />} />
+        <Route path="/settings" element={<Settings />} />
+      </Route>
+    )
   );
 
-  const selectedNode = nodes.find((node) => node.selected);
-
   return (
     <ReactFlowProvider>
-      <div className="flex font-sans">
-        <Header />
-        <div className="w-4/5 h-screen">
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            nodeTypes={nodeTypes}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onConnect={onConnect}
-            fitView
-          >
-            <Controls fitViewOptions={{ duration: 300 }} />
-            <MiniMap />
-            <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
-          </ReactFlow>
-        </div>
-        <SettingsPanel show={!!selectedNode} />
-        <NodesPanel show={!selectedNode} />
-      </div>
+      <RouterProvider router={router} />
     </ReactFlowProvider>
   );
 }

src/components/layout/header.tsx

@@ -0,0 +1,70 @@
+import { Transition } from "@headlessui/react";
+import { BadgePlus, Home, Save, Settings, Workflow } from "lucide-react";
+import { NavLink, useLocation } from "react-router-dom";
+import React from "react";
+
+const Header = () => {
+  const location = useLocation();
+
+  return (
+    <Transition
+      as={React.Fragment}
+      appear={true}
+      show={true}
+      enter="transition-transform duration-300"
+      enterFrom="-translate-x-full"
+      enterTo="translate-x-0"
+      leaveFrom="translate-x-0"
+      leaveTo="-translate-x-full"
+    >
+      <header className="px-4 py-6 h-screen shadow-lg flex flex-col gap-10 text-slate-800">
+        <NavLink
+          to="/"
+          aria-label="Flowww"
+          className="font-serif text-5xl font-bold tracking-wider text-center"
+        >
+          F
+        </NavLink>
+        <div className="flex flex-col gap-4 flex-grow">
+          <NavLink to="/" title="Home" className="p-2 hover:bg-gray-200 rounded-md mx-auto">
+            <Home size={24} absoluteStrokeWidth />
+          </NavLink>
+          <NavLink
+            to="/create"
+            title="Create a flow"
+            className="p-2 hover:bg-gray-200 rounded-md mx-auto"
+          >
+            <BadgePlus size={24} absoluteStrokeWidth />
+          </NavLink>
+          <NavLink
+            to="/view"
+            title="See your flows"
+            className="p-2 hover:bg-gray-200 rounded-md mx-auto"
+          >
+            <Workflow size={24} absoluteStrokeWidth />
+          </NavLink>
+        </div>
+        <div className="flex flex-col gap-4">
+          {location?.pathname === "/create" && (
+            <button
+              onClick={() => null}
+              title="Save flow"
+              className="p-2 hover:bg-gray-200 rounded-md mx-auto"
+            >
+              <Save size={24} />
+            </button>
+          )}
+          <NavLink
+            to="/settings"
+            title="Settings"
+            className="p-2 hover:bg-gray-200 rounded-md mx-auto"
+          >
+            <Settings size={24} />
+          </NavLink>
+        </div>
+      </header>
+    </Transition>
+  );
+};
+
+export default Header;

src/components/layout/index.tsx

@@ -0,0 +1,11 @@
+import Header from "./header";
+import { Outlet } from "react-router-dom";
+
+export const Layout = () => {
+  return (
+    <div className="flex font-sans">
+      <Header />
+      <Outlet />
+    </div>
+  );
+};

src/components/panels/Nodes.tsx

@@ -47,7 +47,7 @@ export const NodesPanel = ({ show }: Props) => {
       leaveFrom="translate-x-0"
       leaveTo="translate-x-full"
     >
-      <div className="w-1/5 h-screen bg-white shadow-xl">
+      <div className="w-1/5 h-screen bg-white shadow-xl text-slate-800">
         <div className="relative px-3 py-4 flex items-center">
           <div className="mx-auto flex items-center gap-2">
             <Shapes size={20} />

src/routes/create.tsx

@@ -0,0 +1,57 @@
+import ReactFlow, {
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  BackgroundVariant,
+  Connection,
+} from "reactflow";
+import { MessageData, nodeTypes } from "../components/nodes";
+import { NodesPanel, SettingsPanel } from "../components/panels";
+import { addEndMarker } from "../utils";
+import { useCallback } from "react";
+
+export const Create = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [nodes, setNodes, onNodesChange] = useNodesState<MessageData>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<never>([]);
+
+  const onConnect = useCallback(
+    (params: Connection) => {
+      // do not connect same node
+      if (params.source === params.target) return;
+      // do not allow more than one edge from same source
+      if (edges.some((edge) => edge.source === params.source)) return;
+
+      setEdges((eds) => addEdge(params, eds).map(addEndMarker));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setEdges]
+  );
+
+  const selectedNode = nodes.find((node) => node.selected);
+
+  return (
+    <>
+      <div className="w-4/5 h-screen">
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          fitView
+        >
+          <Controls fitViewOptions={{ duration: 300 }} />
+          <MiniMap />
+          <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
+        </ReactFlow>
+      </div>
+      <SettingsPanel show={!!selectedNode} />
+      <NodesPanel show={!selectedNode} />
+    </>
+  );
+};