3 ensure frontend backend are in sync by generating typescript types

packages/CourtBooking/package.json

@@ -4,16 +4,17 @@
   "private": true,
   "scripts": {
     "dev": "vite dev",
-    "start": "vite start",
     "build": "vite build",
     "check": "tsc --noEmit && eslint",
-    "clean": "rm -rf dist bun.lockb"
+    "generate:types:dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 NODE_ENV=development bun src/scripts/generate-types.ts"
   },
   "devDependencies": {
     "@tanstack/router-plugin": "^1.127.5",
     "@types/bun": "latest",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "openapi-typescript": "^7.8.0",
+    "openapi-typescript-helpers": "^0.0.15",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
@@ -22,10 +23,15 @@
   "dependencies": {
     "@react-oauth/google": "^0.12.2",
     "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-query": "^5.83.0",
+    "@tanstack/react-query-devtools": "^5.83.0",
     "@tanstack/react-router": "^1.127.3",
-    "@tanstack/react-router-devtools": "^1.127.3",
+    "@tanstack/react-router-with-query": "^1.127.8",
     "@tanstack/react-start": "^1.127.7",
+    "@types/express": "^5.0.3",
+    "express": "^5.1.0",
     "firebase": "^11.10.0",
+    "openapi-fetch": "^0.14.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",

packages/CourtBooking/src/api/client.ts

@@ -0,0 +1,23 @@
+import createClient from 'openapi-fetch';
+import type { Middleware } from 'openapi-fetch';
+import type { paths } from './types.ts';
+
+const githubToken = import.meta.env.VITE_GITHUB_TOKEN;
+const baseUrl = 'https://api.github.com';
+
+const authMiddleware: Middleware = {
+  onRequest: async ({ request }) => {
+    request.headers.set('Authorization', `Bearer ${githubToken}`);
+    return request;
+  },
+};
+
+const client = createClient<paths>({ baseUrl });
+
+client.use(authMiddleware);
+
+// const baseUrl = 'https://localhost:7104/';
+
+// const client = createClient<paths>({ baseUrl });
+
+export { client };

packages/CourtBooking/src/api/hook.ts

@@ -0,0 +1,145 @@
+import { client } from './client';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  type HttpMethod,
+  type PathsWithMethod,
+} from 'openapi-typescript-helpers';
+import { type FetchOptions } from 'openapi-fetch';
+import type { paths } from './types';
+import { type UseMutationOptions as RQUseMutationOptions } from '@tanstack/react-query';
+import { type UseQueryOptions as RQUseQueryOptions } from '@tanstack/react-query';
+
+// Define types for paths and parameters
+type Paths<M extends HttpMethod> = PathsWithMethod<paths, M>;
+type Params<M extends HttpMethod, P extends Paths<M>> = M extends keyof paths[P]
+  ? FetchOptions<paths[P][M]>
+  : never;
+
+// Define types for query and mutation options
+type UseQueryOptions = Pick<RQUseQueryOptions, 'enabled'>;
+type UseMutationOptions = Pick<RQUseMutationOptions, 'retry'>;
+
+/**
+ * @param path - The API endpoint path to query.
+ * @param params - The parameters to be sent with the request.
+ * @description
+ * This function is used to perform a GET request using the OpenAPI client.
+ * @returns
+ * This function is used to perform a GET request using the OpenAPI client.
+ * It returns the result of the query.
+ * @example
+ * const gists = useGetQuery('/gists', { params: { query: { per_page: 5 } } })
+ * gists.data?.map((gist) => (...))
+ * gists.refetch()
+ */
+export function useGetQuery<P extends Paths<'get'>>(
+  path: P,
+  params: Params<'get', P> & { rq?: UseQueryOptions }
+) {
+  const { rq, ...queryParams } = params;
+  return useQuery<any, Error, any, readonly unknown[]>({
+    queryKey: [path, JSON.stringify(queryParams)],
+    queryFn: async () => {
+      const { data, error } = await client.GET(path, params);
+      if (error) throw error;
+      return { data, error: null };
+    },
+    ...params?.rq,
+  });
+}
+
+/**
+ * @param path - The API endpoint path to mutate.
+ * @param options - The options to configure the mutation.
+ * @description
+ * This function is used to perform a POST request using the OpenAPI client.
+ * @returns
+ * This function is used to perform a POST request using the OpenAPI client.
+ * It returns a mutation object that can be used to trigger the request.
+ * @example
+ *   const createGist = usePostMutation('/gists')
+ * createGist.mutate(
+ *   {
+ *     body: {
+ *       description: new Date().toISOString(),
+ *       files: { 'greeting.txt': { content: 'hello, world' } },
+ *     },
+ *   },
+ *   { onSuccess }
+ * )
+ */
+export function usePostMutation<P extends Paths<'post'>>(
+  path: P,
+  options?: UseMutationOptions
+) {
+  return useMutation({
+    mutationFn: async (params: Params<'post', P>) => {
+      const { data, error } = await client.POST(path, params);
+      if (error) throw error;
+      return data;
+    },
+    ...options,
+  });
+}
+
+/**
+ *
+ * @param path - The API endpoint path to mutate.
+ * @param options - The options to configure the mutation.
+ * @description
+ * This function is used to perform a PUT request using the OpenAPI client.
+ * @returns
+ * This function is used to perform a PUT request using the OpenAPI client.
+ * It returns a mutation object that can be used to trigger the request.
+ * @example
+ * const updateGist = usePutMutation('/gists/{gist_id}');
+ * updateGist.mutate({
+ *   params: {
+ *     path: { gist_id: '123' },
+ *     body: {
+ *       description: new Date().toISOString(),
+ *       files: { 'greeting.txt': { content: 'hello, world' } },
+ *     },
+ *   },
+ * });
+ */
+export function usePutMutation<P extends Paths<'put'>>(
+  path: P,
+  options?: UseMutationOptions
+) {
+  return useMutation({
+    mutationFn: async (params: Params<'put', P>) => {
+      const { data, error } = await client.PUT(path, params);
+      if (error) throw error;
+      return data;
+    },
+    ...options,
+  });
+}
+
+/**
+ *
+ * @param path - The API endpoint path to mutate.
+ * @param options - The options to configure the mutation.
+ * @description
+ * This function is used to perform a DELETE request using the OpenAPI client.
+ * @returns
+ * This function is used to perform a DELETE request using the OpenAPI client.
+ * It returns a mutation object that can be used to trigger the request.
+ * @example
+ * const removeGist = useDeleteMutation('/gists/{gist_id}')
+ * removeGist.mutate({ params: { path: { gist_id: id } } }, { onSuccess })
+ */
+export function useDeleteMutation<P extends Paths<'delete'>>(
+  path: P,
+  options?: UseMutationOptions
+) {
+  return useMutation({
+    mutationFn: async (params: Params<'delete', P>) => {
+      const { data, error } = await client.DELETE(path, params);
+      if (error) throw error;
+      return data;
+    },
+    ...options,
+  });
+}