Merge pull request #328 from orppst/327-availableresources-mutations

327 availableresources mutations
orppst · Jan 29, 2025 · 6cf9b4c · 6cf9b4c
2 parents a7d6390 + cfd2e83
commit 6cf9b4c
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 57 deletions.
diff --git a/src/main/webui/src/ProposalManagerView/availableResources/availableResources.form.tsx b/src/main/webui/src/ProposalManagerView/availableResources/availableResources.form.tsx
@@ -4,14 +4,13 @@ import {AvailableResourcesProps} from "./availableResourcesPanel.tsx";
 import {FormSubmitButton} from "../../commonButtons/save.tsx";
 import {NumberInput, Select, Stack} from "@mantine/core";
 import {
-    fetchAvailableResourcesResourceAddCycleResource,
-    fetchAvailableResourcesResourceGetCycleResourceTypes,
-    fetchAvailableResourcesResourceUpdateCycleResourceAmount,
-    fetchResourceTypeResourceGetAllResourceTypes
+    useAvailableResourcesResourceAddCycleResource,
+    useAvailableResourcesResourceGetCycleResourceTypes,
+    useAvailableResourcesResourceUpdateCycleResourceAmount,
+    useResourceTypeResourceGetAllResourceTypes
 } from "../../generated/proposalToolComponents.ts";
 import {useParams} from "react-router-dom";
 import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
-import {ObjectIdentifier} from "../../generated/proposalToolSchemas.ts";
 import {useQueryClient} from "@tanstack/react-query";
 import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
 
@@ -28,35 +27,36 @@ export default function AvailableResourcesForm(props: AvailableResourcesProps) :
     const [resourceTypeData, setResourceTypeData]
         = useState<{value: string, label: string}[]>([]);
 
+    const resourceTypes = useResourceTypeResourceGetAllResourceTypes({});
+
+    const cycleResourceTypes = useAvailableResourcesResourceGetCycleResourceTypes({
+        pathParams: {
+            cycleCode: Number(selectedCycleCode)
+        }})
+
     useEffect(() => {
-        fetchResourceTypeResourceGetAllResourceTypes({})
-            .then((allTypes: ObjectIdentifier[]) => {
-                fetchAvailableResourcesResourceGetCycleResourceTypes({
-                    pathParams: {
-                        cycleCode: Number(selectedCycleCode)
-                    }
+        if(resourceTypes.error || resourceTypes.data == undefined) {
+            notifyError("Loading resource types failed",
+                "cause: " + getErrorMessage(resourceTypes.error));
+        } else if(cycleResourceTypes.error) {
+            notifyError("Loading cycle resource types failed",
+                "cause: " + getErrorMessage(cycleResourceTypes.error));
+        } else {
+            //array with resource types in 'allTypes' that are NOT in 'cycleTypes'
+            let diff =
+                resourceTypes.data.filter(rType => {
+                    let result: boolean = false
+                    if (cycleResourceTypes.data?.find(cType => cType.dbid == rType.dbid))
+                        result = true
+                    return !result;
                 })
-                    .then((cycleTypes: ObjectIdentifier[]) => {
-                        //array with resource types in 'allTypes' that are NOT in 'cycleTypes'
-                        let diff =
-                            allTypes.filter(rType => {
-                                let result : boolean = false
-                                if(cycleTypes.find(cType => cType.dbid == rType.dbid))
-                                    result = true
-                                return !result;
-                            })
-                        setResourceTypeData(
-                            diff?.map((rType)=> (
-                                {value: String(rType.dbid), label: rType.name!}
-                            ))
-                        )
-                    })
-                    .catch((error) => notifyError("Loading cycle resource types failed",
-                        "cause: " + getErrorMessage(error)))
-            })
-            .catch((error) => notifyError("Loading resource types failed",
-                "cause: " + getErrorMessage(error)))
-    }, []);
+            setResourceTypeData(
+                diff?.map((rType) => (
+                    {value: String(rType.dbid), label: rType.name!}
+                ))
+            )
+        }
+    }, [resourceTypes.data, resourceTypes.status, cycleResourceTypes.data, cycleResourceTypes.status]);
 
     const form  = useForm<AvailableResourcesValues>({
         initialValues: {
@@ -71,10 +71,33 @@ export default function AvailableResourcesForm(props: AvailableResourcesProps) :
         }
     });
 
+    const addCycleResourceMutation = useAvailableResourcesResourceAddCycleResource({
+        onSuccess: ()=> {
+            queryClient.invalidateQueries().finally(() =>
+                props.closeModal!())
+        },
+        onError: ((error)=>
+            notifyError("Adding available resource failed",
+                    "cause: " + getErrorMessage(error)))
+    })
+
+    const updateCycleResourceMutation = useAvailableResourcesResourceUpdateCycleResourceAmount({
+        onSuccess: ()=> {
+            queryClient.invalidateQueries().finally(() =>
+                props.closeModal!());
+
+            notifySuccess("Update successful",
+                "Resource amount updated");
+        },
+        onError: ((error)=>
+            notifyError("Update available resource failed",
+                "cause: " + getErrorMessage(error)))
+    })
+
     const handleSubmit = form.onSubmit((values) => {
         if (props.resource) {
             //editing an existing 'available resource' i.e., changing the 'amount' only
-            fetchAvailableResourcesResourceUpdateCycleResourceAmount({
+            updateCycleResourceMutation.mutate({
                 pathParams: {
                     cycleCode: Number(selectedCycleCode),
                     resourceId: props.resource._id!
@@ -83,13 +106,9 @@ export default function AvailableResourcesForm(props: AvailableResourcesProps) :
                 //@ts-ignore
                 headers: {"Content-Type": "text/plain"}
             })
-                .then(()=>queryClient.invalidateQueries())
-                .then( () => props.closeModal!() )
-                .then(() => notifySuccess("Update successful",
-                    "Resource amount updated"))
         } else {
             //adding a new 'available resource'
-            fetchAvailableResourcesResourceAddCycleResource({
+            addCycleResourceMutation.mutate({
                 pathParams: {
                     cycleCode: Number(selectedCycleCode)
                 },
@@ -100,13 +119,7 @@ export default function AvailableResourcesForm(props: AvailableResourcesProps) :
                     }
                 }
             })
-                .then( ()=>queryClient.invalidateQueries() )
-                .then( () => props.closeModal!() )
-                .catch((error) => notifyError("Adding available resource failed",
-                    "cause: " + getErrorMessage(error)))
         }
-
-
     })
 
     return (

diff --git a/src/main/webui/src/ProposalManagerView/availableResources/availableResourcesPanel.tsx b/src/main/webui/src/ProposalManagerView/availableResources/availableResourcesPanel.tsx
@@ -68,7 +68,7 @@ export default function CycleAvailableResourcesPanel() : ReactElement {
             })
     }
 
-    const confirmDelete = (resource: Resource): String => modals.openConfirmModal({
+    const confirmDelete = (resource: Resource): void => modals.openConfirmModal({
         title: 'Delete Available Resource?',
         children: (
             <Text c={"yellow"} size={"sm"}>
@@ -86,9 +86,12 @@ export default function CycleAvailableResourcesPanel() : ReactElement {
         return (
             resourceTypes.data?.map((rType) => {
 
-                let textColour : string =
-                    !availableResources.data?.resources!.find(res => res.type!._id == rType.dbid ) ?
-                        'green' : 'orange';
+                let textColour : string = 'green';
+
+                    if(availableResources.data !== undefined
+                        && availableResources.data.resources !== undefined
+                        && availableResources.data?.resources!.find(res => res.type!._id == rType.dbid ))
+                            textColour = 'orange';
 
                 return (
                     <Text key={rType.dbid} c={textColour}>
@@ -102,6 +105,9 @@ export default function CycleAvailableResourcesPanel() : ReactElement {
 
     //<AvailableResourceModal resource={resource} /> can be treated as an alias for the "Edit" button
     const AvailableResourcesRows = () => {
+        if(availableResources.data === undefined || availableResources.data.resources === undefined) {
+            return (<Table.Tr><Table.Td>No resources!</Table.Td></Table.Tr>);
+        } else
         return (
             availableResources.data?.resources?.map((resource) => (
                     <Table.Tr key={resource._id}>

diff --git a/src/main/webui/src/ProposalManagerView/availableResources/resourceType.form.tsx b/src/main/webui/src/ProposalManagerView/availableResources/resourceType.form.tsx
@@ -3,7 +3,9 @@ import {Stack, TextInput} from "@mantine/core";
 import {MAX_CHARS_FOR_INPUTS} from "../../constants.tsx";
 import {useForm} from "@mantine/form";
 import {ResourceTypeFormValues} from "./resourceType.modal.tsx";
-import {fetchResourceTypeResourceAddNewResourceType} from "../../generated/proposalToolComponents.ts";
+import {
+    useResourceTypeResourceAddNewResourceType
+} from "../../generated/proposalToolComponents.ts";
 import {useQueryClient} from "@tanstack/react-query";
 import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
 import {FormSubmitButton} from "../../commonButtons/save.tsx";
@@ -32,23 +34,30 @@ export default function ResourceTypeForm(props: ResourceTypeFormValues) : ReactE
         }
     })
 
+    const addNewResourceTypeMutation = useResourceTypeResourceAddNewResourceType({
+        onSuccess: () => {
+            queryClient.invalidateQueries().finally();
+            props.closeModal!();
+            notifySuccess("Creation Successful",
+                "Added " + form.values.name + " (" + form.values.unit + ") to the resource types");
+        },
+        onError: (error) => {
+            notifyError("Creation Failed",
+                "Unable to add " + form.values.name + " (" + form.values.unit + ") due to: "
+                + getErrorMessage(error))
+        }
+    })
+
     const handleSubmit = form.onSubmit((values) => {
         //creating a new resource type
-        fetchResourceTypeResourceAddNewResourceType({
+        addNewResourceTypeMutation.mutate({
             body: {
                 name: values.name,
                 unit: values.unit
             },
             //@ts-ignore-
             headers: {"Content-Type": "application/json"}
         })
-            .then(() => queryClient.invalidateQueries())
-            .then(() => props.closeModal!())
-            .then(() => notifySuccess("Creation Successful",
-                "Added " + values.name + " (" + values.unit + ") to the resource types"))
-            .catch((error) =>notifyError("Creation Failed",
-                "Unable to add " + values.name + " (" + values.unit + ") due to: "
-                + getErrorMessage(error)))
     })
 
     return (