form add pet to owner setup

Author: firasrg

spring-petclinic-reactjs-client/.gitignore

@@ -24,3 +24,5 @@ dist-ssr
 *.sw?
 
 node/
+
+tsconfig.tsbuildinfo

spring-petclinic-reactjs-client/package.json

@@ -14,10 +14,10 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "http-method-enum": "^1.0.0",
-    "ra-data-json-server": "^5.1.0",
     "react": "^18.3.0",
     "react-admin": "^5.1.0",
     "react-dom": "^18.3.0",
+    "react-flatpickr": "^3.10.13",
     "react-hook-form": "^7.52.2",
     "react-router-dom": "^6.26.1",
     "yup": "^1.4.0"
@@ -26,6 +26,7 @@
     "@types/node": "^20.10.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-flatpickr": "^3.8.11",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "@vitejs/plugin-react": "^4.0.1",

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

@@ -20,7 +20,7 @@ import PetForm from "@pages/forms/PetForm";
 import VisitsPage from "@pages/owners/Visits";
 import VeterinariansPage from "@pages/Veterinarians";
 import ErrorPage from "@pages/Error";
-import dataProvider from "./providers/dataProvider";
+import dataProvider from "./data-providers";
 import { Layout } from "./Layout";
 
 export const App = () => (

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

@@ -1,5 +1,5 @@
-import { Link } from "react-router-dom";
 import { useState } from "react";
+import { Link } from "react-router-dom";
 import { DASHBOARD, OWNERS, VETERINARIANS } from "@constants/routes";
 
 export enum ENavBar {

spring-petclinic-reactjs-client/src/constants/resources.ts

@@ -1 +1,3 @@
 export const OWNERS = "owners";
+export const PETS = "pets";
+export const PET_TYPES = "pettypes";

spring-petclinic-reactjs-client/src/constants/routes.ts

@@ -6,7 +6,7 @@ export const GET_OWNER = `${OWNERS}/:id`;
 export const EDIT_OWNER = `${GET_OWNER}/edit`;
 
 export const PET_NEW_FORM = `${GET_OWNER}/pets/new`;
-export const GET_PET = `${GET_OWNER}/pets/:id`;
+export const GET_PET = `${GET_OWNER}/pets/:petId`;
 export const PET_EDIT_FORM = `${GET_PET}/edit`;
 
 export const PET_VISITS = `${GET_PET}/visits/new`;

spring-petclinic-reactjs-client/src/data-providers/index.ts

@@ -0,0 +1,17 @@
+import { combineDataProviders } from "react-admin";
+import { OWNERS, PET_TYPES } from "@constants/resources";
+import ownersDataProvider from "./ownersDataProvider";
+import petTypesDataProvider from "./petTypesDataProvider";
+
+const dataProviders = combineDataProviders((resource) => {
+  switch (resource) {
+    case OWNERS:
+      return ownersDataProvider;
+    case PET_TYPES:
+      return petTypesDataProvider;
+    default:
+      throw new Error(`Unknown resource: ${resource}`);
+  }
+});
+
+export default dataProviders;

…tjs-client/src/providers/dataProvider.ts …src/data-providers/ownersDataProvider.tsspring-petclinic-reactjs-client/src/providers/dataProvider.ts renamed to spring-petclinic-reactjs-client/src/data-providers/ownersDataProvider.ts spring-petclinic-reactjs-client/src/providers/dataProvider.ts renamed to spring-petclinic-reactjs-client/src/data-providers/ownersDataProvider.ts

@@ -1,21 +1,17 @@
-import { combineDataProviders, DataProvider, fetchUtils, RaRecord, UpdateResult } from "react-admin";
-import HTTPMethod from "http-method-enum";
-import { stringify } from "query-string";
-import { OWNERS } from "@constants/resources";
+import { fetchUtils, UpdateResult } from "react-admin";
+import { GetOwnersListParams } from "@models/api/GetOwnersListParams";
 import { LAST_NAME } from "@constants/searchParams";
-import { GetListParams } from "@models/api/GetListParams";
+import { stringify } from "query-string";
+import HTTPMethod from "http-method-enum";
+import { OwnersDataProvider } from "@models/api/OwnersDataProvider";
+import { PETS } from "@constants/resources";
 
 const apiUrl = import.meta.env.VITE_SPRING_PETCLINIC_REST_API_URL;
 
 const httpClient = fetchUtils.fetchJson;
 
-/**
- * The following data was made to manage api calls dedicated to owners path ("/api/owner").
- * For other endpoints, it would be ideal to manage them in separate data providers.
- * @author Firas Regaieg
- */
-const ownersDataProvider: DataProvider = {
-  getList: async (resource, { filter, signal }: GetListParams) => {
+export default {
+  getList: async (resource, { filter, signal }: GetOwnersListParams) => {
     const url = new URL(`${apiUrl}/${resource}`);
 
     const searchParams = new URLSearchParams();
@@ -72,7 +68,6 @@ const ownersDataProvider: DataProvider = {
     });
     return { data: json };
   },
-
   update: async (resource, params) => {
     const url = `${apiUrl}/${resource}/${params.id}`;
     await httpClient(url, {
@@ -112,16 +107,28 @@ const ownersDataProvider: DataProvider = {
       method: HTTPMethod.DELETE
     });
     return { data: json };
-  }
-};
+  },
+  createPet: async (resource: string, { meta: { ownerId }, data }) => {
+    const { json } = await httpClient(`${apiUrl}/${resource}/${ownerId}/${PETS}`, {
+      method: HTTPMethod.POST,
+      body: JSON.stringify(data)
+    });
+    return { data: json };
+  },
+  getPet: async (resource: string, { id, meta: { petId } }) => {
+    const { json } = await httpClient(`${apiUrl}/${resource}/${id}/${PETS}/${petId}`, {
+      method: HTTPMethod.GET
+    });
 
-const dataProviders = combineDataProviders((resource) => {
-  switch (resource) {
-    case OWNERS:
-      return ownersDataProvider;
-    default:
-      throw new Error(`Unknown resource: ${resource}`);
-  }
-});
+    return { data: json };
+  },
+  // TODO: create endpoint handler to edit pet owner
+  editPet: async (resource: string, { meta: { ownerId }, data: { petId, ...body } }) => {
+    const { json } = await httpClient(`${apiUrl}/${resource}/${ownerId}/${PETS}/${petId}`, {
+      method: HTTPMethod.PUT,
+      body: JSON.stringify(body)
+    });
 
-export default dataProviders;
+    return { data: json };
+  }
+} as OwnersDataProvider;

spring-petclinic-reactjs-client/src/data-providers/petTypesDataProvider.ts

@@ -0,0 +1,25 @@
+import { CreateResult, DataProvider, fetchUtils, UpdateResult, DeleteResult, GetOneResult } from "react-admin";
+
+const apiUrl = import.meta.env.VITE_SPRING_PETCLINIC_REST_API_URL;
+
+const httpClient = fetchUtils.fetchJson;
+
+export default {
+  create: async () => Promise.resolve<CreateResult>({ data: null }),
+  delete: () => Promise.resolve<DeleteResult>({ data: null }),
+  deleteMany: () => Promise.resolve({ data: [] }),
+  getList: async (resource, { signal }) => {
+    const url = new URL(`${apiUrl}/${resource}`);
+
+    const { json } = await httpClient(url, { signal });
+    return {
+      data: json,
+      total: json ? json.length : 0
+    };
+  },
+  getMany: () => Promise.resolve({ data: [] }),
+  getManyReference: () => Promise.resolve({ data: [], total: 0 }),
+  getOne: () => Promise.resolve<GetOneResult>({ data: null }),
+  update: () => Promise.resolve<UpdateResult>({ data: null }),
+  updateMany: () => Promise.resolve({ data: [] })
+} as DataProvider;

spring-petclinic-reactjs-client/src/models/api/CreateOrEditOwnerPetData.ts

@@ -0,0 +1,9 @@
+import { IApiPetType } from "@models/api/IApiPetType";
+import { PetFormSchema } from "@models/form/PetFormSchema";
+import { EPetForm } from "@models/enums/EPetForm";
+import { CreateParams } from "react-admin";
+
+export interface CreateOrEditOwnerPetData extends CreateParams {
+  meta: { ownerId: number };
+  data: Omit<PetFormSchema, EPetForm.PET_TYPE> & { petId?: number; type: IApiPetType };
+}