form stuff pt2

barkmanui/src/features/inventory/EditItem.tsx

@@ -1,14 +1,17 @@
 import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
 import { useForm } from '@mantine/form';
 import {useParams} from "react-router";
-import {useQuery} from "@tanstack/react-query";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import {InventoryItem} from "./types.ts";
 import {useEffect} from "react";
+import {put} from "axios";
+
+type EditableInventoryItem = Omit<InventoryItem, 'id'>;
 
 function EditItem() {
     const params = useParams();
 
-    const form = useForm({
+    const form = useForm<EditableInventoryItem>({
         mode: 'uncontrolled',
         initialValues: {
             name: "",
@@ -25,6 +28,8 @@ function EditItem() {
     });
 
 
+
+
     const { isPending, error, data, isFetching } = useQuery({
         queryKey: ['inventory', params.itemId],
         queryFn: async (): Promise<InventoryItem> => {
@@ -38,28 +43,61 @@ function EditItem() {
         },
     });
 
+    const queryClient = useQueryClient();
+
+    const updateItem = useMutation({
+        mutationFn: async (values: EditableInventoryItem) => {
+
+            // await <call the api, do the things>
+            const result = await fetch(import.meta.env.VITE_API_URL + '/inventory/' + params.itemId, {
+                method: 'PUT',
+                body: JSON.stringify(values),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if (!result.ok) {
+                throw new Error('Failed to update inventory item');
+            }
+
+            // invalidate the queries so they pull updated information
+            // this is a prefix, so it covers both the query that pulls a list, and also `['inventory', itemId]` in this file
+            await queryClient.invalidateQueries({
+                queryKey: ['inventory']
+            });
+        }
+    })
+
     useEffect(() => {
         if (data) {
             // Even if query.data changes, form will be initialized only once
             form.initialize(data);
         }
-    }, [data, form]);
+    }, [data]);
 
     if (isPending) return 'Loading...'
 
     if (error) return 'An error has occurred: ' + error.message
 
     return (
-        <form onSubmit={form.onSubmit((values) => console.log(values))}>
+        <form onSubmit={form.onSubmit(async (values) => await
+            updateItem.mutateAsync(values))}>
             <div>{isFetching ? 'Updating...' : ''}</div>
             <Text>ID: {data.id}</Text>
-            <TextInput withAsterisk key={form.key('brand')} size="md" label="Brand" placeholder="Brand"/>
-            <TextInput withAsterisk key={form.key('name')} size="md" label="Name" placeholder="Name"/>
-            <TextInput size="md" key={form.key('status')} label="Status" placeholder="Status"/>
-            <TextInput size="md" key={form.key('serialNumber')} label="Serial Number" placeholder="Serial Number"/>
-            <NumberInput size="md" key={form.key('rentalPrice')} label="Rental Price" placeholder="Rental Price"/>
-            <NumberInput size="md" key={form.key('replacementCost')} label="Replacement Cost" placeholder="Replacement Cost"/>
-            <Textarea label="Notes" key={form.key('notes')} placeholder="Notes"/>
+            <TextInput withAsterisk key={form.key('brand')} size="md" label="Brand"
+                       placeholder="Brand" {...form.getInputProps('brand')}/>
+            <TextInput withAsterisk key={form.key('name')} size="md" label="Name"
+                       placeholder="Name" {...form.getInputProps('name')}/>
+            <TextInput size="md" key={form.key('status')} label="Status"
+                       placeholder="Status" {...form.getInputProps('status')}/>
+            <TextInput size="md" key={form.key('serialNumber')} label="Serial Number"
+                       placeholder="Serial Number"{...form.getInputProps('serialNumber')}/>
+            <NumberInput size="md" key={form.key('rentalPrice')} label="Rental Price"
+                         placeholder="Rental Price" {...form.getInputProps('rentalPrice')}/>
+            <NumberInput size="md" key={form.key('replacementCost')} label="Replacement Cost"
+                         placeholder="Replacement Cost" {...form.getInputProps('replacementCost')}/>
+            <Textarea label="Notes" key={form.key('notes')} placeholder="Notes" {...form.getInputProps('notes')}/>
 
             <Group justify="flex-end" mt="md">
                 <Button type="submit">Submit</Button>