Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Split up AreaCoordinates file. #230

Merged
merged 1 commit into from
Feb 13, 2024
Merged

refactor: Split up AreaCoordinates file. #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions src/components/AreaCoordinates/AreaCoordinates.hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/* eslint-disable max-lines-per-function */
import { ModelAreaTypeDto } from '../../api/generated';
import { AreaCoordinateType } from './AreaCoordinates';

export type CoordinateErrorType = {
area?: string;
x0?: string;
y0?: string;
x1?: string;
y1?: string;
};

function NotANumber(value: any) {
return isNaN(value);
}
export const validateCoordinates = async (
area: AreaCoordinateType | undefined,
activeArea: ModelAreaTypeDto,
) => {
const errors: CoordinateErrorType = {};
if (!activeArea || activeArea.modelAreaTypeId === '') {
errors.area = 'Model area needs to be selected';
}

if (area && area.coordinates[0].x === area.coordinates[1].x) {
errors.x0 = 'X coordinates can´t be equal.';
}
if (area && area.coordinates[0].y === area.coordinates[1].y) {
errors.y0 = 'Y coordinates can´t be equal.';
}
if (area && NotANumber(area.coordinates[0].x)) {
errors.x0 = 'Coordinates can´t be string, just numbers are allowed.';
}
if (area && NotANumber(area.coordinates[0].y)) {
errors.y0 = 'Coordinates can´t be string, just numbers are allowed.';
}
if (area && NotANumber(area.coordinates[1].x)) {
errors.x1 = 'Coordinates can´t be string, just numbers are allowed.';
}
if (area && NotANumber(area.coordinates[1].y)) {
errors.y1 = 'Coordinates can´t be string, just numbers are allowed.';
}
if (area && area.coordinates[1].x === 0) {
errors.x1 = 'Bottom right corner can not be 0.';
}

if (
area &&
(area.coordinates[0].x === null ||
area.coordinates[0].x === undefined ||
// @ts-expect-error Autocomplete
area.coordinates[0].x === '')
) {
errors.x0 = 'All fields must be filled in';
}

if (
area &&
(area.coordinates[0].y === null ||
area.coordinates[0].y === undefined ||
// @ts-expect-error Autocomplete
area.coordinates[0].y === '')
) {
errors.y0 = 'All fields must be filled in';
}

if (
area &&
(area.coordinates[1].x === null ||
area.coordinates[1].x === undefined ||
// @ts-expect-error Autocomplete
area.coordinates[1].x === '')
) {
errors.x1 = 'All fields must be filled in';
}

if (
area &&
(area.coordinates[1].y === null ||
area.coordinates[1].y === undefined ||
// @ts-expect-error Autocomplete
area.coordinates[1].y === '')
) {
errors.y1 = 'All fields must be filled in';
}

return errors;
};
215 changes: 27 additions & 188 deletions src/components/AreaCoordinates/AreaCoordinates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/* eslint-disable max-lines */
/* eslint-disable react/prop-types */
/* eslint-disable max-lines-per-function */

import {
Expand All @@ -9,29 +8,23 @@ import {
Snackbar,
Typography,
} from '@equinor/eds-core-react';
import { useMutation, useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import {
AddAnalogueModelAreaCommandForm,
CoordinateDto,
ModelAreaTypeDto,
ModelAreaTypeService,
UpdateAnalogueModelAreaCommandForm,
} from '../../api/generated';
import { AnalogueModelsService } from '../../api/generated/services/AnalogueModelsService';
import { queryClient } from '../../auth/queryClient';
import { useFetchModel } from '../../hooks/useFetchModel';
import { useFetchModelAreas } from '../../hooks/useFetchModelAreas';
import { useMutateAreaCoordinates } from '../../hooks/useMutateAreaCoordinates';
import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
import {
CoordinateErrorType,
validateCoordinates,
} from './AreaCoordinates.hooks';
import * as Styled from './AreaCoordinates.styled';
import { CoordinateInput } from './CoordinateInput/CoordinateInput';

type ErrorType = {
area?: string;
x0?: string;
y0?: string;
x1?: string;
y1?: string;
};

export type AreaCoordinateType = {
modelAreaId: string;
coordinates: CoordinateDto[];
Expand Down Expand Up @@ -63,7 +56,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
const [showSaveAlert, setSaveAlert] = useState(false);
const [activeArea, setActiveArea] = useState<ModelAreaTypeDto>(defaultArea);
const [newArea, setNewArea] = useState<ModelAreaTypeDto>();
const [errors, setErrors] = useState<ErrorType>({});
const [errors, setErrors] = useState<CoordinateErrorType>({});
const [areaCoordinate, setAreaCoordinate] = useState<AreaCoordinateType>({
modelAreaId: '',
coordinates: [
Expand All @@ -80,60 +73,14 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
],
});

const { data, isLoading } = useFetchModel(modelId);
const modelAreas = useFetchModelAreas();
const mutateAreaCoordinates = useMutateAreaCoordinates();

function clearStatus() {
setSaveAlert(false);
}

function NotANumber(value: any) {
return isNaN(value);
}

const { data, isLoading } = useFetchModel(modelId);

const modelAreas = useQuery({
queryKey: ['model-area'],
queryFn: () => ModelAreaTypeService.getApiModelareatype(),
});

const postAreaCoordinates = useMutation({
mutationFn: ({
id,
requestBody,
}: {
id: string;
requestBody: AddAnalogueModelAreaCommandForm;
}) => {
return AnalogueModelsService.postApiAnalogueModelsModelAreas(
id,
requestBody,
);
},
onSuccess: () => {
queryClient.refetchQueries({ queryKey: ['analogue-model'] });
},
});

const putAreaCoordinates = useMutation({
mutationFn: ({
id,
modelAreaId,
requestBody,
}: {
id: string;
modelAreaId: string;
requestBody: UpdateAnalogueModelAreaCommandForm;
}) => {
return AnalogueModelsService.putApiAnalogueModelsModelAreas(
id,
modelAreaId,
requestBody,
);
},
onSuccess: () => {
queryClient.refetchQueries({ queryKey: ['analogue-model'] });
},
});

const handleSelectChange = async (
changes: AutocompleteChanges<ModelAreaTypeDto>,
) => {
Expand All @@ -144,21 +91,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
// Coordinates are set to default
if (changes.selectedItems.length <= 0) {
setActiveArea(defaultArea);
setAreaCoordinate({
modelAreaId: '',
coordinates: [
{
x: 0,
y: 0,
m: 0,
},
{
x: 0,
y: 0,
m: 1,
},
],
});
setAreaCoordinate(defaultState);
return;
}

Expand Down Expand Up @@ -228,94 +161,9 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
}
};

const validateCoordinates = async (area: AreaCoordinateType | undefined) => {
const errors: ErrorType = {};
if (!activeArea || activeArea.modelAreaTypeId === '') {
errors.area = 'Model area needs to be selected';
}

if (area && area.coordinates[0].x === area.coordinates[1].x) {
errors.x0 = 'X coordinates can´t be equal.';
}
if (area && area.coordinates[0].y === area.coordinates[1].y) {
errors.y0 = 'Y coordinates can´t be equal.';
}
if (area && NotANumber(area.coordinates[0].x)) {
errors.x0 = 'Coordinates can´t be string, just numbers are allowed.';
}
if (area && NotANumber(area.coordinates[0].y)) {
errors.y0 = 'Coordinates can´t be string, just numbers are allowed.';
}
if (area && NotANumber(area.coordinates[1].x)) {
errors.x1 = 'Coordinates can´t be string, just numbers are allowed.';
}
if (area && NotANumber(area.coordinates[1].y)) {
errors.y1 = 'Coordinates can´t be string, just numbers are allowed.';
}
if (area && area.coordinates[1].x === 0) {
errors.x1 = 'Bottom right corner can not be 0.';
}

if (
area &&
(area.coordinates[0].x === null ||
area.coordinates[0].x === undefined ||
// @ts-expect-error Autocomplete
area.coordinates[0].x === '')
) {
errors.x0 = 'All fields must be filled in';
}

if (
area &&
(area.coordinates[0].y === null ||
area.coordinates[0].y === undefined ||
// @ts-expect-error Autocomplete
area.coordinates[0].y === '')
) {
errors.y0 = 'All fields must be filled in';
}

if (
area &&
(area.coordinates[1].x === null ||
area.coordinates[1].x === undefined ||
// @ts-expect-error Autocomplete
area.coordinates[1].x === '')
) {
errors.x1 = 'All fields must be filled in';
}

if (
area &&
(area.coordinates[1].y === null ||
area.coordinates[1].y === undefined ||
// @ts-expect-error Autocomplete
area.coordinates[1].y === '')
) {
errors.y1 = 'All fields must be filled in';
}

return errors;
};

const clearAndUpdate = async () => {
setActiveArea(defaultArea);
setAreaCoordinate({
modelAreaId: '',
coordinates: [
{
x: 0,
y: 0,
m: 0,
},
{
x: 0,
y: 0,
m: 1,
},
],
});
setAreaCoordinate(defaultState);
return 'success';
};

Expand All @@ -338,10 +186,11 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
coordinates: areaCoordinate.coordinates,
};

const coordinateRes = await postAreaCoordinates.mutateAsync({
id: modelId,
requestBody: postRequestBody,
});
const coordinateRes =
await mutateAreaCoordinates.postAreaCoordinates.mutateAsync({
id: modelId,
requestBody: postRequestBody,
});

if (coordinateRes.success) {
const res = await clearAndUpdate();
Expand All @@ -351,11 +200,12 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
};

const putModelArea = async () => {
const coordinateRes = await putAreaCoordinates.mutateAsync({
id: modelId,
modelAreaId: areaCoordinate.modelAreaId,
requestBody: { coordinates: areaCoordinate.coordinates },
});
const coordinateRes =
await mutateAreaCoordinates.putAreaCoordinates.mutateAsync({
id: modelId,
modelAreaId: areaCoordinate.modelAreaId,
requestBody: { coordinates: areaCoordinate.coordinates },
});
if (coordinateRes.success) {
const res = await clearAndUpdate();
if (res === 'success') setSaveAlert(true);
Expand All @@ -373,7 +223,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
}
};
const handleSubmit = async () => {
const err = await validateCoordinates(areaCoordinate);
const err = await validateCoordinates(areaCoordinate, activeArea);
setErrors(err);

if (Object.keys(err).length === 0) {
Expand Down Expand Up @@ -456,18 +306,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
/>
</Styled.CoordinateInputs>

<div>
{errors && (
<div>
{' '}
<p>{errors.area}</p>
<p>{errors.x0}</p>
<p>{errors.y0}</p>
<p>{errors.x1}</p>
<p>{errors.y1}</p>
</div>
)}
</div>
{errors && <ErrorMessage errors={errors}></ErrorMessage>}
</Styled.CoordinateGroup>

<Button onClick={handleSubmit}>Save</Button>
Expand Down
Loading
Loading