adding new aliases

Author: firasrg

TODO.md

@@ -43,4 +43,4 @@ export const App = () => (
       </Layout>
     </BrowserRouter>
   </QueryProvider>
-);
+);

petclinic-ermodel.png

@@ -10,4 +10,4 @@ export const Layout = ({ children }: LayoutProps) => (
     <NavigationBar />
     <div className="container-fluid">{children}</div>
   </>
-);
+);

spring-petclinic-reactjs-client/src/App.tsx

@@ -15,4 +15,4 @@ export function ErrorMessage({ error, onRetry }: ErrorMessageProps) {
       )}
     </div>
   );
-}
+}

spring-petclinic-reactjs-client/src/Layout.tsx

@@ -4,7 +4,7 @@ export interface LoadingProps {
 
 export function Loading({ message = "Loading..." }: LoadingProps) {
   return (
-    <div className="d-flex justify-content-center align-items-center" style={{ minHeight: '200px' }}>
+    <div className="d-flex justify-content-center align-items-center" style={{ minHeight: "200px" }}>
       <div className="text-center">
         <div className="spinner-border" role="status">
           <span className="visually-hidden">{message}</span>
@@ -13,4 +13,4 @@ export function Loading({ message = "Loading..." }: LoadingProps) {
       </div>
     </div>
   );
-}
+}

spring-petclinic-reactjs-client/src/components/ErrorMessage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from "react";
 
 export interface ApiState<T> {
   data: T | null;
@@ -18,19 +18,19 @@ export function useApi<T>(
   const [state, setState] = useState<ApiState<T>>({
     data: null,
     loading: options.immediate ?? true,
-    error: null,
+    error: null
   });
 
   const execute = useCallback(async () => {
-    setState(prev => ({ ...prev, loading: true, error: null }));
+    setState((prev) => ({ ...prev, loading: true, error: null }));
     try {
       const result = await apiCall();
       setState({ data: result, loading: false, error: null });
     } catch (error) {
-      setState({ 
-        data: null, 
-        loading: false, 
-        error: error instanceof Error ? error.message : 'An error occurred' 
+      setState({
+        data: null,
+        loading: false,
+        error: error instanceof Error ? error.message : "An error occurred"
       });
     }
   }, dependencies);
@@ -43,7 +43,7 @@ export function useApi<T>(
 
   return {
     ...state,
-    refetch: execute,
+    refetch: execute
   };
 }
 
@@ -63,12 +63,12 @@ export function useAsyncOperation<T>(): {
       setLoading(false);
       return result;
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'An error occurred';
+      const errorMessage = err instanceof Error ? err.message : "An error occurred";
       setError(errorMessage);
       setLoading(false);
       return null;
     }
   }, []);
 
   return { execute, loading, error };
-}
+}

spring-petclinic-reactjs-client/src/components/Loading.tsx

@@ -1,57 +1,57 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { apiService } from '@services/apiService';
-import { IApiOwner } from '@models/api/IApiOwner';
-import { OwnerFormSchema } from '@models/form/OwnerFormSchema';
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiService } from "@services/apiService";
+import { IApiOwner } from "@models/api/IApiOwner";
+import { OwnerFormSchema } from "@models/form/OwnerFormSchema";
 
-export const OWNERS_QUERY_KEY = 'owners';
+export const OWNERS_QUERY_KEY = "owners";
 
 export function useOwners(filter?: { lastName?: string }) {
   return useQuery({
     queryKey: [OWNERS_QUERY_KEY, filter],
-    queryFn: () => apiService.getList<IApiOwner>('owners', { filter }),
-    enabled: true,
+    queryFn: () => apiService.getList<IApiOwner>("owners", { filter }),
+    enabled: true
   });
 }
 
 export function useOwner(id: number | undefined) {
   return useQuery({
     queryKey: [OWNERS_QUERY_KEY, id],
-    queryFn: () => apiService.getOne<IApiOwner>('owners', id!),
-    enabled: !!id,
+    queryFn: () => apiService.getOne<IApiOwner>("owners", id!),
+    enabled: !!id
   });
 }
 
 export function useCreateOwner() {
   const queryClient = useQueryClient();
-  
+
   return useMutation({
-    mutationFn: (data: OwnerFormSchema) => apiService.create<IApiOwner>('owners', data),
+    mutationFn: (data: OwnerFormSchema) => apiService.create<IApiOwner>("owners", data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [OWNERS_QUERY_KEY] });
-    },
+    }
   });
 }
 
 export function useUpdateOwner() {
   const queryClient = useQueryClient();
-  
+
   return useMutation({
-    mutationFn: ({ id, data }: { id: number; data: OwnerFormSchema }) => 
-      apiService.update<IApiOwner>('owners', id, data),
+    mutationFn: ({ id, data }: { id: number; data: OwnerFormSchema }) =>
+      apiService.update<IApiOwner>("owners", id, data),
     onSuccess: (_, { id }) => {
       queryClient.invalidateQueries({ queryKey: [OWNERS_QUERY_KEY] });
       queryClient.invalidateQueries({ queryKey: [OWNERS_QUERY_KEY, id] });
-    },
+    }
   });
 }
 
 export function useDeleteOwner() {
   const queryClient = useQueryClient();
-  
+
   return useMutation({
-    mutationFn: (id: number) => apiService.delete('owners', id),
+    mutationFn: (id: number) => apiService.delete("owners", id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [OWNERS_QUERY_KEY] });
-    },
+    }
   });
-}
+}

spring-petclinic-reactjs-client/src/hooks/useApi.ts

@@ -1,47 +1,45 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { apiService } from '@services/apiService';
-import { IApiPet } from '@models/api/IApiPet';
-import { IApiEnumItem } from '@models/api/IApiEnumItem';
-import { OWNERS_QUERY_KEY } from './useOwners';
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiService } from "@services/apiService";
+import { IApiEnumItem } from "@models/api/IApiEnumItem";
+import { OWNERS_QUERY_KEY } from "./useOwners";
 
-export const PET_TYPES_QUERY_KEY = 'petTypes';
+export const PET_TYPES_QUERY_KEY = "petTypes";
 
 export function usePetTypes() {
   return useQuery({
     queryKey: [PET_TYPES_QUERY_KEY],
-    queryFn: () => apiService.getList<IApiEnumItem>('pettypes'),
+    queryFn: () => apiService.getList<IApiEnumItem>("pettypes")
   });
 }
 
 export function usePet(ownerId: number, petId: number | undefined) {
   return useQuery({
-    queryKey: ['pets', ownerId, petId],
+    queryKey: ["pets", ownerId, petId],
     queryFn: () => apiService.getPet(ownerId, petId!),
-    enabled: !!petId && !!ownerId,
+    enabled: !!petId && !!ownerId
   });
 }
 
 export function useCreatePet() {
   const queryClient = useQueryClient();
-  
+
   return useMutation({
-    mutationFn: ({ ownerId, data }: { ownerId: number; data: any }) => 
-      apiService.createPet(ownerId, data),
+    mutationFn: ({ ownerId, data }: { ownerId: number; data: any }) => apiService.createPet(ownerId, data),
     onSuccess: (_, { ownerId }) => {
       queryClient.invalidateQueries({ queryKey: [OWNERS_QUERY_KEY, ownerId] });
-    },
+    }
   });
 }
 
 export function useUpdatePet() {
   const queryClient = useQueryClient();
-  
+
   return useMutation({
-    mutationFn: ({ ownerId, petId, data }: { ownerId: number; petId: number; data: any }) => 
+    mutationFn: ({ ownerId, petId, data }: { ownerId: number; petId: number; data: any }) =>
       apiService.updatePet(ownerId, petId, data),
     onSuccess: (_, { ownerId, petId }) => {
       queryClient.invalidateQueries({ queryKey: [OWNERS_QUERY_KEY, ownerId] });
-      queryClient.invalidateQueries({ queryKey: ['pets', ownerId, petId] });
-    },
+      queryClient.invalidateQueries({ queryKey: ["pets", ownerId, petId] });
+    }
   });
-}
+}

spring-petclinic-reactjs-client/src/hooks/useOwners.ts

@@ -1,12 +1,12 @@
-import { useQuery } from '@tanstack/react-query';
-import { apiService } from '@services/apiService';
-import { IApiVeterinarian } from '@models/api/IApiVeterinarian';
+import { useQuery } from "@tanstack/react-query";
+import { apiService } from "@services/apiService";
+import { IApiVeterinarian } from "@models/api/IApiVeterinarian";
 
-export const VETERINARIANS_QUERY_KEY = 'veterinarians';
+export const VETERINARIANS_QUERY_KEY = "veterinarians";
 
 export function useVeterinarians() {
   return useQuery({
     queryKey: [VETERINARIANS_QUERY_KEY],
-    queryFn: () => apiService.getList<IApiVeterinarian>('vets'),
+    queryFn: () => apiService.getList<IApiVeterinarian>("vets")
   });
-}
+}