From 565074c22f8f0500529b43a4562dc8f58196a16c Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 10:52:36 -0400 Subject: [PATCH 01/16] tanstack router setup --- submit-web/src/App.tsx | 4 +- submit-web/src/components/SideNavBar.tsx | 49 +++++--- submit-web/src/main.tsx | 18 ++- submit-web/src/pages/Plans/PlanListPage.tsx | 4 +- submit-web/src/routeTree.gen.ts | 118 ++++++++++++++++++++ submit-web/src/routes/About.lazy.tsx | 6 + submit-web/src/routes/NewPage.tsx | 15 +++ submit-web/src/routes/PlansList.lazy.tsx | 6 + submit-web/src/routes/__root.tsx | 20 ++++ submit-web/src/routes/index.lazy.tsx | 10 ++ 10 files changed, 226 insertions(+), 24 deletions(-) create mode 100644 submit-web/src/routeTree.gen.ts create mode 100644 submit-web/src/routes/About.lazy.tsx create mode 100644 submit-web/src/routes/NewPage.tsx create mode 100644 submit-web/src/routes/PlansList.lazy.tsx create mode 100644 submit-web/src/routes/__root.tsx create mode 100644 submit-web/src/routes/index.lazy.tsx diff --git a/submit-web/src/App.tsx b/submit-web/src/App.tsx index 4b4c508a..81aac34f 100644 --- a/submit-web/src/App.tsx +++ b/submit-web/src/App.tsx @@ -1,7 +1,8 @@ import EAOAppBar from "@/components/EAOAppBar"; import SideNavBar from "@/components/SideNavBar"; import { Box } from "@mui/material"; -import { Outlet } from "react-router-dom"; +import { createRootRoute, Outlet } from "@tanstack/react-router"; +import { TanStackRouterDevtools } from "@tanstack/router-devtools"; function App() { return ( @@ -13,6 +14,7 @@ function App() { + ); } diff --git a/submit-web/src/components/SideNavBar.tsx b/submit-web/src/components/SideNavBar.tsx index 298cf573..4708e3b4 100644 --- a/submit-web/src/components/SideNavBar.tsx +++ b/submit-web/src/components/SideNavBar.tsx @@ -1,10 +1,15 @@ +import { useState, useEffect } from "react"; import { Box, List, ListItem, ListItemButton, useTheme } from "@mui/material"; -import { useLocation, useNavigate } from "react-router-dom"; +import { Link, useLocation } from "@tanstack/react-router"; +import { theme } from "@/styles/theme"; export default function SideNavBar() { - const navigate = useNavigate(); + const [currentPath, setCurrentPath] = useState(window.location.pathname); const location = useLocation(); - const theme = useTheme(); + + useEffect(() => { + setCurrentPath(location.pathname); + }, [location]); const routes = [ { @@ -31,22 +36,32 @@ export default function SideNavBar() { {routes.map((route) => ( - 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", + setCurrentPath(route.path)} + style={{ + color: theme.palette.primary.main, + fontWeight: currentPath === route.path ? "bold" : "normal", + textDecoration: "none", + width: "100%", }} > - {route.routeName} - + + {route.routeName} + + ))} diff --git a/submit-web/src/main.tsx b/submit-web/src/main.tsx index 9f8d0289..94cd74c3 100644 --- a/submit-web/src/main.tsx +++ b/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) { - + diff --git a/submit-web/src/pages/Plans/PlanListPage.tsx b/submit-web/src/pages/Plans/PlanListPage.tsx index 60ebf519..034973e1 100644 --- a/submit-web/src/pages/Plans/PlanListPage.tsx +++ b/submit-web/src/pages/Plans/PlanListPage.tsx @@ -16,7 +16,7 @@ import { Link } from "react-router-dom"; export default function PlanListPage() { const { isLoading, data, isError, error } = usePlansData(); - const plans: Array = (data as AxiosResponse)?.data; + const plans: Array = []; if (isLoading) { return

Loading...

; @@ -39,7 +39,7 @@ export default function PlanListPage() { - {plans.map((row: Plan) => ( + {plans?.map((row: Plan) => ( rootRoute, +} as any).lazy(() => import('./routes/PlansList.lazy').then((d) => d.Route)) + +const AboutLazyRoute = AboutLazyImport.update({ + path: '/About', + getParentRoute: () => rootRoute, +} as any).lazy(() => import('./routes/About.lazy').then((d) => d.Route)) + +const NewPageRoute = NewPageImport.update({ + path: '/NewPage', + getParentRoute: () => rootRoute, +} as any) + +const IndexLazyRoute = IndexLazyImport.update({ + path: '/', + getParentRoute: () => rootRoute, +} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route)) + +// Populate the FileRoutesByPath interface + +declare module '@tanstack/react-router' { + interface FileRoutesByPath { + '/': { + id: '/' + path: '/' + fullPath: '/' + preLoaderRoute: typeof IndexLazyImport + parentRoute: typeof rootRoute + } + '/NewPage': { + id: '/NewPage' + path: '/NewPage' + fullPath: '/NewPage' + preLoaderRoute: typeof NewPageImport + parentRoute: typeof rootRoute + } + '/About': { + id: '/About' + path: '/About' + fullPath: '/About' + preLoaderRoute: typeof AboutLazyImport + parentRoute: typeof rootRoute + } + '/PlansList': { + id: '/PlansList' + path: '/PlansList' + fullPath: '/PlansList' + preLoaderRoute: typeof PlansListLazyImport + parentRoute: typeof rootRoute + } + } +} + +// Create and export the route tree + +export const routeTree = rootRoute.addChildren({ + IndexLazyRoute, + NewPageRoute, + AboutLazyRoute, + PlansListLazyRoute, +}) + +/* prettier-ignore-end */ + +/* ROUTE_MANIFEST_START +{ + "routes": { + "__root__": { + "filePath": "__root.tsx", + "children": [ + "/", + "/NewPage", + "/About", + "/PlansList" + ] + }, + "/": { + "filePath": "index.lazy.tsx" + }, + "/NewPage": { + "filePath": "NewPage.tsx" + }, + "/About": { + "filePath": "About.lazy.tsx" + }, + "/PlansList": { + "filePath": "PlansList.lazy.tsx" + } + } +} +ROUTE_MANIFEST_END */ diff --git a/submit-web/src/routes/About.lazy.tsx b/submit-web/src/routes/About.lazy.tsx new file mode 100644 index 00000000..a06489d4 --- /dev/null +++ b/submit-web/src/routes/About.lazy.tsx @@ -0,0 +1,6 @@ +import { createLazyFileRoute } from "@tanstack/react-router"; +import About from "@/pages/About"; + +export const Route = createLazyFileRoute("/About")({ + component: () => , +}); diff --git a/submit-web/src/routes/NewPage.tsx b/submit-web/src/routes/NewPage.tsx new file mode 100644 index 00000000..1edbe56f --- /dev/null +++ b/submit-web/src/routes/NewPage.tsx @@ -0,0 +1,15 @@ +import { Container } from "@mui/material"; +import { createFileRoute } from "@tanstack/react-router"; + +export const Route = createFileRoute("/NewPage")({ + component: NewPage, +}); + +function NewPage() { + return ( + +

New Page

+

File based routing - Auto Creation!

+ + ); +} \ No newline at end of file diff --git a/submit-web/src/routes/PlansList.lazy.tsx b/submit-web/src/routes/PlansList.lazy.tsx new file mode 100644 index 00000000..6427c28b --- /dev/null +++ b/submit-web/src/routes/PlansList.lazy.tsx @@ -0,0 +1,6 @@ +import { createLazyFileRoute } from "@tanstack/react-router"; +import PlanListPage from "@/pages/Plans/PlanListPage"; + +export const Route = createLazyFileRoute("/PlansList")({ + component: PlanListPage, +}); diff --git a/submit-web/src/routes/__root.tsx b/submit-web/src/routes/__root.tsx new file mode 100644 index 00000000..d0133f58 --- /dev/null +++ b/submit-web/src/routes/__root.tsx @@ -0,0 +1,20 @@ +import EAOAppBar from "@/components/EAOAppBar"; +import SideNavBar from "@/components/SideNavBar"; +import { Box } from "@mui/material"; +import { createRootRoute, Outlet } from "@tanstack/react-router"; +import { TanStackRouterDevtools } from "@tanstack/router-devtools"; + +export const Route = createRootRoute({ + component: () => ( + <> + + + + + + + + + + ), +}); \ No newline at end of file diff --git a/submit-web/src/routes/index.lazy.tsx b/submit-web/src/routes/index.lazy.tsx new file mode 100644 index 00000000..0d5b3656 --- /dev/null +++ b/submit-web/src/routes/index.lazy.tsx @@ -0,0 +1,10 @@ +import { createLazyFileRoute } from "@tanstack/react-router"; +import Home from "@/pages/Home"; + +export const Route = createLazyFileRoute("/")({ + component: Index, +}); + +function Index() { + return ; +} From 412f7b7e794f9899701c11dc014c9a9a49d64b03 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 11:02:55 -0400 Subject: [PATCH 02/16] setup tanstack and tanstack dev tools in packagejson --- submit-web/package.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/submit-web/package.json b/submit-web/package.json index 46397bbc..cb180de4 100644 --- a/submit-web/package.json +++ b/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", From ad66567933601524f78bbd2385b3631202e23f65 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 11:44:05 -0400 Subject: [PATCH 03/16] setup planId --- submit-web/.gitignore | 2 +- submit-web/src/pages/Plans/PlanListPage.tsx | 19 +++- submit-web/src/pages/Plans/PlanPage.tsx | 71 +++++--------- submit-web/src/pages/Plans/Plans.tsx | 7 -- submit-web/src/routeTree.gen.ts | 102 +++++++++++--------- submit-web/src/routes/Plan.lazy.tsx | 6 ++ submit-web/src/routes/router.tsx | 62 ------------ 7 files changed, 107 insertions(+), 162 deletions(-) delete mode 100644 submit-web/src/pages/Plans/Plans.tsx create mode 100644 submit-web/src/routes/Plan.lazy.tsx delete mode 100644 submit-web/src/routes/router.tsx diff --git a/submit-web/.gitignore b/submit-web/.gitignore index a0e3b0fa..dd3d88b9 100644 --- a/submit-web/.gitignore +++ b/submit-web/.gitignore @@ -22,5 +22,5 @@ dist-ssr *.njsproj *.sln *.sw? - +.package-lock.json .idea diff --git a/submit-web/src/pages/Plans/PlanListPage.tsx b/submit-web/src/pages/Plans/PlanListPage.tsx index 034973e1..cee70d4a 100644 --- a/submit-web/src/pages/Plans/PlanListPage.tsx +++ b/submit-web/src/pages/Plans/PlanListPage.tsx @@ -11,12 +11,20 @@ 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(); - const plans: Array = []; + const plans: Array = [ + { + id: 1, + name: "Test Plan", + submittedDate: "2021-10-10", + submittedBy: "Test User", + isCompleted: false, + }, + ]; if (isLoading) { return

Loading...

; @@ -45,7 +53,12 @@ export default function PlanListPage() { sx={{ "&:last-child td, &:last-child th": { border: 0 } }} > - {row.name} + + {row.name} + {row.submittedDate} {row.submittedBy} diff --git a/submit-web/src/pages/Plans/PlanPage.tsx b/submit-web/src/pages/Plans/PlanPage.tsx index 5256149f..591a7e1a 100644 --- a/submit-web/src/pages/Plans/PlanPage.tsx +++ b/submit-web/src/pages/Plans/PlanPage.tsx @@ -1,57 +1,38 @@ 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"; export default function PlanPage() { - const navigate = useNavigate(); - const { planIdParam } = useParams(); + console.log("HERE"); - const planId = Number(planIdParam); - const { status, data, isError, error, isFetching, isLoading } = - usePlanById(planId); - - const plan: Plan = (data as AxiosResponse)?.data; + const plan: Plan = { + id: 1, + name: "Test Plan", + submittedBy: "Test User", + submittedDate: "2021-10-10", + isCompleted: false, + }; console.log(plan); - if (isLoading) { - return

Loading...

; - } - - if (isError) { - return

{error.message}

; - } - return ( -
- {!planId || status === "pending" ? ( - "Loading..." - ) : ( - <> - -

{plan.name}

- {plan.isCompleted ? ( - - ) : ( - - )} - -
-

Submitted by: {plan.submittedBy}

-

On {plan.submittedDate}

-
-
{isFetching ? "Background Updating..." : " "}
- - - )} -
+ <> + +

{plan.name}

+ {plan.isCompleted ? ( + + ) : ( + + )} + +
+

Submitted by: {plan.submittedBy}

+

On {plan.submittedDate}

+
+ {/*
{isFetching ? "Background Updating..." : " "}
*/} + + ); } diff --git a/submit-web/src/pages/Plans/Plans.tsx b/submit-web/src/pages/Plans/Plans.tsx deleted file mode 100644 index effcbe45..00000000 --- a/submit-web/src/pages/Plans/Plans.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { Outlet } from "react-router-dom"; - -export default function Plans() { - return ( - - ) -} diff --git a/submit-web/src/routeTree.gen.ts b/submit-web/src/routeTree.gen.ts index 8d297d3f..3f7e19dc 100644 --- a/submit-web/src/routeTree.gen.ts +++ b/submit-web/src/routeTree.gen.ts @@ -8,73 +8,86 @@ // This file is auto-generated by TanStack Router -import { createFileRoute } from '@tanstack/react-router' +import { createFileRoute } from "@tanstack/react-router"; // Import Routes -import { Route as rootRoute } from './routes/__root' -import { Route as NewPageImport } from './routes/NewPage' +import { Route as rootRoute } from "./routes/__root"; +import { Route as NewPageImport } from "./routes/NewPage"; // Create Virtual Routes -const PlansListLazyImport = createFileRoute('/PlansList')() -const AboutLazyImport = createFileRoute('/About')() -const IndexLazyImport = createFileRoute('/')() +const PlansListLazyImport = createFileRoute("/PlansList")(); +const AboutLazyImport = createFileRoute("/About")(); +const IndexLazyImport = createFileRoute("/")(); +const PlanPageImport = createFileRoute("/planslist/$planId")(); // Create/Update Routes const PlansListLazyRoute = PlansListLazyImport.update({ - path: '/PlansList', + path: "/PlansList", getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/PlansList.lazy').then((d) => d.Route)) +} as any).lazy(() => import("./routes/PlansList.lazy").then((d) => d.Route)); + +const PlanPageRoute = PlanPageImport.update({ + path: "/planslist/$planId", + getParentRoute: () => rootRoute, +} as any); const AboutLazyRoute = AboutLazyImport.update({ - path: '/About', + path: "/About", getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/About.lazy').then((d) => d.Route)) +} as any).lazy(() => import("./routes/About.lazy").then((d) => d.Route)); const NewPageRoute = NewPageImport.update({ - path: '/NewPage', + path: "/NewPage", getParentRoute: () => rootRoute, -} as any) +} as any); const IndexLazyRoute = IndexLazyImport.update({ - path: '/', + path: "/", getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route)) +} as any).lazy(() => import("./routes/index.lazy").then((d) => d.Route)); // Populate the FileRoutesByPath interface -declare module '@tanstack/react-router' { +declare module "@tanstack/react-router" { interface FileRoutesByPath { - '/': { - id: '/' - path: '/' - fullPath: '/' - preLoaderRoute: typeof IndexLazyImport - parentRoute: typeof rootRoute - } - '/NewPage': { - id: '/NewPage' - path: '/NewPage' - fullPath: '/NewPage' - preLoaderRoute: typeof NewPageImport - parentRoute: typeof rootRoute - } - '/About': { - id: '/About' - path: '/About' - fullPath: '/About' - preLoaderRoute: typeof AboutLazyImport - parentRoute: typeof rootRoute - } - '/PlansList': { - id: '/PlansList' - path: '/PlansList' - fullPath: '/PlansList' - preLoaderRoute: typeof PlansListLazyImport - parentRoute: typeof rootRoute - } + "/": { + id: "/"; + path: "/"; + fullPath: "/"; + preLoaderRoute: typeof IndexLazyImport; + parentRoute: typeof rootRoute; + }; + "/NewPage": { + id: "/NewPage"; + path: "/NewPage"; + fullPath: "/NewPage"; + preLoaderRoute: typeof NewPageImport; + parentRoute: typeof rootRoute; + }; + "/About": { + id: "/About"; + path: "/About"; + fullPath: "/About"; + preLoaderRoute: typeof AboutLazyImport; + parentRoute: typeof rootRoute; + }; + "/PlansList": { + id: "/PlansList"; + path: "/PlansList"; + fullPath: "/PlansList"; + preLoaderRoute: typeof PlansListLazyImport; + parentRoute: typeof rootRoute; + }; + "/planslist/$planId": { + id: "/planslist/$planId"; + path: '/planslist/$planId'; + fullPath: '/planslist/$planId'; + preLoaderRoute: typeof PlanPageImport; + parentRoute: typeof rootRoute; + }; } } @@ -85,7 +98,8 @@ export const routeTree = rootRoute.addChildren({ NewPageRoute, AboutLazyRoute, PlansListLazyRoute, -}) + PlanPageRoute, +}); /* prettier-ignore-end */ diff --git a/submit-web/src/routes/Plan.lazy.tsx b/submit-web/src/routes/Plan.lazy.tsx new file mode 100644 index 00000000..b45ecde0 --- /dev/null +++ b/submit-web/src/routes/Plan.lazy.tsx @@ -0,0 +1,6 @@ +import { createFileRoute } from "@tanstack/react-router"; +import PlanPage from "@/pages/Plans/PlanPage"; + +export const Route = createFileRoute("/planslist/$planId")({ + component: PlanPage, +}); diff --git a/submit-web/src/routes/router.tsx b/submit-web/src/routes/router.tsx deleted file mode 100644 index 11b48081..00000000 --- a/submit-web/src/routes/router.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import Home from "@/pages/Home"; -import { createBrowserRouter } from "react-router-dom"; -import PageNotFound from "@/pages/PageNotFound"; -import About from "@/pages/About"; -import App from "@/App"; -import PlanListPage from "@/pages/Plans/PlanListPage"; -import PlanPage from "@/pages/Plans/PlanPage"; -import Plans from "@/pages/Plans/Plans"; - -const router = createBrowserRouter([ - { - id: "root", - path: "/", - // loader() { - // // Our root route always provides the user, if logged in - // return { user: fakeAuthProvider.username }; - // }, - Component: App, - errorElement: , - children: [ - { - index: true, - Component: Home, - }, - { - path: "about", - // action: loginAction, - // loader: loginLoader, - Component: About, - }, - { - path: "planslist", - Component: Plans, - children: [ - { - index: true, - Component: PlanListPage, - }, - { - path: ":planIdParam", - Component: PlanPage, - }, - ], - }, - // { - // path: "protected", - // loader: protectedLoader, - // Component: ProtectedPage, - // }, - ], - }, - // { - // path: "/logout", - // async action() { - // // We signout in a "resource route" that we can hit from a fetcher.Form - // await fakeAuthProvider.signout(); - // return redirect("/"); - // }, - // }, -]); - -export default router; From 9b3dfc03faae951d36f40f513165e789f9514cc6 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 12:29:57 -0400 Subject: [PATCH 04/16] remove use navigate --- .gitignore | 2 +- submit-web/.gitignore | 2 +- submit-web/src/pages/Plans/PlanPage.tsx | 68 ++++++++++++------- submit-web/src/routeTree.gen.ts | 2 +- .../{Plan.lazy.tsx => Plans/$planId.tsx} | 1 + .../src/routes/{ => Plans}/PlansList.lazy.tsx | 0 6 files changed, 46 insertions(+), 29 deletions(-) rename submit-web/src/routes/{Plan.lazy.tsx => Plans/$planId.tsx} (99%) rename submit-web/src/routes/{ => Plans}/PlansList.lazy.tsx (100%) diff --git a/.gitignore b/.gitignore index 7b6caf34..6ed09ada 100644 --- a/.gitignore +++ b/.gitignore @@ -25,7 +25,7 @@ share/python-wheels/ .installed.cfg *.egg MANIFEST - +package-lock.json # 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. diff --git a/submit-web/.gitignore b/submit-web/.gitignore index dd3d88b9..36747344 100644 --- a/submit-web/.gitignore +++ b/submit-web/.gitignore @@ -22,5 +22,5 @@ dist-ssr *.njsproj *.sln *.sw? -.package-lock.json +package-lock.json .idea diff --git a/submit-web/src/pages/Plans/PlanPage.tsx b/submit-web/src/pages/Plans/PlanPage.tsx index 591a7e1a..865d3b02 100644 --- a/submit-web/src/pages/Plans/PlanPage.tsx +++ b/submit-web/src/pages/Plans/PlanPage.tsx @@ -1,38 +1,54 @@ import { usePlanById } from "@/hooks/usePlans"; import { Plan } from "@/models/Plan"; import { Box, Button, Chip } from "@mui/material"; +import { AxiosResponse } from "axios"; +import { Link, useParams } from "@tanstack/react-router"; export default function PlanPage() { - console.log("HERE"); + const { planIdParam } = useParams(); - const plan: Plan = { - id: 1, - name: "Test Plan", - submittedBy: "Test User", - submittedDate: "2021-10-10", - isCompleted: 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

Loading...

; + } + + if (isError) { + return

{error.message}

; + } + return ( - <> - -

{plan.name}

- {plan.isCompleted ? ( - - ) : ( - - )} - -
-

Submitted by: {plan.submittedBy}

-

On {plan.submittedDate}

-
- {/*
{isFetching ? "Background Updating..." : " "}
*/} - - +
+ {!planId || status === "pending" ? ( + "Loading..." + ) : ( + <> + +

{plan.name}

+ {plan.isCompleted ? ( + + ) : ( + + )} + +
+

Submitted by: {plan.submittedBy}

+

On {plan.submittedDate}

+
+
{isFetching ? "Background Updating..." : " "}
+ + + + + )} +
); } diff --git a/submit-web/src/routeTree.gen.ts b/submit-web/src/routeTree.gen.ts index 3f7e19dc..006eb1a3 100644 --- a/submit-web/src/routeTree.gen.ts +++ b/submit-web/src/routeTree.gen.ts @@ -27,7 +27,7 @@ const PlanPageImport = createFileRoute("/planslist/$planId")(); const PlansListLazyRoute = PlansListLazyImport.update({ path: "/PlansList", getParentRoute: () => rootRoute, -} as any).lazy(() => import("./routes/PlansList.lazy").then((d) => d.Route)); +} as any).lazy(() => import("./routes/Plans/PlansList.lazy").then((d) => d.Route)); const PlanPageRoute = PlanPageImport.update({ path: "/planslist/$planId", diff --git a/submit-web/src/routes/Plan.lazy.tsx b/submit-web/src/routes/Plans/$planId.tsx similarity index 99% rename from submit-web/src/routes/Plan.lazy.tsx rename to submit-web/src/routes/Plans/$planId.tsx index b45ecde0..302be681 100644 --- a/submit-web/src/routes/Plan.lazy.tsx +++ b/submit-web/src/routes/Plans/$planId.tsx @@ -1,6 +1,7 @@ import { createFileRoute } from "@tanstack/react-router"; import PlanPage from "@/pages/Plans/PlanPage"; + export const Route = createFileRoute("/planslist/$planId")({ component: PlanPage, }); diff --git a/submit-web/src/routes/PlansList.lazy.tsx b/submit-web/src/routes/Plans/PlansList.lazy.tsx similarity index 100% rename from submit-web/src/routes/PlansList.lazy.tsx rename to submit-web/src/routes/Plans/PlansList.lazy.tsx From 0ad77c252658a3a7d2595bc0b4a5185971acdb81 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 12:42:55 -0400 Subject: [PATCH 05/16] setup planId for tanstack router --- submit-web/src/pages/Plans/PlanPage.tsx | 9 +++------ submit-web/src/routeTree.gen.ts | 12 +++++++----- .../routes/Plans/{$planId.tsx => $planId.lazy.tsx} | 0 3 files changed, 10 insertions(+), 11 deletions(-) rename submit-web/src/routes/Plans/{$planId.tsx => $planId.lazy.tsx} (100%) diff --git a/submit-web/src/pages/Plans/PlanPage.tsx b/submit-web/src/pages/Plans/PlanPage.tsx index 865d3b02..e92749ed 100644 --- a/submit-web/src/pages/Plans/PlanPage.tsx +++ b/submit-web/src/pages/Plans/PlanPage.tsx @@ -5,15 +5,12 @@ import { AxiosResponse } from "axios"; import { Link, useParams } from "@tanstack/react-router"; export default function PlanPage() { - 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); + const plan: Plan = data as AxiosResponse["data"]; if (isLoading) { return

Loading...

; @@ -42,7 +39,7 @@ export default function PlanPage() {

On {plan.submittedDate}

{isFetching ? "Background Updating..." : " "}
- + diff --git a/submit-web/src/routeTree.gen.ts b/submit-web/src/routeTree.gen.ts index 006eb1a3..e2870275 100644 --- a/submit-web/src/routeTree.gen.ts +++ b/submit-web/src/routeTree.gen.ts @@ -14,7 +14,7 @@ import { createFileRoute } from "@tanstack/react-router"; import { Route as rootRoute } from "./routes/__root"; import { Route as NewPageImport } from "./routes/NewPage"; - +import { Route as PlanPageImport } from "./routes/Plans/$planId.lazy"; // Create Virtual Routes const PlansListLazyImport = createFileRoute("/PlansList")(); @@ -27,12 +27,14 @@ const PlanPageImport = createFileRoute("/planslist/$planId")(); const PlansListLazyRoute = PlansListLazyImport.update({ path: "/PlansList", getParentRoute: () => rootRoute, -} as any).lazy(() => import("./routes/Plans/PlansList.lazy").then((d) => d.Route)); +} as any).lazy(() => + import("./routes/Plans/PlansList.lazy").then((d) => d.Route) +); const PlanPageRoute = PlanPageImport.update({ path: "/planslist/$planId", getParentRoute: () => rootRoute, -} as any); +} as any).lazy(() => import("./routes/Plans/$planId.lazy").then((d) => d.Route)); const AboutLazyRoute = AboutLazyImport.update({ path: "/About", @@ -83,8 +85,8 @@ declare module "@tanstack/react-router" { }; "/planslist/$planId": { id: "/planslist/$planId"; - path: '/planslist/$planId'; - fullPath: '/planslist/$planId'; + path: "/planslist/$planId"; + fullPath: "/planslist/$planId"; preLoaderRoute: typeof PlanPageImport; parentRoute: typeof rootRoute; }; diff --git a/submit-web/src/routes/Plans/$planId.tsx b/submit-web/src/routes/Plans/$planId.lazy.tsx similarity index 100% rename from submit-web/src/routes/Plans/$planId.tsx rename to submit-web/src/routes/Plans/$planId.lazy.tsx From 5fe8c690a09dead395b8dd16fc250cb3aa8ad012 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 12:44:40 -0400 Subject: [PATCH 06/16] remove unused use effect --- submit-web/src/components/SideNavBar.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/submit-web/src/components/SideNavBar.tsx b/submit-web/src/components/SideNavBar.tsx index 4708e3b4..60e2fce2 100644 --- a/submit-web/src/components/SideNavBar.tsx +++ b/submit-web/src/components/SideNavBar.tsx @@ -5,11 +5,6 @@ import { theme } from "@/styles/theme"; export default function SideNavBar() { const [currentPath, setCurrentPath] = useState(window.location.pathname); - const location = useLocation(); - - useEffect(() => { - setCurrentPath(location.pathname); - }, [location]); const routes = [ { From 37759e46125a515979f1e36a0f95c69f67aa4e44 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 12:46:26 -0400 Subject: [PATCH 07/16] set up routes --- submit-web/src/pages/Plans/PlanListPage.tsx | 10 +--------- submit-web/src/pages/Plans/PlanPage.tsx | 2 +- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/submit-web/src/pages/Plans/PlanListPage.tsx b/submit-web/src/pages/Plans/PlanListPage.tsx index cee70d4a..921eab8a 100644 --- a/submit-web/src/pages/Plans/PlanListPage.tsx +++ b/submit-web/src/pages/Plans/PlanListPage.tsx @@ -16,15 +16,7 @@ import { Link } from "@tanstack/react-router"; export default function PlanListPage() { const { isLoading, data, isError, error } = usePlansData(); - const plans: Array = [ - { - id: 1, - name: "Test Plan", - submittedDate: "2021-10-10", - submittedBy: "Test User", - isCompleted: false, - }, - ]; + const plans: Array = (data as AxiosResponse)?.data; if (isLoading) { return

Loading...

; diff --git a/submit-web/src/pages/Plans/PlanPage.tsx b/submit-web/src/pages/Plans/PlanPage.tsx index e92749ed..444006a2 100644 --- a/submit-web/src/pages/Plans/PlanPage.tsx +++ b/submit-web/src/pages/Plans/PlanPage.tsx @@ -10,7 +10,7 @@ export default function PlanPage() { const { status, data, isError, error, isFetching, isLoading } = usePlanById(planId); - const plan: Plan = data as AxiosResponse["data"]; + const plan: Plan = (data as AxiosResponse)?.data; if (isLoading) { return

Loading...

; From 563f3d014eb189d28b1770e168e4e54c2d36e9a0 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 12:48:11 -0400 Subject: [PATCH 08/16] remove unused imports --- submit-web/src/components/SideNavBar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/submit-web/src/components/SideNavBar.tsx b/submit-web/src/components/SideNavBar.tsx index 60e2fce2..3b73a059 100644 --- a/submit-web/src/components/SideNavBar.tsx +++ b/submit-web/src/components/SideNavBar.tsx @@ -1,6 +1,6 @@ -import { useState, useEffect } from "react"; -import { Box, List, ListItem, ListItemButton, useTheme } from "@mui/material"; -import { Link, useLocation } from "@tanstack/react-router"; +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() { From d37d79c371482000f99ebb601940d6fd3fecb8b1 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 12:50:55 -0400 Subject: [PATCH 09/16] fix errors and linting --- submit-web/src/App.cy.tsx | 19 +++++++------------ submit-web/src/App.tsx | 9 +++++++-- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/submit-web/src/App.cy.tsx b/submit-web/src/App.cy.tsx index f7c26782..68a2d621 100644 --- a/submit-web/src/App.cy.tsx +++ b/submit-web/src/App.cy.tsx @@ -1,14 +1,9 @@ -import React from 'react' -import App from './App' -import { BrowserRouter } from 'react-router-dom' +import React from "react"; +import App from "./App"; -describe('', () => { - it('renders', () => { +describe("", () => { + it("renders", () => { // see: https://on.cypress.io/mounting-react - cy.mount( - - - - ) - }) -}) \ No newline at end of file + cy.mount(); + }); +}); diff --git a/submit-web/src/App.tsx b/submit-web/src/App.tsx index 81aac34f..357e86ca 100644 --- a/submit-web/src/App.tsx +++ b/submit-web/src/App.tsx @@ -1,7 +1,7 @@ import EAOAppBar from "@/components/EAOAppBar"; import SideNavBar from "@/components/SideNavBar"; import { Box } from "@mui/material"; -import { createRootRoute, Outlet } from "@tanstack/react-router"; +import { Outlet } from "@tanstack/react-router"; import { TanStackRouterDevtools } from "@tanstack/router-devtools"; function App() { @@ -10,7 +10,12 @@ function App() { - + From e0b36968bf8897693d0f9a88e8b1c9377da44e7d Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 12:53:21 -0400 Subject: [PATCH 10/16] setup bolding on highlighted nav --- submit-web/src/components/SideNavBar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/submit-web/src/components/SideNavBar.tsx b/submit-web/src/components/SideNavBar.tsx index 3b73a059..26db31b7 100644 --- a/submit-web/src/components/SideNavBar.tsx +++ b/submit-web/src/components/SideNavBar.tsx @@ -43,7 +43,6 @@ export default function SideNavBar() { > Date: Fri, 12 Jul 2024 12:59:16 -0400 Subject: [PATCH 11/16] refactor root --- submit-web/src/routes/__root.tsx | 22 ++++------------------ 1 file changed, 4 insertions(+), 18 deletions(-) diff --git a/submit-web/src/routes/__root.tsx b/submit-web/src/routes/__root.tsx index d0133f58..fdd5d27d 100644 --- a/submit-web/src/routes/__root.tsx +++ b/submit-web/src/routes/__root.tsx @@ -1,20 +1,6 @@ -import EAOAppBar from "@/components/EAOAppBar"; -import SideNavBar from "@/components/SideNavBar"; -import { Box } from "@mui/material"; -import { createRootRoute, Outlet } from "@tanstack/react-router"; -import { TanStackRouterDevtools } from "@tanstack/router-devtools"; +import App from "@/App"; +import { createRootRoute } from "@tanstack/react-router"; export const Route = createRootRoute({ - component: () => ( - <> - - - - - - - - - - ), -}); \ No newline at end of file + component: () => , +}); From 531eae7c91a949724e944ab8731e2f9240d29ed1 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 13:00:53 -0400 Subject: [PATCH 12/16] refactor tests --- submit-web/src/App.cy.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/submit-web/src/App.cy.tsx b/submit-web/src/App.cy.tsx index 68a2d621..6237242f 100644 --- a/submit-web/src/App.cy.tsx +++ b/submit-web/src/App.cy.tsx @@ -1,9 +1,12 @@ -import React from "react"; -import App from "./App"; +import { routeTree } from "./routeTree.gen.ts"; +import { createRouter, RouterProvider } from "@tanstack/react-router"; + +// Create a new router instance +const router = createRouter({ routeTree }); describe("", () => { it("renders", () => { // see: https://on.cypress.io/mounting-react - cy.mount(); + cy.mount(); }); }); From dbe6ff13cb62d2239720454f5953c75d0eded156 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 12 Jul 2024 13:30:05 -0400 Subject: [PATCH 13/16] setup vite config --- submit-web/.gitignore | 1 + submit-web/vite.config.ts | 17 +++++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/submit-web/.gitignore b/submit-web/.gitignore index 36747344..9a3124a8 100644 --- a/submit-web/.gitignore +++ b/submit-web/.gitignore @@ -11,6 +11,7 @@ node_modules dist dist-ssr *.local +package-lock.json # Editor directories and files .vscode/* diff --git a/submit-web/vite.config.ts b/submit-web/vite.config.ts index 3365f342..d0376577 100644 --- a/submit-web/vite.config.ts +++ b/submit-web/vite.config.ts @@ -1,12 +1,13 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' - +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; +import { TanStackRouterVite } from "@tanstack/router-plugin/vite"; // https://vitejs.dev/config/ + export default defineConfig({ - plugins: [react()], + plugins: [TanStackRouterVite(), react()], resolve: { alias: { - '@': '/src' - } - } -}) + "@": "/src", + }, + }, +}); From c38c94cf52400486ea4477b0e09c7b7549ea63d7 Mon Sep 17 00:00:00 2001 From: djnunez-aot <103138766+djnunez-aot@users.noreply.github.com> Date: Tue, 16 Jul 2024 14:50:17 -0400 Subject: [PATCH 14/16] Update .gitignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 6ed09ada..25d51d80 100644 --- a/.gitignore +++ b/.gitignore @@ -25,7 +25,6 @@ share/python-wheels/ .installed.cfg *.egg MANIFEST -package-lock.json # 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. From 09359f96bedb691df5c51a26b979491a6282df00 Mon Sep 17 00:00:00 2001 From: djnunez-aot <103138766+djnunez-aot@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:12:37 -0400 Subject: [PATCH 15/16] Update .gitignore --- submit-web/.gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/submit-web/.gitignore b/submit-web/.gitignore index 9a3124a8..36747344 100644 --- a/submit-web/.gitignore +++ b/submit-web/.gitignore @@ -11,7 +11,6 @@ node_modules dist dist-ssr *.local -package-lock.json # Editor directories and files .vscode/* From 48a6f16f2e217c4b99201ed9e921048e37dcfcfe Mon Sep 17 00:00:00 2001 From: djnunez-aot <103138766+djnunez-aot@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:13:08 -0400 Subject: [PATCH 16/16] remove package-lock --- submit-web/.gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/submit-web/.gitignore b/submit-web/.gitignore index 36747344..ecfdc93d 100644 --- a/submit-web/.gitignore +++ b/submit-web/.gitignore @@ -22,5 +22,4 @@ dist-ssr *.njsproj *.sln *.sw? -package-lock.json .idea