Merge pull request #322 from orppst/318-observations-change-to-mutations

318 observations change to mutations
orppst · Jan 27, 2025 · b51e534 · b51e534
2 parents 1b85895 + fa8a2b5
commit b51e534
Show file tree

Hide file tree

Showing 7 changed files with 315 additions and 153 deletions.
diff --git a/src/main/webui/src/ProposalEditorView/observationFields/observationFields.form.tsx b/src/main/webui/src/ProposalEditorView/observationFields/observationFields.form.tsx
@@ -14,8 +14,8 @@ import {useForm} from "@mantine/form";
 import {SubmitButton} from "../../commonButtons/save.tsx";
 import CancelButton from "src/commonButtons/cancel.tsx";
 import {
-    fetchProposalResourceAddNewField,
-    fetchProposalResourceChangeFieldName
+    useProposalResourceAddNewField,
+    useProposalResourceChangeFieldName
 } from "../../generated/proposalToolComponents.ts";
 import {useParams, useNavigate} from "react-router-dom";
 import {useQueryClient} from "@tanstack/react-query";
@@ -34,6 +34,10 @@ export default function ObservationFieldsForm(props: ObservationFieldsProps) : R
     const {selectedProposalCode} = useParams();
     const queryClient = useQueryClient();
 
+    const addFieldMutation = useProposalResourceAddNewField();
+
+    const changeFieldMutation = useProposalResourceChangeFieldName();
+
 
     /*
         Developer note: If more Field types are added to the underlying data model then this array
@@ -117,19 +121,23 @@ export default function ObservationFieldsForm(props: ObservationFieldsProps) : R
         if (props.observationField) {
             //editing an existing Field
 
-            fetchProposalResourceChangeFieldName({
+            changeFieldMutation.mutate({
                 pathParams: {
                     proposalCode: Number(selectedProposalCode),
                     fieldId: props.observationField._id!
                 },
                 body: values.fieldName,
                 //@ts-ignore
                 headers: {"Content-Type": "text/plain"}
+            }, {
+                onSuccess: () => {
+                    queryClient.invalidateQueries().then();
+                    notifySuccess("Success", "Field name updated");
+                    props.closeModal!();
+                },
+                onError: (error) =>
+                    notifyError("Failed to update Field Name", getErrorMessage(error))
             })
-                .then(() => queryClient.invalidateQueries())
-                .then(() => notifySuccess("Success", "Field name updated"))
-                .then(() => props.closeModal!())
-                .catch(error => notifyError("Failed to update Field Name", getErrorMessage(error)))
 
             // add more stuff as we add more Field implementation
 
@@ -146,7 +154,6 @@ export default function ObservationFieldsForm(props: ObservationFieldsProps) : R
             }
 
             //This code may need some refactoring
-
             let targetField = baseField as TargetField;
 
             let fieldToPass : FieldToPass = {
@@ -170,14 +177,20 @@ export default function ObservationFieldsForm(props: ObservationFieldsProps) : R
                 }
             }
 
-            fetchProposalResourceAddNewField({
-                pathParams: {proposalCode: Number(selectedProposalCode)},
+            addFieldMutation.mutate({
+                pathParams: {
+                    proposalCode: Number(selectedProposalCode)
+                },
                 body: fieldToPass.theField
+            }, {
+                onSuccess: () => {
+                    queryClient.invalidateQueries().then();
+                    notifySuccess("Success", "Field name updated");
+                    props.closeModal!();
+                },
+                onError: (error) =>
+                    notifyError("Failed to create new Field", getErrorMessage(error))
             })
-                .then(() => queryClient.invalidateQueries())
-                .then(() => notifySuccess("Success", "New Field created"))
-                .then(() => props.closeModal!())
-                .catch(error => notifyError("Failed to create new Field", getErrorMessage(error)))
         }
     })
   const navigate = useNavigate();

diff --git a/src/main/webui/src/ProposalEditorView/observationFields/observationFieldsTable.tsx b/src/main/webui/src/ProposalEditorView/observationFields/observationFieldsTable.tsx
@@ -2,9 +2,8 @@ import {ReactElement} from "react";
 import {Group, Table, Text} from "@mantine/core";
 import {useParams} from "react-router-dom";
 import {
-    fetchProposalResourceRemoveField,
     useProposalResourceGetField,
-    useProposalResourceGetFields
+    useProposalResourceGetFields, useProposalResourceRemoveField
 } from "../../generated/proposalToolComponents.ts";
 import ObservationFieldModal from "./observationFields.modal.tsx";
 import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
@@ -32,6 +31,8 @@ function ObservationFieldsRow(props: ObservationFieldRowProps): ReactElement {
 
     const queryClient = useQueryClient();
 
+    const removeFieldMutation = useProposalResourceRemoveField()
+
     if (field.isError) {
         return (
             <Table.Tr key={props.fieldId}><Table.Td>Error: {getErrorMessage(field.error)}</Table.Td>
@@ -48,17 +49,20 @@ function ObservationFieldsRow(props: ObservationFieldRowProps): ReactElement {
     }
 
     const handleDelete = () => {
-        fetchProposalResourceRemoveField({
+        removeFieldMutation.mutate({
             pathParams: {
                 proposalCode: props.proposalCode,
                 fieldId: props.fieldId
             }
+        }, {
+            onSuccess: () => {
+                queryClient.invalidateQueries().then();
+                notifySuccess("Deleted Successfully",
+                    "the field has been removed");
+            },
+            onError: (error) =>
+                notifyError("Deletion Failed", getErrorMessage(error))
         })
-            .then(() => queryClient.invalidateQueries())
-            .then(() => notifySuccess("Deleted Successfully",
-                "the field has been removed"))
-            .catch(error => notifyError("Deletion Failed",
-                getErrorMessage(error)))
     }
 
     const confirmDeletion = () => modals.openConfirmModal({