Added logic to load projects data on visiting routes. User guard not working yet

Author: Nils-Kolvenbach

src/renderer/react/routeTree.gen.ts

@@ -11,13 +11,16 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
-import { Route as ProjectsImport } from './routes/projects'
+import { Route as HasUserGuardImport } from './routes/_hasUserGuard'
 import { Route as IndexImport } from './routes/index'
+import { Route as ProjectsIndexImport } from './routes/projects/index'
+import { Route as UserSetImport } from './routes/user/set'
+import { Route as ProjectsProjectIdIndexImport } from './routes/projects/$projectId/index'
 
 // Create/Update Routes
 
-const ProjectsRoute = ProjectsImport.update({
-  path: '/projects',
+const HasUserGuardRoute = HasUserGuardImport.update({
+  id: '/_hasUserGuard',
   getParentRoute: () => rootRoute,
 } as any)
 
@@ -26,6 +29,21 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const ProjectsIndexRoute = ProjectsIndexImport.update({
+  path: '/projects/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const UserSetRoute = UserSetImport.update({
+  path: '/user/set',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const ProjectsProjectIdIndexRoute = ProjectsProjectIdIndexImport.update({
+  path: '/projects/$projectId/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -34,15 +52,33 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
-    '/projects': {
-      preLoaderRoute: typeof ProjectsImport
+    '/_hasUserGuard': {
+      preLoaderRoute: typeof HasUserGuardImport
+      parentRoute: typeof rootRoute
+    }
+    '/user/set': {
+      preLoaderRoute: typeof UserSetImport
+      parentRoute: typeof rootRoute
+    }
+    '/projects/': {
+      preLoaderRoute: typeof ProjectsIndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/projects/$projectId/': {
+      preLoaderRoute: typeof ProjectsProjectIdIndexImport
       parentRoute: typeof rootRoute
     }
   }
 }
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren([IndexRoute, ProjectsRoute])
+export const routeTree = rootRoute.addChildren([
+  IndexRoute,
+  HasUserGuardRoute,
+  UserSetRoute,
+  ProjectsIndexRoute,
+  ProjectsProjectIdIndexRoute,
+])
 
 /* prettier-ignore-end */

src/renderer/react/routes/__root.tsx

@@ -21,6 +21,9 @@ export const Route = createRootRouteWithContext<RouterContext>()({
         <Link to="/projects" className="[&.active]:font-bold">
           Projects
         </Link>
+        <Link to="/user/set" className="[&.active]:font-bold">
+          User
+        </Link>
       </div>
       <hr />
       <Outlet />

src/renderer/react/routes/_hasUserGuard.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_hasUserGuard')({
+  beforeLoad: async ({ location, context }) => {
+    const user = await context.core.user.get();
+    console.log('User:', user);
+
+    if (!user) {
+      throw redirect({
+        to: '/user/set',
+        search: {
+          // Use the current location to power a redirect after login
+          // (Do not use `router.state.resolvedLocation` as it can
+          // potentially lag behind the actual current location)
+          redirect: location.href,
+        },
+      });
+    }
+  },
+});

src/renderer/react/routes/projects.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/projects/$projectId/')({
+  component: ProjectDashboardPage,
+  loader: ({ context, params }) =>
+    context.core.projects.read({ id: params.projectId }),
+});
+
+function ProjectDashboardPage() {
+  const project = Route.useLoaderData();
+
+  return <div className="p-2">Dashboard for Project "{project.name}"</div>;
+}

src/renderer/react/routes/projects/$projectId/index.tsx

@@ -0,0 +1,36 @@
+import { Link, createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/projects/')({
+  component: ListProjectsPage,
+  loader: ({ context }) => context.core.projects.list(),
+});
+
+function ListProjectsPage() {
+  const context = Route.useRouteContext();
+  const projects = Route.useLoaderData();
+
+  function createProject() {
+    context.core.projects.create({ name: 'A test project' });
+  }
+
+  return (
+    <div className="p-2">
+      <button onClick={createProject}>Create new Project</button>
+      Found the following Projects:{' '}
+      <ul>
+        {projects.list.map((project) => {
+          return (
+            <li key={project.id}>
+              <Link
+                to="/projects/$projectId"
+                params={{ projectId: project.id }}
+              >
+                {project.name}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

src/renderer/react/routes/projects/index.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/user/set')({
+  component: SetUserPage,
+});
+
+function SetUserPage() {
+  const context = Route.useRouteContext();
+
+  function setUser() {
+    context.core.user.set({
+      userType: 'local',
+      name: 'John Doe',
+      email: '[email protected]',
+      locale: {
+        id: 'en',
+        name: 'English',
+      },
+    });
+  }
+
+  return (
+    <div className="p-2">
+      <button onClick={setUser}>Create User</button>
+    </div>
+  );
+}