form stuff

barkmanui/src/features/inventory/EditItem.tsx

@@ -3,6 +3,7 @@ import { useForm } from '@mantine/form';
 import {useParams} from "react-router";
 import {useQuery} from "@tanstack/react-query";
 import {InventoryItem} from "./types.ts";
+import {useEffect} from "react";
 
 function EditItem() {
     const params = useParams();
@@ -10,14 +11,20 @@ function EditItem() {
     const form = useForm({
         mode: 'uncontrolled',
         initialValues: {
-            email: '',
-            termsOfService: false,
+            name: "",
+            brand: "",
+            status: "",
+            serialNumber: "",
+            rentalPrice: 0,
+            replacementCost: 0,
+            notes: "",
         },
 
         validate: {
         },
     });
 
+
     const { isPending, error, data, isFetching } = useQuery({
         queryKey: ['inventory', params.itemId],
         queryFn: async (): Promise<InventoryItem> => {
@@ -31,22 +38,28 @@ function EditItem() {
         },
     });
 
+    useEffect(() => {
+        if (data) {
+            // Even if query.data changes, form will be initialized only once
+            form.initialize(data);
+        }
+    }, [data, form]);
+
     if (isPending) return 'Loading...'
 
     if (error) return 'An error has occurred: ' + error.message
 
-
     return (
         <form onSubmit={form.onSubmit((values) => console.log(values))}>
             <div>{isFetching ? 'Updating...' : ''}</div>
             <Text>ID: {data.id}</Text>
-            <TextInput withAsterisk size="md" label="Brand" placeholder="Brand"/>
-            <TextInput withAsterisk size="md" label="Name" placeholder="Name"/>
-            <TextInput size="md" label="Status" placeholder="Status"/>
-            <TextInput size="md" label="Serial Number" placeholder="Serial Number"/>
-            <NumberInput size="md" label="Rental Price" placeholder="Rental Price"/>
-            <NumberInput size="md" label="Replacement Cost" placeholder="Replacement Cost"/>
-            <Textarea label="Notes" placeholder="Notes"/>
+            <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"/>
 
             <Group justify="flex-end" mt="md">
                 <Button type="submit">Submit</Button>