feat(lst): tan stack routes added with protected routes

frontend/src/routes/__root.tsx

@@ -0,0 +1,42 @@
+import {createRootRouteWithContext, Link, Outlet} from "@tanstack/react-router";
+import {TanStackRouterDevtools} from "@tanstack/router-devtools";
+import {SessionType} from "../lib/hooks/useSession";
+
+type RouterContext = {
+    sessionType: SessionType;
+};
+// same as the layout
+export const Route = createRootRouteWithContext<RouterContext>()({
+    component: () => {
+        return (
+            <>
+                <div className="p-2 flex gap-2">
+                    <Link to="/" className="[&.active]:font-bold">
+                        Home
+                    </Link>{" "}
+                    <Link to="/about" className="[&.active]:font-bold">
+                        About
+                    </Link>
+                    <Link to="/dashboard" className="[&.active]:font-bold">
+                        dashboard
+                    </Link>
+                    <Link to="/profile" className="[&.active]:font-bold">
+                        {({isActive}) => <>Profile {isActive && "~"}</>}
+                    </Link>
+                    <Link
+                        to="/ocp"
+                        search={{q: "1"}}
+                        activeProps={{style: {fontWeight: "bold"}}}
+                        className="[&.active]:font-bold"
+                    >
+                        {({isActive}) => <>OCP {isActive && "~"}</>}
+                    </Link>
+                </div>
+                <hr />
+                <Outlet />
+
+                <TanStackRouterDevtools />
+            </>
+        );
+    },
+});

frontend/src/routes/_auth.tsx

@@ -0,0 +1,12 @@
+import {createFileRoute, redirect} from "@tanstack/react-router";
+
+// src/routes/_authenticated.tsx
+export const Route = createFileRoute("/_auth")({
+    beforeLoad: async ({context}) => {
+        if (!context.sessionType.session) {
+            throw redirect({
+                to: "/",
+            });
+        }
+    },
+});

frontend/src/routes/_auth/dashboard.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_auth/dashboard')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_auth/dashboard"!</div>
+}

frontend/src/routes/_auth/profile.tsx

@@ -0,0 +1,9 @@
+import {createFileRoute} from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_auth/profile")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return <div>Hello "/profile"!</div>;
+}

frontend/src/routes/about.tsx

@@ -0,0 +1,13 @@
+import {createFileRoute} from "@tanstack/react-router";
+
+export const Route = createFileRoute("/about")({
+    component: About,
+});
+
+function About() {
+    return (
+        <div className="m-auto">
+            <h2>About page to come.</h2>
+        </div>
+    );
+}

frontend/src/routes/index.tsx

@@ -0,0 +1,29 @@
+import {createFileRoute} from "@tanstack/react-router";
+import LoginForm from "../components/auth/LoginForm";
+import {Button} from "../components/ui/button";
+import {useLogout} from "../lib/hooks/useLogout";
+import {useSession} from "../lib/hooks/useSession";
+
+export const Route = createFileRoute("/")({
+    component: Index,
+});
+
+function Index() {
+    const {session} = useSession();
+    const logout = useLogout();
+    return (
+        <div className="p-2">
+            <h3>Welcome Home!</h3>
+            <br></br>
+            <p>
+                {session ? (
+                    <>
+                        <Button onClick={() => logout()}>Logout</Button>{" "}
+                    </>
+                ) : (
+                    <LoginForm />
+                )}
+            </p>
+        </div>
+    );
+}

frontend/src/routes/login.tsx

@@ -0,0 +1,38 @@
+import {createFileRoute, useRouter} from "@tanstack/react-router";
+import {isAuthenticated, signIn, signOut} from "../utils/auth";
+import {Button} from "../components/ui/button";
+
+export const Route = createFileRoute("/login")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    const router = useRouter();
+    return (
+        <div>
+            <h2>Ligin</h2>
+            {isAuthenticated() ? (
+                <>
+                    <p>Hello User!</p>
+                    <Button
+                        onClick={async () => {
+                            signOut();
+                            router.invalidate();
+                        }}
+                    >
+                        signOut
+                    </Button>
+                </>
+            ) : (
+                <Button
+                    onClick={async () => {
+                        signIn();
+                        router.invalidate();
+                    }}
+                >
+                    Sign in
+                </Button>
+            )}
+        </div>
+    );
+}

frontend/src/routes/ocp/$lineID.tsx

@@ -0,0 +1,17 @@
+import {createFileRoute} from "@tanstack/react-router";
+
+export const Route = createFileRoute("/ocp/$lineID")({
+    component: RouteComponent,
+    loader: async ({params}) => {
+        await new Promise((r) => setTimeout(r, 1500));
+        //throw new Error();
+        return {lineID: params.lineID};
+    },
+    pendingComponent: () => <div className="m-auto">Loading....</div>,
+    errorComponent: () => <div className="m-auto">Error....</div>,
+});
+
+function RouteComponent() {
+    const {lineID} = Route.useLoaderData();
+    return <div>Hello "/ocp/{lineID}"!</div>;
+}

frontend/src/routes/ocp/index.tsx

@@ -0,0 +1,34 @@
+import {createFileRoute, Link} from "@tanstack/react-router";
+
+export const Route = createFileRoute("/ocp/")({
+    component: RouteComponent,
+    validateSearch: (search) => {
+        return {
+            q: (search.q as string) || "",
+        };
+    },
+    loaderDeps: ({search: {q}}) => ({q}),
+    loader: async ({deps: {q}}) => {
+        return {line: q};
+    },
+});
+
+function RouteComponent() {
+    const {line} = Route.useLoaderData();
+
+    const lines = ["l", "2", "3"];
+    return (
+        <div>
+            <h2>Hello "/ocp/{line}/something"!</h2>
+            {lines.map((line) => {
+                return (
+                    <div key={line}>
+                        <Link to="/ocp/$lineID" params={{lineID: line}}>
+                            Post
+                        </Link>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

frontend/src/routes/ocp/lots.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/ocp/lots')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/ocp/lots"!</div>
+}