add vite-envs and some routes

.env

@@ -1,5 +1,5 @@
 VITE_TITLE=Vite Insee Starter
 VITE_DESCRIPTION=Vite + TypeScript + React + react-dsfr
-
+VITE_API_URL=
 VITE_OIDC_ISSUER=
 VITE_OIDC_CLIENT_ID=

.eslintrc.cjs

@@ -1,19 +1,17 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react-hooks/recommended"
     ],
-    '@typescript-eslint/no-unused-vars': 'warn'
-  },
-}
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parser: "@typescript-eslint/parser",
+    plugins: ["react-refresh"],
+    rules: {
+        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+        "@typescript-eslint/no-unused-vars": "warn",
+        "@typescript-eslint/no-explicit-any": "off"
+    }
+};

src/api/axiosInstance.ts

@@ -0,0 +1,44 @@
+import axios, { type AxiosRequestConfig } from "axios";
+import { prOidc } from "oidc";
+
+const baseInstance = axios.create({
+    baseURL: import.meta.env.VITE_API_URL
+});
+
+const getAccessToken = async () => {
+    const oidc = await prOidc;
+
+    if (!oidc.isUserLoggedIn) return undefined;
+
+    return oidc.getTokens().accessToken;
+};
+
+const onRequest = async (config: any) => ({
+    ...config,
+    headers: {
+        ...config.headers,
+        "Content-Type": "application/json;charset=utf-8",
+        Accept: "application/json;charset=utf-8",
+        ...(await (async () => {
+            const accessToken = await getAccessToken();
+
+            if (!accessToken) {
+                return undefined;
+            }
+
+            return {
+                Authorization: `Bearer ${accessToken}`
+            };
+        })())
+    }
+});
+
+baseInstance.interceptors.request.use(onRequest);
+
+// add a second `options` argument here if you want to pass extra options to each generated query
+export const axiosInstance = <T>(config: AxiosRequestConfig, options?: AxiosRequestConfig) => {
+    return baseInstance<T>({
+        ...config,
+        ...options
+    }).then(({ data }) => data);
+};

src/components/Header.tsx

@@ -62,7 +62,8 @@ export function Header() {
                 (
                     [
                         ["/", "Home"],
-                        ["/mui", "Mui Playground"]
+                        ["/mui", "Mui Playground"],
+                        ["/todo", "Todo App"]
                     ] as const
                 ).map(([to, label]) => ({
                     text: label,

src/routeTree.gen.ts

@@ -14,6 +14,9 @@ import { createFileRoute } from "@tanstack/react-router";
 
 import { Route as rootRoute } from "./routes/__root";
 import { Route as AccountImport } from "./routes/account";
+import { Route as TodoRouteImport } from "./routes/todo/route";
+import { Route as TodoIndexImport } from "./routes/todo/index";
+import { Route as TodoEditImport } from "./routes/todo/edit";
 
 // Create Virtual Routes
 
@@ -32,11 +35,26 @@ const AccountRoute = AccountImport.update({
     getParentRoute: () => rootRoute
 } as any);
 
+const TodoRouteRoute = TodoRouteImport.update({
+    path: "/todo",
+    getParentRoute: () => rootRoute
+} as any);
+
 const IndexLazyRoute = IndexLazyImport.update({
     path: "/",
     getParentRoute: () => rootRoute
 } as any).lazy(() => import("./routes/index.lazy").then(d => d.Route));
 
+const TodoIndexRoute = TodoIndexImport.update({
+    path: "/",
+    getParentRoute: () => TodoRouteRoute
+} as any);
+
+const TodoEditRoute = TodoEditImport.update({
+    path: "/edit",
+    getParentRoute: () => TodoRouteRoute
+} as any);
+
 // Populate the FileRoutesByPath interface
 
 declare module "@tanstack/react-router" {
@@ -48,6 +66,13 @@ declare module "@tanstack/react-router" {
             preLoaderRoute: typeof IndexLazyImport;
             parentRoute: typeof rootRoute;
         };
+        "/todo": {
+            id: "/todo";
+            path: "/todo";
+            fullPath: "/todo";
+            preLoaderRoute: typeof TodoRouteImport;
+            parentRoute: typeof rootRoute;
+        };
         "/account": {
             id: "/account";
             path: "/account";
@@ -62,13 +87,28 @@ declare module "@tanstack/react-router" {
             preLoaderRoute: typeof MuiLazyImport;
             parentRoute: typeof rootRoute;
         };
+        "/todo/edit": {
+            id: "/todo/edit";
+            path: "/edit";
+            fullPath: "/todo/edit";
+            preLoaderRoute: typeof TodoEditImport;
+            parentRoute: typeof TodoRouteImport;
+        };
+        "/todo/": {
+            id: "/todo/";
+            path: "/";
+            fullPath: "/todo/";
+            preLoaderRoute: typeof TodoIndexImport;
+            parentRoute: typeof TodoRouteImport;
+        };
     }
 }
 
 // Create and export the route tree
 
 export const routeTree = rootRoute.addChildren({
     IndexLazyRoute,
+    TodoRouteRoute: TodoRouteRoute.addChildren({ TodoEditRoute, TodoIndexRoute }),
     AccountRoute,
     MuiLazyRoute
 });

src/routes/todo/edit.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/todo/edit")({
+    component: () => <>Hello /todo/edit! </>
+});

src/routes/todo/index.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/todo/")({
+    component: () => <>Summary</>
+});

src/routes/todo/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/todo")({
+    component: Layout
+});
+
+function Layout() {
+    return (
+        <>
+            <h3>Todo App</h3>
+
+            {(
+                [
+                    ["/todo", "Summary"],
+                    ["/todo/edit", "Edit"]
+                ] as const
+            ).map(([to, label]) => (
+                <Link key={to} to={to}>
+                    {label}
+                </Link>
+            ))}
+            <Outlet />
+        </>
+    );
+}

src/vite-env.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="vite-envs/client" />
+/// <reference types="vite-env/client" />
 
 type ImportMetaEnv = {
     // Auto-generated by `npx vite-envs update-types` and hot-reloaded by the `vite-env` plugin
     VITE_TITLE: string;
     VITE_DESCRIPTION: string;
+    VITE_API_URL: string;
     VITE_OIDC_ISSUER: string;
     VITE_OIDC_CLIENT_ID: string;
     BASE_URL: string;