Merge pull request #6 from djnunez-aot/tanstack-swap

Convert from React router to tanstack router

.gitignore

@@ -25,7 +25,6 @@ share/python-wheels/
 .installed.cfg
 *.egg
 MANIFEST
-
 # PyInstaller
 #  Usually these files are written by a python script from a template
 #  before PyInstaller builds the exe, so as to inject date/other infos into it.

submit-web/.gitignore

@@ -22,5 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
 .idea

submit-web/package.json

@@ -17,15 +17,16 @@
     "@mui/icons-material": "^5.15.21",
     "@mui/material": "^5.15.20",
     "@tanstack/react-query": "^5.45.1",
+    "@tanstack/react-router": "^1.44.4",
     "axios": "^1.7.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.24.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.43.1",
     "@tanstack/react-query-devtools": "^5.45.1",
-    "@tanstack/router-devtools": "^1.39.4",
+    "@tanstack/router-devtools": "^1.44.4",
+    "@tanstack/router-plugin": "^1.44.3",
     "@tanstack/router-vite-plugin": "^1.39.5",
     "@types/node": "^20.14.9",
     "@types/react": "^18.2.66",

submit-web/src/App.cy.tsx

@@ -1,14 +1,12 @@
-import React from 'react'
-import App from './App'
-import { BrowserRouter } from 'react-router-dom'
+import { routeTree } from "./routeTree.gen.ts";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
 
-describe('<App />', () => {
-  it('renders', () => {
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+describe("<App />", () => {
+  it("renders", () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-    )
-  })
-})
+    cy.mount(<RouterProvider router={router} />);
+  });
+});

submit-web/src/App.tsx

@@ -1,18 +1,25 @@
 import EAOAppBar from "@/components/EAOAppBar";
 import SideNavBar from "@/components/SideNavBar";
 import { Box } from "@mui/material";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 
 function App() {
   return (
     <>
       <EAOAppBar />
       <Box display={"flex"}>
         <SideNavBar />
-        <Box display={"flex"} flexDirection={"column"} flex={1} padding={"1rem"}>
+        <Box
+          display={"flex"}
+          flexDirection={"column"}
+          flex={1}
+          padding={"1rem"}
+        >
           <Outlet />
         </Box>
       </Box>
+      <TanStackRouterDevtools />
     </>
   );
 }

submit-web/src/components/SideNavBar.tsx

@@ -1,10 +1,10 @@
-import { Box, List, ListItem, ListItemButton, useTheme } from "@mui/material";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { Box, List, ListItem, ListItemButton } from "@mui/material";
+import { Link } from "@tanstack/react-router";
+import { theme } from "@/styles/theme";
 
 export default function SideNavBar() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const theme = useTheme();
+  const [currentPath, setCurrentPath] = useState(window.location.pathname);
 
   const routes = [
     {
@@ -31,22 +31,31 @@ export default function SideNavBar() {
         <List>
           {routes.map((route) => (
             <ListItem key={route.routeName}>
-              <ListItemButton
-                onClick={() => navigate(route.path)}
-                sx={{
-                  fontWeight: "700",
-                  backgroundColor:
-                    location.pathname === route.path
-                      ? "rgba(0, 0, 0, 0.1)"
-                      : "transparent",
-                  borderLeft:
-                    location.pathname === route.path
-                      ? `4px solid ${theme.palette.primary.main}`
-                      : "none",
+              <Link
+                to={route.path}
+                onClick={() => setCurrentPath(route.path)}
+                style={{
+                  color: theme.palette.primary.main,
+                  fontWeight: currentPath === route.path ? "bold" : "normal",
+                  textDecoration: "none",
+                  width: "100%",
                 }}
               >
-                {route.routeName}
-              </ListItemButton>
+                <ListItemButton
+                  sx={{
+                    backgroundColor:
+                      currentPath === route.path
+                        ? "rgba(0, 0, 0, 0.1)"
+                        : "transparent",
+                    borderLeft:
+                      currentPath === route.path
+                        ? `4px solid ${theme.palette.primary.main}`
+                        : "none",
+                  }}
+                >
+                  <span style={{ color: "inherit" }}>{route.routeName}</span>
+                </ListItemButton>
+              </Link>
             </ListItem>
           ))}
         </List>

submit-web/src/main.tsx

@@ -2,16 +2,26 @@ import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { ThemeProvider } from "@mui/material";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
+import { routeTree } from './routeTree.gen.ts'
 import { theme } from "@/styles/theme";
 import "@/styles/App.scss";
 
-import router from "@/routes/router";
+
+// Create a new router instance
+const router = createRouter({ routeTree })
 
 const queryClient = new QueryClient();
 
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+
 // Render the app
 const rootElement = document.getElementById("root")!;
 if (!rootElement.innerHTML) {
@@ -20,7 +30,7 @@ if (!rootElement.innerHTML) {
     <StrictMode>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
-          <RouterProvider router={router} />
+        <RouterProvider router={router} />
         </ThemeProvider>
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>

submit-web/src/pages/Plans/PlanListPage.tsx

@@ -11,7 +11,7 @@ import {
 import { usePlansData } from "@/hooks/usePlans";
 import { AxiosResponse } from "axios";
 import { Plan } from "@/models/Plan";
-import { Link } from "react-router-dom";
+import { Link } from "@tanstack/react-router";
 
 export default function PlanListPage() {
   const { isLoading, data, isError, error } = usePlansData();
@@ -39,13 +39,18 @@ export default function PlanListPage() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {plans.map((row: Plan) => (
+            {plans?.map((row: Plan) => (
               <TableRow
                 key={row.id}
                 sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
               >
                 <TableCell component="th" scope="row">
-                  <Link to={`${row.id}`}>{row.name}</Link>
+                  <Link
+                    to={`/planslist/$planId`}
+                    params={{ planId: `${row.id}` }}
+                  >
+                    {row.name}
+                  </Link>
                 </TableCell>
                 <TableCell align="right">{row.submittedDate}</TableCell>
                 <TableCell align="right">{row.submittedBy}</TableCell>

submit-web/src/pages/Plans/PlanPage.tsx

@@ -2,20 +2,16 @@ import { usePlanById } from "@/hooks/usePlans";
 import { Plan } from "@/models/Plan";
 import { Box, Button, Chip } from "@mui/material";
 import { AxiosResponse } from "axios";
-import { useNavigate, useParams } from "react-router-dom";
+import { Link, useParams } from "@tanstack/react-router";
 
 export default function PlanPage() {
-  const navigate = useNavigate();
-  const { planIdParam } = useParams();
-
+  const { planId: planIdParam } = useParams({ strict: false });
   const planId = Number(planIdParam);
   const { status, data, isError, error, isFetching, isLoading } =
     usePlanById(planId);
 
   const plan: Plan = (data as AxiosResponse)?.data;
 
-  console.log(plan);
-
   if (isLoading) {
     return <h2>Loading...</h2>;
   }
@@ -43,13 +39,11 @@ export default function PlanPage() {
             <p>On {plan.submittedDate}</p>
           </div>
           <div>{isFetching ? "Background Updating..." : " "}</div>
-          <Button
-            variant="outlined"
-            color="primary"
-            onClick={() => navigate("/planslist")}
-          >
-            Go Back
-          </Button>
+          <Link to={"/planslist"}>
+            <Button variant="outlined" color="primary">
+              Go Back
+            </Button>
+          </Link>
         </>
       )}
     </div>