TanStack Router cleaned up - twas a journey

Author: CKennte11

frontend/src/routeTree.gen.ts

@@ -15,14 +15,17 @@ import { Route as SignupImport } from './routes/signup'
 import { Route as ResetPasswordImport } from './routes/reset-password'
 import { Route as RecoverPasswordImport } from './routes/recover-password'
 import { Route as LoginImport } from './routes/login'
-import { Route as LayoutImport } from './routes/_layout'
-import { Route as LayoutIndexImport } from './routes/_layout/index'
-import { Route as LayoutSettingsImport } from './routes/_layout/settings'
-import { Route as LayoutPathsImport } from './routes/_layout/paths'
-import { Route as LayoutItemsImport } from './routes/_layout/items'
-import { Route as LayoutAdminImport } from './routes/_layout/admin'
-import { Route as PathsCreateIndexImport } from './routes/paths/create/index'
-import { Route as PathsPathIdIndexImport } from './routes/paths/$pathId/index'
+import { Route as AuthenticatedImport } from './routes/_authenticated'
+import { Route as AuthenticatedIndexImport } from './routes/_authenticated/index'
+import { Route as AuthenticatedSettingsImport } from './routes/_authenticated/settings'
+import { Route as AuthenticatedItemsImport } from './routes/_authenticated/items'
+import { Route as AuthenticatedAdminImport } from './routes/_authenticated/admin'
+import { Route as AuthenticatedPathsIndexImport } from './routes/_authenticated/paths/index'
+import { Route as AuthenticatedLearnIndexImport } from './routes/_authenticated/learn/index'
+import { Route as AuthenticatedPathsCreateImport } from './routes/_authenticated/paths/create'
+import { Route as AuthenticatedPathsPathIdImport } from './routes/_authenticated/paths/$pathId'
+import { Route as AuthenticatedLearnChatImport } from './routes/_authenticated/learn/chat'
+import { Route as AuthenticatedLearnPathIdImport } from './routes/_authenticated/learn/$pathId'
 
 // Create/Update Routes
 
@@ -46,52 +49,67 @@ const LoginRoute = LoginImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const LayoutRoute = LayoutImport.update({
-  id: '/_layout',
+const AuthenticatedRoute = AuthenticatedImport.update({
+  id: '/_authenticated',
   getParentRoute: () => rootRoute,
 } as any)
 
-const LayoutIndexRoute = LayoutIndexImport.update({
+const AuthenticatedIndexRoute = AuthenticatedIndexImport.update({
   path: '/',
-  getParentRoute: () => LayoutRoute,
+  getParentRoute: () => AuthenticatedRoute,
 } as any)
 
-const LayoutSettingsRoute = LayoutSettingsImport.update({
+const AuthenticatedSettingsRoute = AuthenticatedSettingsImport.update({
   path: '/settings',
-  getParentRoute: () => LayoutRoute,
+  getParentRoute: () => AuthenticatedRoute,
 } as any)
 
-const LayoutPathsRoute = LayoutPathsImport.update({
-  path: '/paths',
-  getParentRoute: () => LayoutRoute,
-} as any)
-
-const LayoutItemsRoute = LayoutItemsImport.update({
+const AuthenticatedItemsRoute = AuthenticatedItemsImport.update({
   path: '/items',
-  getParentRoute: () => LayoutRoute,
+  getParentRoute: () => AuthenticatedRoute,
 } as any)
 
-const LayoutAdminRoute = LayoutAdminImport.update({
+const AuthenticatedAdminRoute = AuthenticatedAdminImport.update({
   path: '/admin',
-  getParentRoute: () => LayoutRoute,
+  getParentRoute: () => AuthenticatedRoute,
 } as any)
 
-const PathsCreateIndexRoute = PathsCreateIndexImport.update({
-  path: '/paths/create/',
-  getParentRoute: () => rootRoute,
+const AuthenticatedPathsIndexRoute = AuthenticatedPathsIndexImport.update({
+  path: '/paths/',
+  getParentRoute: () => AuthenticatedRoute,
 } as any)
 
-const PathsPathIdIndexRoute = PathsPathIdIndexImport.update({
-  path: '/paths/$pathId/',
-  getParentRoute: () => rootRoute,
+const AuthenticatedLearnIndexRoute = AuthenticatedLearnIndexImport.update({
+  path: '/learn/',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+
+const AuthenticatedPathsCreateRoute = AuthenticatedPathsCreateImport.update({
+  path: '/paths/create',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+
+const AuthenticatedPathsPathIdRoute = AuthenticatedPathsPathIdImport.update({
+  path: '/paths/$pathId',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+
+const AuthenticatedLearnChatRoute = AuthenticatedLearnChatImport.update({
+  path: '/learn/chat',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+
+const AuthenticatedLearnPathIdRoute = AuthenticatedLearnPathIdImport.update({
+  path: '/learn/$pathId',
+  getParentRoute: () => AuthenticatedRoute,
 } as any)
 
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/_layout': {
-      preLoaderRoute: typeof LayoutImport
+    '/_authenticated': {
+      preLoaderRoute: typeof AuthenticatedImport
       parentRoute: typeof rootRoute
     }
     '/login': {
@@ -110,53 +128,68 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SignupImport
       parentRoute: typeof rootRoute
     }
-    '/_layout/admin': {
-      preLoaderRoute: typeof LayoutAdminImport
-      parentRoute: typeof LayoutImport
+    '/_authenticated/admin': {
+      preLoaderRoute: typeof AuthenticatedAdminImport
+      parentRoute: typeof AuthenticatedImport
     }
-    '/_layout/items': {
-      preLoaderRoute: typeof LayoutItemsImport
-      parentRoute: typeof LayoutImport
+    '/_authenticated/items': {
+      preLoaderRoute: typeof AuthenticatedItemsImport
+      parentRoute: typeof AuthenticatedImport
     }
-    '/_layout/paths': {
-      preLoaderRoute: typeof LayoutPathsImport
-      parentRoute: typeof LayoutImport
+    '/_authenticated/settings': {
+      preLoaderRoute: typeof AuthenticatedSettingsImport
+      parentRoute: typeof AuthenticatedImport
     }
-    '/_layout/settings': {
-      preLoaderRoute: typeof LayoutSettingsImport
-      parentRoute: typeof LayoutImport
+    '/_authenticated/': {
+      preLoaderRoute: typeof AuthenticatedIndexImport
+      parentRoute: typeof AuthenticatedImport
     }
-    '/_layout/': {
-      preLoaderRoute: typeof LayoutIndexImport
-      parentRoute: typeof LayoutImport
+    '/_authenticated/learn/$pathId': {
+      preLoaderRoute: typeof AuthenticatedLearnPathIdImport
+      parentRoute: typeof AuthenticatedImport
     }
-    '/paths/$pathId/': {
-      preLoaderRoute: typeof PathsPathIdIndexImport
-      parentRoute: typeof rootRoute
+    '/_authenticated/learn/chat': {
+      preLoaderRoute: typeof AuthenticatedLearnChatImport
+      parentRoute: typeof AuthenticatedImport
     }
-    '/paths/create/': {
-      preLoaderRoute: typeof PathsCreateIndexImport
-      parentRoute: typeof rootRoute
+    '/_authenticated/paths/$pathId': {
+      preLoaderRoute: typeof AuthenticatedPathsPathIdImport
+      parentRoute: typeof AuthenticatedImport
+    }
+    '/_authenticated/paths/create': {
+      preLoaderRoute: typeof AuthenticatedPathsCreateImport
+      parentRoute: typeof AuthenticatedImport
+    }
+    '/_authenticated/learn/': {
+      preLoaderRoute: typeof AuthenticatedLearnIndexImport
+      parentRoute: typeof AuthenticatedImport
+    }
+    '/_authenticated/paths/': {
+      preLoaderRoute: typeof AuthenticatedPathsIndexImport
+      parentRoute: typeof AuthenticatedImport
     }
   }
 }
 
 // Create and export the route tree
 
 export const routeTree = rootRoute.addChildren([
-  LayoutRoute.addChildren([
-    LayoutAdminRoute,
-    LayoutItemsRoute,
-    LayoutPathsRoute,
-    LayoutSettingsRoute,
-    LayoutIndexRoute,
+  AuthenticatedRoute.addChildren([
+    AuthenticatedAdminRoute,
+    AuthenticatedItemsRoute,
+    AuthenticatedSettingsRoute,
+    AuthenticatedIndexRoute,
+    AuthenticatedLearnPathIdRoute,
+    AuthenticatedLearnChatRoute,
+    AuthenticatedPathsPathIdRoute,
+    AuthenticatedPathsCreateRoute,
+    AuthenticatedLearnIndexRoute,
+    AuthenticatedPathsIndexRoute,
   ]),
   LoginRoute,
   RecoverPasswordRoute,
   ResetPasswordRoute,
   SignupRoute,
-  PathsPathIdIndexRoute,
-  PathsCreateIndexRoute,
 ])
 
 /* prettier-ignore-end */

frontend/src/routes/_layout.tsx renamed to frontend/src/routes/_authenticated.tsx

@@ -5,7 +5,7 @@ import Sidebar from "../components/Common/Sidebar"
 import UserMenu from "../components/Common/UserMenu"
 import useAuth, { isLoggedIn } from "../hooks/useAuth"
 
-export const Route = createFileRoute("/_layout")({
+export const Route = createFileRoute("/_authenticated")({
   component: Layout,
   beforeLoad: async () => {
     if (!isLoggedIn()) {

frontend/src/routes/_authenticated/_layout.tsx

@@ -18,17 +18,17 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { useEffect } from "react"
 import { z } from "zod"
 
-import { type UserPublic, UsersService } from "../../client"
-import AddUser from "../../components/Admin/AddUser"
-import ActionsMenu from "../../components/Common/ActionsMenu"
-import Navbar from "../../components/Common/Navbar"
+import { type UserPublic, UsersService } from "../../client/index.ts"
+import AddUser from "../../components/Admin/AddUser.tsx"
+import ActionsMenu from "../../components/Common/ActionsMenu.tsx"
+import Navbar from "../../components/Common/Navbar.tsx"
 import { PaginationFooter } from "../../components/Common/PaginationFooter.tsx"
 
 const usersSearchSchema = z.object({
   page: z.number().catch(1),
 })
 
-export const Route = createFileRoute("/_layout/admin")({
+export const Route = createFileRoute("/_authenticated/admin")({
   component: Admin,
   validateSearch: (search) => usersSearchSchema.parse(search),
 })

frontend/src/routes/_layout/admin.tsx renamed to frontend/src/routes/_authenticated/admin.tsx

@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router"
 
 import useAuth from "../../hooks/useAuth"
 
-export const Route = createFileRoute("/_layout/")({
+export const Route = createFileRoute("/_authenticated/")({
   component: Dashboard,
 })
 

frontend/src/routes/_layout/index.tsx renamed to frontend/src/routes/_authenticated/index.tsx

@@ -15,17 +15,17 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { useEffect } from "react"
 import { z } from "zod"
 
-import { ItemsService } from "../../client"
-import ActionsMenu from "../../components/Common/ActionsMenu"
-import Navbar from "../../components/Common/Navbar"
-import AddItem from "../../components/Items/AddItem"
+import { ItemsService } from "../../client/index.ts"
+import ActionsMenu from "../../components/Common/ActionsMenu.tsx"
+import Navbar from "../../components/Common/Navbar.tsx"
+import AddItem from "../../components/Items/AddItem.tsx"
 import { PaginationFooter } from "../../components/Common/PaginationFooter.tsx"
 
 const itemsSearchSchema = z.object({
   page: z.number().catch(1),
 })
 
-export const Route = createFileRoute("/_layout/items")({
+export const Route = createFileRoute("/_authenticated/items")({
   component: Items,
   validateSearch: (search) => itemsSearchSchema.parse(search),
 })

frontend/src/routes/_layout/items.tsx renamed to frontend/src/routes/_authenticated/items.tsx

@@ -1,4 +1,4 @@
-import React, { useState, KeyboardEvent, ChangeEvent } from "react"
+import { useState } from "react"
 import {
   Box,
   Container,
@@ -18,10 +18,10 @@ interface Message {
   content: string
 }
 
-export const Route = createFileRoute("/learn/$pathId")({
+export const Route = createFileRoute("/_authenticated/learn/$pathId")({
   component: Learn,
-  validateParams: (params) => ({
-    pathId: z.string().parse(params.pathId),
+  parseParams: (rawParams: Record<string, string>) => ({
+    pathId: z.string().parse(rawParams.pathId),
   }),
 })
 
@@ -106,10 +106,10 @@ function Learn() {
         <Flex>
           <Input
             value={input}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => setInput(e.target.value)}
+            onChange={(e) => setInput(e.target.value)}
             placeholder="Type your message..."
             mr={2}
-            onKeyPress={(e: KeyboardEvent<HTMLInputElement>) => {
+            onKeyPress={(e) => {
               if (e.key === "Enter") {
                 handleSubmit()
               }

frontend/src/routes/learn/$pathId/index.tsx renamed to frontend/src/routes/_authenticated/learn/$pathId.tsx

@@ -1,6 +1,5 @@
 import {
   Box,
-  Container,
   Flex,
   Textarea,
   Button,
@@ -40,7 +39,7 @@ const ChatMessage = ({ message }: { message: ChatMessage }) => {
   )
 }
 
-export const Route = createFileRoute('/learn/_layout/chat')({
+export const Route = createFileRoute("/_authenticated/learn/chat")({
   component: ChatRoute
 })
 

frontend/src/routes/learn/chat/index.tsx renamed to frontend/src/routes/_authenticated/learn/chat.tsx

@@ -12,7 +12,7 @@ import { type ReactNode } from "react"
 
 const learnSearchSchema = z.object({})
 
-export const Route = createFileRoute('/_layout/learn')({
+export const Route = createFileRoute("/_authenticated/learn/")({
   component: Learn,
   validateSearch: (search) => learnSearchSchema.parse(search),
 })

frontend/src/routes/_layout/learn.tsx renamed to frontend/src/routes/_authenticated/learn/index.tsx

@@ -83,8 +83,11 @@ const transformFormToApi = (formData: FormData): PathCreate => {
   }
 }
 
-export const Route = createFileRoute("/paths/$pathId/")({
+export const Route = createFileRoute("/_authenticated/paths/$pathId")({
   component: EditPath,
+  parseParams: (rawParams: Record<string, string>) => ({
+    pathId: z.string().parse(rawParams.pathId),
+  }),
 })
 
 function EditPath() {