Working on authenticated Recipes routes.

src/routeTree.gen.ts

@@ -11,19 +11,14 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
-import { Route as RecipesImport } from './routes/recipes'
 import { Route as LoginImport } from './routes/login'
 import { Route as AuthImport } from './routes/_auth'
 import { Route as AuthIndexImport } from './routes/_auth/index'
-import { Route as RecipesUsernameSlugImport } from './routes/recipes_/$username.$slug'
+import { Route as AuthRecipesImport } from './routes/_auth/recipes'
+import { Route as AuthRecipesUsernameSlugImport } from './routes/_auth/recipes_/$username.$slug'
 
 // Create/Update Routes
 
-const RecipesRoute = RecipesImport.update({
-  path: '/recipes',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const LoginRoute = LoginImport.update({
   path: '/login',
   getParentRoute: () => rootRoute,
@@ -39,9 +34,14 @@ const AuthIndexRoute = AuthIndexImport.update({
   getParentRoute: () => AuthRoute,
 } as any)
 
-const RecipesUsernameSlugRoute = RecipesUsernameSlugImport.update({
+const AuthRecipesRoute = AuthRecipesImport.update({
+  path: '/recipes',
+  getParentRoute: () => AuthRoute,
+} as any)
+
+const AuthRecipesUsernameSlugRoute = AuthRecipesUsernameSlugImport.update({
   path: '/recipes/$username/$slug',
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => AuthRoute,
 } as any)
 
 // Populate the FileRoutesByPath interface
@@ -62,12 +62,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginImport
       parentRoute: typeof rootRoute
     }
-    '/recipes': {
+    '/_auth/recipes': {
-      id: '/recipes'
+      id: '/_auth/recipes'
       path: '/recipes'
       fullPath: '/recipes'
-      preLoaderRoute: typeof RecipesImport
+      preLoaderRoute: typeof AuthRecipesImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthImport
     }
     '/_auth/': {
       id: '/_auth/'
@@ -76,12 +76,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthIndexImport
       parentRoute: typeof AuthImport
     }
-    '/recipes/$username/$slug': {
+    '/_auth/recipes/$username/$slug': {
-      id: '/recipes/$username/$slug'
+      id: '/_auth/recipes/$username/$slug'
       path: '/recipes/$username/$slug'
       fullPath: '/recipes/$username/$slug'
-      preLoaderRoute: typeof RecipesUsernameSlugImport
+      preLoaderRoute: typeof AuthRecipesUsernameSlugImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthImport
     }
   }
 }
@@ -89,10 +89,12 @@ declare module '@tanstack/react-router' {
 // Create and export the route tree
 
 export const routeTree = rootRoute.addChildren({
-  AuthRoute: AuthRoute.addChildren({ AuthIndexRoute }),
+  AuthRoute: AuthRoute.addChildren({
+    AuthRecipesRoute,
+    AuthIndexRoute,
+    AuthRecipesUsernameSlugRoute,
+  }),
   LoginRoute,
-  RecipesRoute,
-  RecipesUsernameSlugRoute,
 })
 
 /* prettier-ignore-end */
@@ -104,29 +106,31 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.tsx",
       "children": [
         "/_auth",
-        "/login",
+        "/login"
-        "/recipes",
-        "/recipes/$username/$slug"
       ]
     },
     "/_auth": {
       "filePath": "_auth.tsx",
       "children": [
-        "/_auth/"
+        "/_auth/recipes",
+        "/_auth/",
+        "/_auth/recipes/$username/$slug"
       ]
     },
     "/login": {
       "filePath": "login.tsx"
     },
-    "/recipes": {
+    "/_auth/recipes": {
-      "filePath": "recipes.tsx"
+      "filePath": "_auth/recipes.tsx",
+      "parent": "/_auth"
     },
     "/_auth/": {
       "filePath": "_auth/index.tsx",
       "parent": "/_auth"
     },
-    "/recipes/$username/$slug": {
+    "/_auth/recipes/$username/$slug": {
-      "filePath": "recipes_/$username.$slug.tsx"
+      "filePath": "_auth/recipes_/$username.$slug.tsx",
+      "parent": "/_auth"
     }
   }
 }

src/routes/__root.tsx

@@ -22,11 +22,18 @@ const RootLayout = () => {
 
     return (
         <>
-            <div>
+            <header>
-                <h1>Hello, World.</h1>
+                <h1>Meals Made Easy</h1>
+                <nav>
                     <button onClick={onLogout}>Logout</button>
+                </nav>
+            </header>
+            <main>
                 <Outlet />
-            </div>
+            </main>
+            <footer>
+                <p>Copyright 2024 Jesse R. Brault. All rights reserved.</p>
+            </footer>
             <TanStackRouterDevtools position="bottom-right" />
         </>
     )

src/routes/_auth/index.tsx

@@ -1,19 +1,7 @@
-import { useQuery } from '@tanstack/react-query'
+import { createFileRoute, redirect } from '@tanstack/react-router'
-import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_auth/')({
-    component: () => {
+    beforeLoad() {
-        const client = useQuery({
+        throw redirect({ to: '/recipes' })
-            queryKey: ['index'],
-            queryFn() {
-                return 'Hello, Jesse!'
-            }
-        })
-        return (
-            <div>
-                <h2>Index Page – You are logged in.</h2>
-                {client.data ? <h3>{client.data}</h3> : null}
-            </div>
-        )
     }
 })

src/routes/_auth/recipes.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import Recipes from '../../pages/recipes/Recipes'
+
+export const Route = createFileRoute('/_auth/recipes')({
+    component: Recipes
+})

src/routes/_auth/recipes_/$username.$slug.tsx

@@ -4,11 +4,11 @@ import {
     useLoaderData,
     useParams
 } from '@tanstack/react-router'
-import { ApiError } from '../../api/ApiError'
+import { ApiError } from '../../../api/ApiError'
-import getRecipe from '../../api/getRecipe'
+import getRecipe from '../../../api/getRecipe'
-import Recipe from '../../pages/recipe/Recipe'
+import Recipe from '../../../pages/recipe/Recipe'
 
-export const Route = createFileRoute('/recipes/$username/$slug')({
+export const Route = createFileRoute('/_auth/recipes/$username/$slug')({
     loader: ({ abortController, context, params }) =>
         context.queryClient.ensureQueryData({
             queryKey: ['recipe', params.username, params.slug],
@@ -22,7 +22,7 @@ export const Route = createFileRoute('/recipes/$username/$slug')({
         }),
     component() {
         const recipe = useLoaderData({
-            from: '/recipes/$username/$slug'
+            from: '/_auth/recipes/$username/$slug'
         })
         return <Recipe {...{ recipe }} />
     },
@@ -38,7 +38,7 @@ export const Route = createFileRoute('/recipes/$username/$slug')({
     },
     notFoundComponent() {
         const { username, slug } = useParams({
-            from: '/recipes/$username/$slug'
+            from: '/_auth/recipes/$username/$slug'
         })
         return (
             <p>

src/routes/login.tsx

@@ -27,7 +27,7 @@ const Login = () => {
         if (loginResult._tag === 'success') {
             auth.putToken(loginResult.loginView.accessToken, async () => {
                 await router.invalidate()
-                await navigate({ to: search.redirect ?? '/' })
+                await navigate({ to: search.redirect ?? '/recipes' })
             })
         } else {
             setError(loginResult.error)
@@ -58,7 +58,7 @@ export const Route = createFileRoute('/login')({
     }),
     beforeLoad({ context, search }) {
         if (context.auth.token) {
-            throw redirect({ to: search.redirect || '/' })
+            throw redirect({ to: search.redirect || '/recipes' })
         }
     },
     component: Login

src/routes/recipes.tsx

@@ -1,6 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import Recipes from '../pages/recipes/Recipes'
-
-export const Route = createFileRoute('/recipes')({
-    component: Recipes
-})