Move from react-router to wouter

cypress/e2e/pages.cy.ts

@@ -7,8 +7,8 @@ it('should land on the edit page', () => {
     expect(loc.pathname).to.eq('/edit');
   });
   cy.findByRole('link', { name: 'Edit' }).should(($link) => {
-    const classes = $link.attr('class');
-    expect(classes).to.include('active');
+    const ariaCurrent = $link.attr('aria-current');
+    expect(ariaCurrent).to.equal('true');
   });
   cy.get('.react-flow').should('be.visible');
 });
@@ -19,8 +19,8 @@ it('should switch to monitor page', () => {
     expect(loc.pathname).to.eq('/monitor');
   });
   cy.findByRole('link', { name: 'Monitor' }).should(($link) => {
-    const classes = $link.attr('class');
-    expect(classes).to.include('active');
+    const ariaCurrent = $link.attr('aria-current');
+    expect(ariaCurrent).to.equal('true');
   });
 });
 

package.json

@@ -44,9 +44,9 @@
     "react-hook-form": "7.78.0",
     "react-is": "18.3.1",
     "react-resizable-panels": "4.11.2",
-    "react-router-dom": "6.22.0",
     "react-timeago": "8.3.0",
     "socket.io-client": "4.8.3",
+    "wouter": "3.10.0",
     "zustand": "4.4.3"
   },
   "devDependencies": {

src/App.tsx

@@ -1,8 +1,6 @@
 import { CssBaseline } from '@mui/material';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Navigate, Outlet } from 'react-router-dom';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-
+import { Route, Router, Switch, Redirect } from 'wouter';
 import { apiSuffix, baseUrl } from './api/client';
 import EditRoute from './EditRoute';
 import SimpleSnackbar from './general/Snackbar';
@@ -12,46 +10,26 @@ import SocketClientProvider from './SocketClientProvider';
 
 const queryClient = new QueryClient();
 
-const router = createBrowserRouter(
-  [
-    {
-      path: '/',
-      element: <Layout />,
-      children: [
-        {
-          path: 'edit',
-          element: <EditRoute />,
-        },
-        {
-          path: 'monitor',
-          element: <MonitorRoute />,
-        },
-        {
-          path: '/',
-          element: <Navigate to="edit" replace />,
-        },
-      ],
-    },
-  ],
-  { basename: import.meta.env.VITE_ROUTER_BASE_DIR },
-);
-
-function Layout() {
-  return (
-    <>
-      <SimpleSnackbar />
-      <CssBaseline />
-      <NavBar />
-      <Outlet />
-    </>
-  );
-}
-
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <SocketClientProvider baseUrl={baseUrl} apiSuffix={apiSuffix}>
-        <RouterProvider router={router} />
+        <Router base={import.meta.env.VITE_ROUTER_BASE_DIR}>
+          <SimpleSnackbar />
+          <CssBaseline />
+          <NavBar />
+          <Switch>
+            <Route path="/edit">
+              <EditRoute />
+            </Route>
+            <Route path="/monitor">
+              <MonitorRoute />
+            </Route>
+            <Route>
+              <Redirect to="/edit" replace />
+            </Route>
+          </Switch>
+        </Router>
       </SocketClientProvider>
     </QueryClientProvider>
   );

src/edition/EditPage.tsx

@@ -2,27 +2,22 @@ import { useDebouncedCallback } from '@react-hookz/web';
 import { useStoreApi } from '@xyflow/react';
 import { useEffect } from 'react';
 import { Group, Panel, Separator } from 'react-resizable-panels';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'wouter';
 
 import ErrorFallback from '../general/ErrorFallback';
-import { useWorkflowHasChanges } from '../store/graph-hooks';
 import useEdgeDataStore from '../store/useEdgeDataStore';
 import useNodeDataStore from '../store/useNodeDataStore';
 import useWorkflowHistory from '../store/useWorkflowHistory';
 import useWorkflowStore from '../store/useWorkflowStore';
 import SuspenseBoundary from '../suspense/SuspenseBoundary';
 import Canvas from './Canvas/Canvas';
 import styles from './EditPage.module.css';
-import { useWarningPrompt } from './hooks';
 import EditSidebar from './Sidebar/EditSidebar';
 import OverflowDrawer from './TaskDrawer/TaskDrawer';
 import TopAppBar from './TopAppBar/TopAppBar';
 
 export default function EditPage() {
   const [searchParams] = useSearchParams();
-  const workflowHasChanges = useWorkflowHasChanges();
-
-  useWarningPrompt(workflowHasChanges);
 
   const workflowId = searchParams.get('workflow');
   const pushToWorkflowHistory = useWorkflowHistory(

src/edition/TopAppBar/execution/ExecutionDialog.tsx

@@ -8,7 +8,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import { useMap } from '@react-hookz/web';
 import { nanoid } from 'nanoid';
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation } from 'wouter';
 
 import commonStrings from '../../../commonStrings.json';
 import GraphFormDialog from '../../../general/forms/GraphFormDialog';
@@ -40,7 +40,7 @@ export default function ExecutionDialog(props: Props) {
   const [engine, setEngine] = useState<EngineDropdownOption>('default');
   const [queue, setQueue] = useState<string>('');
   const { isDialogOpen, setDialogOpen, handleSave } = useSaveWorkflow();
-  const navigate = useNavigate();
+  const [_, navigate] = useLocation();
 
   async function handleSaveExecute() {
     try {

src/edition/TopAppBar/menu/DeleteMenuItem.tsx

@@ -1,6 +1,6 @@
 import { Delete } from '@mui/icons-material';
 import { useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'wouter';
 
 import {
   deleteWorkflow,

src/edition/TopAppBar/menu/OpenNewWorkflowMenuItem.tsx

@@ -1,6 +1,6 @@
 import { FiberNew } from '@mui/icons-material';
 import { useKeyboardEvent } from '@react-hookz/web';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'wouter';
 
 import ActionMenuItem from './ActionMenuItem';
 

src/edition/hooks.ts

@@ -1,8 +1,6 @@
-import { useEventListener } from '@react-hookz/web';
 import { useReactFlow } from '@xyflow/react';
 import type { RefCallback } from 'react';
 import { useCallback, useState } from 'react';
-import { unstable_usePrompt } from 'react-router-dom';
 
 import { useNodesIds } from '../store/graph-hooks';
 import useNodeDataStore from '../store/useNodeDataStore';
@@ -11,22 +9,6 @@ import { getNodeData } from '../utils';
 import { assertDefined, assertNodeDataDefined } from '../utils/typeGuards';
 import { generateNewNodeId } from './utils';
 
-export function useWarningPrompt(displayWarning: boolean) {
-  useEventListener(window, 'beforeunload', (event: BeforeUnloadEvent) => {
-    if (displayWarning) {
-      event.preventDefault();
-
-      // Included for legacy support, e.g. Chrome/Edge < 119
-      event.returnValue = true;
-    }
-  });
-
-  unstable_usePrompt({
-    message: 'There are unsaved changes. Continue without saving?',
-    when: displayWarning,
-  });
-}
-
 export function useCloneNode() {
   const rfInstance = useReactFlow();
   const nodesIds = useNodesIds();

src/execution/WorkflowList.tsx

@@ -1,5 +1,5 @@
 import { ErrorBoundary } from 'react-error-boundary';
-import { Link } from 'react-router-dom';
+import { Link } from 'wouter';
 
 import type { EwoksJob } from '../api/models';
 import styles from './MonitorPage.module.css';

src/general/QuickOpen.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'wouter';
 
 import useSnackbarStore from '../store/useSnackbarStore';
 import type { WorkflowDescription } from '../types';

src/general/forms/GraphFormDialog.tsx

@@ -9,7 +9,7 @@ import {
 import { useReactFlow } from '@xyflow/react';
 import { flushSync } from 'react-dom';
 import { Controller, useForm } from 'react-hook-form';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'wouter';
 
 import {
   postWorkflow,