Skip to content

Commit

Permalink
improved edit logic (pre-populate fields)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MatteoGuarnaccia5
MatteoGuarnaccia5 committed Oct 31, 2023
1 parent cfaff6a commit 952cb9d
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 58 deletions.
20 changes: 12 additions & 8 deletions src/api/manufacturer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,27 +147,31 @@ export const useManufacturerById = (
};

const editManufacturer = async (
manufacturer: EditManufacturer,
id: string | undefined
manufacturer: EditManufacturer
): Promise<ManufacturerDetail> => {
let apiUrl: string;
apiUrl = '';
const settingsResult = await settings;
if (settingsResult) {
apiUrl = settingsResult['apiUrl'];
}
// const { id, ...updatedManufacturer } = manufacturer;
const { id, ...updatedManufacturer } = manufacturer;
return axios
.patch<ManufacturerDetail>(`${apiUrl}/v1/manufacturers/${id}`, manufacturer)
.patch<ManufacturerDetail>(
`${apiUrl}/v1/manufacturers/${id}`,
updatedManufacturer
)
.then((response) => response.data);
};

export const useEditManufacturer = (
id: string | undefined
): UseMutationResult<ManufacturerDetail, AxiosError, EditManufacturer> => {
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);
Expand Down
1 change: 1 addition & 0 deletions src/manufacturer/manufacturer.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ function Manufacturer() {
onClick={() => {
setEditManufacturerDialogOpen(true);
setSelectedManufacturer(item);
setManufacturer(item);
}}
>
<EditIcon />
Expand Down
91 changes: 42 additions & 49 deletions src/manufacturer/manufacturerDialog.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,17 +84,15 @@ 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
);

const handleClose = React.useCallback(() => {
onChangeManufacturerDetails({
name: '',
url: '',
url: undefined,
address: {
building_number: '',
street_name: '',
Expand All @@ -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]);

Expand All @@ -120,8 +129,6 @@ function ManufacturerDialog(props: ManufacturerDialogProps) {
}
}

console.log(manufacturer.address);

//check name
if (!manufacturer.name || manufacturer.name?.trim().length === 0) {
hasErrors = true;
Expand Down Expand Up @@ -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');
Expand All @@ -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 = {
Expand Down
47 changes: 46 additions & 1 deletion src/mocks/handlers.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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) => {
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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(
Expand Down

0 comments on commit 952cb9d

Please sign in to comment.