check point

openApi.json

@@ -1,6 +1,6 @@
 {
     "openapi": "3.0.0",
-    "info": { "version": "1.0.6", "title": "My API" },
+    "info": { "version": "1.0.8", "title": "My API" },
     "components": {
         "schemas": {
             "Todo": {

orval.config.ts

@@ -5,13 +5,13 @@ export default defineConfig({
         input: "./openApi.json",
         output: {
             mode: "tags",
-            target: "src/api/",
-            schemas: "src/model/api",
+            target: "src/api/endpoints",
+            schemas: "src/api/model",
             client: "react-query",
             override: {
                 mutator: {
-                    path: "./src/api/axiosInstance.ts",
-                    name: "axiosInstance"
+                    path: "./src/api/mutator/customInstance.ts",
+                    name: "customInstance"
                 }
             }
         },

src/api/default.ts → src/api/endpoints/default.ts

@@ -14,17 +14,17 @@ import type {
     UseQueryOptions,
     UseQueryResult
 } from "@tanstack/react-query";
-import type { PutTodoIdParams, Todo } from "../model/api";
-import { axiosInstance } from "./axiosInstance";
+import type { PutTodoIdParams, Todo } from "../model";
+import { customInstance } from "../mutator/customInstance";
 
 type SecondParameter<T extends (...args: any) => any> = Parameters<T>[1];
 
 export const putTodoId = (
     id: string,
     params: PutTodoIdParams,
-    options?: SecondParameter<typeof axiosInstance>
+    options?: SecondParameter<typeof customInstance>
 ) => {
-    return axiosInstance<void>({ url: `/todo/${id}`, method: "PUT", params }, options);
+    return customInstance<void>({ url: `/todo/${id}`, method: "PUT", params }, options);
 };
 
 export const getPutTodoIdMutationOptions = <TError = unknown, TContext = unknown>(options?: {
@@ -34,7 +34,7 @@ export const getPutTodoIdMutationOptions = <TError = unknown, TContext = unknown
         { id: string; params: PutTodoIdParams },
         TContext
     >;
-    request?: SecondParameter<typeof axiosInstance>;
+    request?: SecondParameter<typeof customInstance>;
 }): UseMutationOptions<
     Awaited<ReturnType<typeof putTodoId>>,
     TError,
@@ -66,7 +66,7 @@ export const usePutTodoId = <TError = unknown, TContext = unknown>(options?: {
         { id: string; params: PutTodoIdParams },
         TContext
     >;
-    request?: SecondParameter<typeof axiosInstance>;
+    request?: SecondParameter<typeof customInstance>;
 }): UseMutationResult<
     Awaited<ReturnType<typeof putTodoId>>,
     TError,
@@ -77,8 +77,8 @@ export const usePutTodoId = <TError = unknown, TContext = unknown>(options?: {
 
     return useMutation(mutationOptions);
 };
-export const deleteTodoId = (id: string, options?: SecondParameter<typeof axiosInstance>) => {
-    return axiosInstance<void>({ url: `/todo/${id}`, method: "DELETE" }, options);
+export const deleteTodoId = (id: string, options?: SecondParameter<typeof customInstance>) => {
+    return customInstance<void>({ url: `/todo/${id}`, method: "DELETE" }, options);
 };
 
 export const getDeleteTodoIdMutationOptions = <TError = unknown, TContext = unknown>(options?: {
@@ -88,7 +88,7 @@ export const getDeleteTodoIdMutationOptions = <TError = unknown, TContext = unkn
         { id: string },
         TContext
     >;
-    request?: SecondParameter<typeof axiosInstance>;
+    request?: SecondParameter<typeof customInstance>;
 }): UseMutationOptions<Awaited<ReturnType<typeof deleteTodoId>>, TError, { id: string }, TContext> => {
     const { mutation: mutationOptions, request: requestOptions } = options ?? {};
 
@@ -115,14 +115,14 @@ export const useDeleteTodoId = <TError = unknown, TContext = unknown>(options?:
         { id: string },
         TContext
     >;
-    request?: SecondParameter<typeof axiosInstance>;
+    request?: SecondParameter<typeof customInstance>;
 }): UseMutationResult<Awaited<ReturnType<typeof deleteTodoId>>, TError, { id: string }, TContext> => {
     const mutationOptions = getDeleteTodoIdMutationOptions(options);
 
     return useMutation(mutationOptions);
 };
-export const getTodos = (options?: SecondParameter<typeof axiosInstance>, signal?: AbortSignal) => {
-    return axiosInstance<Todo[]>({ url: `/todos`, method: "GET", signal }, options);
+export const getTodos = (options?: SecondParameter<typeof customInstance>, signal?: AbortSignal) => {
+    return customInstance<Todo[]>({ url: `/todos`, method: "GET", signal }, options);
 };
 
 export const getGetTodosQueryKey = () => {
@@ -134,7 +134,7 @@ export const getGetTodosQueryOptions = <
     TError = unknown
 >(options?: {
     query?: Partial<UseQueryOptions<Awaited<ReturnType<typeof getTodos>>, TError, TData>>;
-    request?: SecondParameter<typeof axiosInstance>;
+    request?: SecondParameter<typeof customInstance>;
 }) => {
     const { query: queryOptions, request: requestOptions } = options ?? {};
 
@@ -155,7 +155,7 @@ export type GetTodosQueryError = unknown;
 
 export const useGetTodos = <TData = Awaited<ReturnType<typeof getTodos>>, TError = unknown>(options?: {
     query?: Partial<UseQueryOptions<Awaited<ReturnType<typeof getTodos>>, TError, TData>>;
-    request?: SecondParameter<typeof axiosInstance>;
+    request?: SecondParameter<typeof customInstance>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } => {
     const queryOptions = getGetTodosQueryOptions(options);
 

src/api/axiosInstance.ts → src/api/mutator/customInstance.ts

@@ -36,7 +36,7 @@ const onRequest = async (config: any) => ({
 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) => {
+export const customInstance = <T>(config: AxiosRequestConfig, options?: AxiosRequestConfig) => {
     return baseInstance<T>({
         ...config,
         ...options

src/components/TodoApp/Todo.tsx

@@ -51,7 +51,7 @@ export const Todo = memo((props: TodoProps) => {
                 />
                 <Button
                     iconId="ri-delete-bin-line"
-                    onClick={() => onDeleteTodo()}
+                    onClick={onDeleteTodo}
                     priority="primary"
                     title="Delete"
                 />

src/components/TodoApp/TodoApp.tsx

@@ -15,7 +15,7 @@ type Props = {
 export function TodoApp(props: Props) {
     const { className, todos, onAddTodo, onUpdateTodoText, onToggleTodo, onDeleteTodo } = props;
 
-    const { classes, cx } = useState();
+    const { classes, cx } = useStyles();
 
     const getOnUpdateTodoText = useListCallbacks(([todoId]: [string], [text]: [string]) =>
         onUpdateTodoText(todoId, text)
@@ -41,7 +41,7 @@ export function TodoApp(props: Props) {
     );
 }
 
-const useState = tss.withName({ TodoApp }).create({
+const useStyles = tss.withName({ TodoApp }).create({
     root: {},
     addTodo: {},
     todoListWrapper: {}

src/main.tsx

@@ -4,8 +4,11 @@ import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
 import { OidcProvider } from "oidc";
 import { RouterProvider, createRouter, Link, type LinkProps } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-const router = createRouter({ routeTree });
+export const queryClient = new QueryClient();
+
+const router = createRouter({ routeTree, context: { queryClient } });
 // Register the router instance for type safety
 declare module "@tanstack/react-router" {
     interface Register {
@@ -23,8 +26,10 @@ startReactDsfr({ defaultColorScheme: "system", Link });
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>
-        <OidcProvider>
-            <RouterProvider router={router} />
-        </OidcProvider>
+        <QueryClientProvider client={queryClient}>
+            <OidcProvider>
+                <RouterProvider router={router} />
+            </OidcProvider>
+        </QueryClientProvider>
     </React.StrictMode>
 );

src/oidc.ts

@@ -13,3 +13,15 @@ export const { OidcProvider, useOidc, prOidc } = import.meta.env.VITE_OIDC_ISSUE
           })
       })
     : createMockReactOidc({ isUserInitiallyLoggedIn: false });
+
+export const protectedLoader = async () => {
+    const oidc = await prOidc;
+
+    if (oidc.isUserLoggedIn) {
+        return null;
+    }
+
+    await oidc.login({
+        doesCurrentHrefRequiresAuth: true
+    });
+};

src/routes/__root.tsx

@@ -1,9 +1,10 @@
-import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { Footer } from "components/Footer";
 import { Header } from "components/Header";
 import { fr } from "@codegouvfr/react-dsfr";
+import { QueryClient } from "@tanstack/react-query";
 
-export const Route = createRootRoute({
+export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
     component: () => (
         <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
             <Header />

src/routes/account.tsx

@@ -1,17 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { prOidc } from "oidc";
+import { protectedLoader } from "oidc";
 
 export const Route = createFileRoute("/account")({
     component: () => <div>Hello account!</div>,
-    beforeLoad: async () => {
-        const oidc = await prOidc;
-
-        if (oidc.isUserLoggedIn) {
-            return null;
-        }
-
-        await oidc.login({
-            doesCurrentHrefRequiresAuth: true
-        });
-    }
+    beforeLoad: protectedLoader
 });

src/routes/todo/index.tsx

@@ -1,5 +1,52 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { getGetTodosQueryOptions } from "api/endpoints/default";
+import { TodoApp } from "components/TodoApp";
 
 export const Route = createFileRoute("/todo/")({
-    component: () => <>Summary</>
+    component: TodoIndex,
+    loader: ({ context: { queryClient }, abortController }) =>
+        queryClient.ensureQueryData(
+            getGetTodosQueryOptions({ request: { signal: abortController.signal } })
+        )
 });
+
+function TodoIndex() {
+    const todoQuery = useSuspenseQuery(getGetTodosQueryOptions());
+    const todo = todoQuery.data;
+
+    const test = (params: unknown) => console.log(params);
+
+    const todos = [
+        {
+            id: "1",
+            text: "test1",
+            isDone: false
+        },
+
+        {
+            id: "2",
+            text: "test2",
+            isDone: false
+        },
+        {
+            id: "3",
+            text: "test3",
+            isDone: true
+        },
+        {
+            id: "4",
+            text: "test4",
+            isDone: true
+        }
+    ];
+    return (
+        <TodoApp
+            onAddTodo={test}
+            onDeleteTodo={test}
+            onToggleTodo={test}
+            onUpdateTodoText={test}
+            todos={todos}
+        />
+    );
+}

src/routes/todo/route.tsx

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