Added initial API code, as well as TanStack Query to the project and …

Project-1/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.102.8",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },

Project-1/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  msw: true

Project-1/src/App.tsx

@@ -1,14 +1,20 @@
-import { useState } from 'react'
-import heroImg from './assets/hero.png'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import './App.css'
+import { useState } from 'react';
+import heroImg from './assets/hero.png';
+import reactLogo from './assets/react.svg';
+import viteLogo from './assets/vite.svg';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import './App.css';
+
+const queryClient = new QueryClient();
 
 function App() {
   const [count, setCount] = useState(0)
 
   return (
     <>
+    /** IKKE FJERN ELLER FLYTT DENNE  */
+      <QueryClientProvider client={queryClient}>
+    /* --------------------------------------- */
       <section id="center">
         <div className="hero">
           <img src={heroImg} className="base" width="170" height="179" alt="" />
@@ -115,6 +121,9 @@ function App() {
 
       <div className="ticks"></div>
       <section id="spacer"></section>
+      /** IKKE FJERN ELLER FLYTT DENNE  */
+      </QueryClientProvider>
+      /** ----------------------------- */
     </>
   )
 }

Project-1/src/api/client.ts

@@ -0,0 +1,62 @@
+const BASE_URL = import.meta.env.VITE_API_BASE_URL as string;
+
+export class ApiError extends Error {
+  status: number;
+  data: unknown;
+
+  constructor(message: string, status: number, data: unknown) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.data = data;
+  }
+}
+
+interface RequestOptions extends Omit<RequestInit, 'body'> {
+  body?: unknown;
+}
+
+async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
+  const url = `${BASE_URL}${path}`;
+
+  const config: RequestInit = {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers,
+    },
+    body:
+      options.body !== undefined && typeof options.body !== 'string'
+        ? JSON.stringify(options.body)
+        : (options.body as string | undefined),
+  };
+
+  const response = await fetch(url, config);
+
+  // Handle empty responses (e.g. 204 No Content)
+  const text = await response.text();
+  const data = text ? JSON.parse(text) : null;
+
+  if (!response.ok) {
+    throw new ApiError(
+      data?.message || `Request failed with status ${response.status}`,
+      response.status,
+      data
+    );
+  }
+
+  return data as T;
+}
+
+export const api = {
+  get: <T>(path: string, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'GET' }),
+  post: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'POST', body }),
+  put: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'PUT', body }),
+  patch: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'PATCH', body }),
+  delete: <T>(path: string, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'DELETE' }),
+};

Project-1/src/api/endpoints.ts

@@ -0,0 +1,16 @@
+import { api } from './client';
+
+export interface Car {
+  Make_ID: string;
+  Make_Name: string;
+  Model_ID: string;
+  Model_Name: string;
+}
+
+export type CreateUserInput = Omit<Car, 'Make_ID' | 'Model_ID'>;
+export type UpdateUserInput = Partial<CreateUserInput>;
+
+export const carsApi = {
+  getAllMakes: () => api.get<Car[]>('/getallmakes?format=json'),
+  getAllModelsByMake: (Make_ID: string) => api.get<Car>(`/GetModelsForMake/${Make_ID}?format=json`),
+};

Project-1/src/hooks/useCars.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { carsApi } from '../api/endpoints';
+
+export const userKeys = {
+  all: ['users'] as const,
+  detail: (id: string) => ['users', id] as const,
+};
+
+export function useGetAllModels() {
+  return useQuery({
+    queryKey: userKeys.all,
+    queryFn: carsApi.getAllMakes,
+  });
+}
+
+export function useGetAllModelsByMake(id: string) {
+  return useQuery({
+    queryKey: userKeys.detail(id),
+    queryFn: () => carsApi.getAllModelsByMake(id),
+  });
+}