From 952cb9d517fd2f9d85cc0a4c72f2a412d724a666 Mon Sep 17 00:00:00 2001 From: Matteo Guarnaccia Date: Tue, 31 Oct 2023 14:29:09 +0000 Subject: [PATCH] improved edit logic (pre-populate fields) --- src/api/manufacturer.tsx | 20 ++-- src/manufacturer/manufacturer.component.tsx | 1 + .../manufacturerDialog.component.tsx | 91 +++++++++---------- src/mocks/handlers.ts | 47 +++++++++- 4 files changed, 101 insertions(+), 58 deletions(-) diff --git a/src/api/manufacturer.tsx b/src/api/manufacturer.tsx index 9a00b1ffc..860858820 100644 --- a/src/api/manufacturer.tsx +++ b/src/api/manufacturer.tsx @@ -147,8 +147,7 @@ export const useManufacturerById = ( }; const editManufacturer = async ( - manufacturer: EditManufacturer, - id: string | undefined + manufacturer: EditManufacturer ): Promise => { let apiUrl: string; apiUrl = ''; @@ -156,18 +155,23 @@ const editManufacturer = async ( if (settingsResult) { apiUrl = settingsResult['apiUrl']; } - // const { id, ...updatedManufacturer } = manufacturer; + const { id, ...updatedManufacturer } = manufacturer; return axios - .patch(`${apiUrl}/v1/manufacturers/${id}`, manufacturer) + .patch( + `${apiUrl}/v1/manufacturers/${id}`, + updatedManufacturer + ) .then((response) => response.data); }; -export const useEditManufacturer = ( - id: string | undefined -): UseMutationResult => { +export const useEditManufacturer = (): UseMutationResult< + ManufacturerDetail, + AxiosError, + EditManufacturer +> => { const queryClient = useQueryClient(); return useMutation( - (manufacturer: EditManufacturer) => editManufacturer(manufacturer, id), + (manufacturer: EditManufacturer) => editManufacturer(manufacturer), { onError: (error) => { console.log('Got error ' + error.message); diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx index 0795b5215..526ea4b49 100644 --- a/src/manufacturer/manufacturer.component.tsx +++ b/src/manufacturer/manufacturer.component.tsx @@ -165,6 +165,7 @@ function Manufacturer() { onClick={() => { setEditManufacturerDialogOpen(true); setSelectedManufacturer(item); + setManufacturer(item); }} > diff --git a/src/manufacturer/manufacturerDialog.component.tsx b/src/manufacturer/manufacturerDialog.component.tsx index aa780bb9e..f2814ea1e 100644 --- a/src/manufacturer/manufacturerDialog.component.tsx +++ b/src/manufacturer/manufacturerDialog.component.tsx @@ -84,9 +84,7 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { >(undefined); const { mutateAsync: addManufacturer } = useAddManufacturer(); - const { mutateAsync: editManufacturer } = useEditManufacturer( - selectedManufacturer?.id - ); + const { mutateAsync: editManufacturer } = useEditManufacturer(); const { data: selectedManufacturerData } = useManufacturerById( selectedManufacturer?.id ); @@ -94,7 +92,7 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { const handleClose = React.useCallback(() => { onChangeManufacturerDetails({ name: '', - url: '', + url: undefined, address: { building_number: '', street_name: '', @@ -104,7 +102,18 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { }, telephone: '', }); - + setNameError(false); + setNameErrorMessage(undefined); + setURLError(false); + setURLErrorMessage(undefined); + setAddressBuildingNumberError(false); + setAddressBuildingNumberErrorMessage(undefined); + setAddressStreetNameError(false); + setaddressStreetNameErrorMessage(undefined); + setAddresspostcodeError(false); + setAddresspostcodeErrorMessage(undefined); + setFormError(false); + setFormErrorMessage(undefined); onClose(); }, [onClose, onChangeManufacturerDetails]); @@ -120,8 +129,6 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { } } - console.log(manufacturer.address); - //check name if (!manufacturer.name || manufacturer.name?.trim().length === 0) { hasErrors = true; @@ -188,32 +195,23 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { }, [manufacturer, addManufacturer, handleClose]); const handleEditManufacturer = React.useCallback(() => { - let ManufacturerToEdit: EditManufacturer = { - name: undefined, - url: undefined, - address: { - building_number: undefined, - street_name: undefined, - town: undefined, - county: undefined, - postcode: undefined, - }, - telephone: undefined, - }; - if ( - (!manufacturer.name || manufacturer.name.trim() === '') && - (!manufacturer.url || manufacturer.url.trim() === '') && - (!manufacturer.address?.building_number || - manufacturer.address.building_number.trim() === '') && - (!manufacturer.address.street_name || - manufacturer.address.street_name.trim() === '') && - (!manufacturer.address.town || manufacturer.address.town.trim() === '') && - (!manufacturer.address.county || - manufacturer.address.county.trim() === '') && - (!manufacturer.address.postcode || - manufacturer.address.postcode.trim() === '') && - (!manufacturer.telephone || manufacturer.telephone.trim() === '') + !manufacturer.name || + manufacturer.name.trim() === '' || + !manufacturer.url || + manufacturer.url.trim() === '' || + !manufacturer.address?.building_number || + manufacturer.address.building_number.trim() === '' || + !manufacturer.address.street_name || + manufacturer.address.street_name.trim() === '' || + !manufacturer.address.town || + manufacturer.address.town.trim() === '' || + !manufacturer.address.county || + manufacturer.address.county.trim() === '' || + !manufacturer.address.postcode || + manufacturer.address.postcode.trim() === '' || + !manufacturer.telephone || + manufacturer.telephone.trim() === '' ) { setFormError(true); setFormErrorMessage('Please enter a value into atleast one field'); @@ -232,34 +230,29 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { } if (selectedManufacturer && selectedManufacturerData) { - const isNameUpdated = - manufacturer.name !== selectedManufacturer.name && - manufacturer.name !== ''; + const isNameUpdated = manufacturer.name !== selectedManufacturer.name; const isURLUpdated = manufacturer.url !== selectedManufacturer.url && - manufacturer.url !== undefined && - manufacturer.url !== ''; + manufacturer.url !== undefined; const isBuildingNumberUpdated = manufacturer.address?.building_number !== - selectedManufacturer.address.building_number && - manufacturer.address.building_number !== ''; + selectedManufacturer.address.building_number; const isStreetNameUpdated = manufacturer.address?.street_name !== - selectedManufacturer.address.street_name && - manufacturer.address.street_name !== ''; + selectedManufacturer.address.street_name; const isTownUpdated = - manufacturer.address?.town !== selectedManufacturer.address.town && - manufacturer.address.town !== ''; + manufacturer.address?.town !== selectedManufacturer.address.town; const isCountyUpdated = - manufacturer.address?.county !== selectedManufacturer.address.county && - manufacturer.address.county !== ''; + manufacturer.address?.county !== selectedManufacturer.address.county; const ispostcodeUpdated = manufacturer.address?.postcode !== - selectedManufacturer.address.postcode && - manufacturer.address.postcode !== ''; + selectedManufacturer.address.postcode; const isTelephoneUpdated = - manufacturer.telephone !== selectedManufacturer.telephone && - manufacturer.telephone !== ''; + manufacturer.telephone !== selectedManufacturer.telephone; + + let ManufacturerToEdit: EditManufacturer = { + id: selectedManufacturer?.id, + }; if (isNameUpdated) { ManufacturerToEdit = { diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 60dc4cf49..07f71c165 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -1,7 +1,7 @@ import { rest } from 'msw'; import CatalogueCategoryJSON from './CatalogueCategory.json'; import ManufacturerJSON from './manufacturer.json'; -import { AddManufacturer } from '../app.types'; +import { AddManufacturer, EditManufacturer } from '../app.types'; import CatalogueItemJSON from './CatalogueItems.json'; import SystemsJSON from './Systems.json'; import { @@ -10,6 +10,7 @@ import { EditCatalogueCategory, EditCatalogueItem, } from '../app.types'; +import { Man } from '@mui/icons-material'; export const handlers = [ rest.post('/v1/catalogue-categories', async (req, res, ctx) => { @@ -115,6 +116,16 @@ export const handlers = [ return res(ctx.status(200), ctx.json(ManufacturerJSON)); }), + rest.get('/v1/manufacturers/:id', (req, res, ctx) => { + const { id } = req.params; + + const data = ManufacturerJSON.find( + (manufacturer) => manufacturer.id === id + ); + + return res(ctx.status(200), ctx.json(data)); + }), + rest.post('/v1/manufacturers', async (req, res, ctx) => { const body = (await req.json()) as AddManufacturer; @@ -167,6 +178,40 @@ export const handlers = [ } }), + rest.patch('/v1/manufacturers/:id', async (req, res, ctx) => { + const { id } = req.params; + const data = ManufacturerJSON.filter( + (manufacturer) => manufacturer.id === id + ); + const body = (await req.json()) as EditManufacturer; + if (body.name === 'test_dup') { + return res( + ctx.status(409), + ctx.json({ + detail: 'Duplicate manufacturer name', + }) + ); + } + if (body.name === 'Error 500') { + return res(ctx.status(500), ctx.json('')); + } + return res( + ctx.status(200), + ctx.json({ + name: 'test', + address: { + building_number: '100', + street_name: 'test', + town: 'test', + county: 'test', + postcode: 'test', + }, + telephone: '0000000000', + id: '1', + }) + ); + }), + rest.delete('/v1/catalogue-categories/:id', (req, res, ctx) => { const { id } = req.params; const validCatalogueCategory = CatalogueCategoryJSON.find(