From 5bd4613dd624f7328bf2d334c43bb048d8de56a4 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Mon, 18 Dec 2023 19:26:40 +0100 Subject: [PATCH] disable mutation when there is no changes an add info toast --- .../features/targets/list/component.tsx | 155 ++++++++++-------- .../protected-areas/threshold/index.tsx | 101 +++++++----- 2 files changed, 141 insertions(+), 115 deletions(-) diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/targets/list/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/targets/list/component.tsx index 16d7c5ae60..542a5c9ae1 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/features/targets/list/component.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/features/targets/list/component.tsx @@ -12,7 +12,7 @@ import { useDebouncedCallback } from 'use-debounce'; import { useSaveSelectedFeatures, useSelectedFeatures, useTargetedFeatures } from 'hooks/features'; import { useCanEditScenario } from 'hooks/permissions'; -import { useSaveScenario, useScenario } from 'hooks/scenarios'; +import { useToasts } from 'hooks/toast'; import Button from 'components/button'; import ConfirmationPrompt from 'components/confirmation-prompt'; @@ -26,6 +26,8 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void }) const [confirmationTarget, setConfirmationTarget] = useState(null); const [confirmationFPF, setConfirmationFPF] = useState(null); + const { addToast } = useToasts(); + const queryClient = useQueryClient(); const { query } = useRouter(); const { pid, sid } = query as { pid: string; sid: string }; @@ -39,11 +41,6 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void }) const editable = useCanEditScenario(pid, sid); const selectedFeaturesMutation = useSaveSelectedFeatures({}); - const saveScenarioMutation = useSaveScenario({ - requestConfig: { - method: 'PATCH', - }, - }); const { data: selectedFeaturesData } = useSelectedFeatures(sid, {}); @@ -53,9 +50,6 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void }) isFetched: targetedFeaturesIsFetched, } = useTargetedFeatures(sid); - const { data: scenarioData } = useScenario(sid); - const { metadata } = scenarioData || {}; - const INITIAL_VALUES = useMemo(() => { return { features: targetedFeaturesData, @@ -137,76 +131,93 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void }) }, []); const onSubmit = useCallback( - (values) => { - setSubmitting(true); + (values, form) => { const { features } = values; - const data = { - status: 'created', - features: selectedFeaturesData.map((sf) => { - const { featureId, kind, geoprocessingOperations } = sf; - - if (kind === 'withGeoprocessing') { + const featuresFieldTouched = form.getFieldState('features')?.dirty; + + if (featuresFieldTouched) { + setSubmitting(true); + + const data = { + status: 'created', + features: selectedFeaturesData.map((sf) => { + const { featureId, kind, geoprocessingOperations } = sf; + + if (kind === 'withGeoprocessing') { + return { + featureId, + kind, + geoprocessingOperations: geoprocessingOperations.map((go) => { + const { splits } = go; + + return { + ...go, + splits: splits + .filter((s) => { + return features.find((f) => { + return f.parentId === featureId && f.value === s.value; + }); + }) + .map((s) => { + const { target, fpf } = features.find((f) => { + return f.parentId === featureId && f.value === s.value; + }); + + return { + ...s, + marxanSettings: { + prop: target / 100 || 0.5, + fpf, + }, + }; + }), + }; + }), + }; + } + + const { target, fpf = 1 } = features.find((f) => f.featureId === featureId); return { featureId, kind, - geoprocessingOperations: geoprocessingOperations.map((go) => { - const { splits } = go; - - return { - ...go, - splits: splits - .filter((s) => { - return features.find((f) => { - return f.parentId === featureId && f.value === s.value; - }); - }) - .map((s) => { - const { target, fpf } = features.find((f) => { - return f.parentId === featureId && f.value === s.value; - }); - - return { - ...s, - marxanSettings: { - prop: target / 100 || 0.5, - fpf, - }, - }; - }), - }; - }), + marxanSettings: { + prop: target / 100 || 0.5, + fpf, + }, }; - } + }), + }; - const { target, fpf = 1 } = features.find((f) => f.featureId === featureId); - return { - featureId, - kind, - marxanSettings: { - prop: target / 100 || 0.5, - fpf, - }, - }; - }), - }; - - selectedFeaturesMutation.mutate( - { - id: `${sid}`, - data, - }, - { - onSuccess: async () => { - await queryClient.invalidateQueries(['selected-features', sid]); - }, - onSettled: () => { - setSubmitting(false); + selectedFeaturesMutation.mutate( + { + id: `${sid}`, + data, }, - } - ); + { + onSuccess: async () => { + await queryClient.invalidateQueries(['selected-features', sid]); + }, + onSettled: () => { + setSubmitting(false); + }, + } + ); + } + if (!featuresFieldTouched) { + addToast( + 'save-selected-features', + <> +

+

No modifications have been made to the selected features.

+ , + { + level: 'info', + } + ); + } }, - [sid, queryClient, selectedFeaturesData, selectedFeaturesMutation] + [sid, queryClient, selectedFeaturesData, selectedFeaturesMutation, addToast] ); const toggleSeeOnMap = useCallback( @@ -253,7 +264,7 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void }) return ( - {({ handleSubmit, form, values }) => ( + {({ handleSubmit, values }) => (
void }) type="submit" theme="primary" size="lg" - disabled={submitting || !form.getFieldState('features')?.dirty} + disabled={submitting} > Save diff --git a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/threshold/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/threshold/index.tsx index 2e54618858..7579ecbedc 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/threshold/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/threshold/index.tsx @@ -120,51 +120,66 @@ export const WDPAThreshold = ({ onGoBack }: { onGoBack: () => void }): JSX.Eleme const areProjectPAreasSelected = !!projectPAreasSelectedIds.length; const handleSubmit = useCallback( - (values) => { - setSubmitting(true); - + (values, form) => { const { wdpaThreshold } = values; - saveScenarioProtectedAreasMutation.mutate( - { - id: `${sid}`, - data: { - areas: selectedProtectedAreas, - threshold: +(wdpaThreshold * 100).toFixed(0), - }, - }, - { - onSuccess: () => { - addToast( - 'save-scenario-wdpa', - <> -

Success!

-

Scenario protected areas threshold saved

- , - { - level: 'success', - } - ); - }, - onError: () => { - addToast( - 'error-scenario-wdpa', - <> -

Error!

-

Scenario protected areas threshold not saved

- , - { - level: 'error', - } - ); - }, - onSettled: () => { - setSubmitting(false); + const thresholdTouched = form.getFieldState('wdpaThreshold')?.dirty; + + if (thresholdTouched) { + setSubmitting(true); + saveScenarioProtectedAreasMutation.mutate( + { + id: `${sid}`, + data: { + areas: selectedProtectedAreas, + threshold: +(wdpaThreshold * 100).toFixed(0), + }, }, - } - ); + { + onSuccess: () => { + addToast( + 'save-scenario-wdpa', + <> +

Success!

+

Scenario protected areas threshold saved

+ , + { + level: 'success', + } + ); + }, + onError: () => { + addToast( + 'error-scenario-wdpa', + <> +

Error!

+

Scenario protected areas threshold not saved

+ , + { + level: 'error', + } + ); + }, + onSettled: () => { + setSubmitting(false); + }, + } + ); + } + if (!thresholdTouched) { + addToast( + 'save-scenario-wdpa', + <> +

+

No modifications have been made to the protected areas.

+ , + { + level: 'info', + } + ); + } }, - [saveScenarioProtectedAreasMutation, selectedProtectedAreas, sid, addToast, onGoBack] + [saveScenarioProtectedAreasMutation, selectedProtectedAreas, sid, addToast] ); useEffect(() => { @@ -205,7 +220,7 @@ export const WDPAThreshold = ({ onGoBack }: { onGoBack: () => void }): JSX.Eleme - {({ values, handleSubmit: RFFhandleSubmit, form }) => { + {({ values, handleSubmit: RFFhandleSubmit }) => { return ( void }): JSX.Eleme size="lg" type="submit" className="relative px-20 md:px-9 lg:px-16 xl:px-20" - disabled={submitting || !form.getFieldState('wdpaThreshold')?.dirty} + disabled={submitting} > Save