barcode works and populates next available

barkmanui/src/features/inventory/AddItem.tsx

@@ -6,6 +6,8 @@ import {useNavigate} from "react-router";
 import {IconX, IconCheck} from '@tabler/icons-react';
 import {notifications} from '@mantine/notifications';
 import useInventoryList from "./hooks/useInventoryList.tsx";
+import {useEffect} from "react";
+
 
 function AddItem() {
 
@@ -66,10 +68,18 @@ function AddItem() {
 
     })
 
+    useEffect(() => {
+        if (rawData.data) {
+            const data = rawData.data;
+            const nextBarcode = data[data.length - 1].barcode + 1;
+            newItemForm.setValues({barcode: nextBarcode});
+        }
+    },[rawData.data]);
+
     if (rawData.isPending) return 'Loading...'
     if (rawData.error) return 'An error has occurred: ' + rawData.error.message
-    const data = rawData.data
+
-    const nextBarcode = data[data.length - 1].barcode + 1;
+
 
 
     return (
@@ -86,8 +96,7 @@ function AddItem() {
 
                         <Title order={1}>Add Item</Title>
                         <NumberInput withAsterisk size="md" key={newItemForm.key('barcode')} label="Barcode"
-                                     placeholder="Barcode"
+                                     placeholder="Barcode" {...newItemForm.getInputProps('barcode')}/>
-                                     value={nextBarcode} {...newItemForm.getInputProps('barcode')}/>
                         <TextInput withAsterisk key={newItemForm.key('brand')} size="md" label="Brand"
                                    placeholder="Brand" {...newItemForm.getInputProps('brand')}/>
                         <TextInput withAsterisk key={newItemForm.key('name')} size="md" label="Name"