sort works, barcode is weird

barkmanui/src/features/inventory/AddItem.tsx

@@ -1,38 +1,22 @@
 import {Button, Group, TextInput, NumberInput, Container, Title, Flex} from '@mantine/core';
 import {useForm} from '@mantine/form';
-import {useMutation, useQuery} from "@tanstack/react-query";
-import {InventoryItem, NewItem} from "./types.ts";
-import { useNavigate} from "react-router";
-import { IconX, IconCheck } from '@tabler/icons-react';
-import { notifications } from '@mantine/notifications';
+import {useMutation} from "@tanstack/react-query";
+import {NewItem} from "./types.ts";
+import {useNavigate} from "react-router";
+import {IconX, IconCheck} from '@tabler/icons-react';
+import {notifications} from '@mantine/notifications';
+import useInventoryList from "./hooks/useInventoryList.tsx";
 
 function AddItem() {
 
     const navigate = useNavigate();
 
-    const { isPending, error, data} = useQuery({
-        queryKey: ['inventory'],
-        queryFn: async (): Promise<InventoryItem[]> => {
-            const response = await fetch(
-                import.meta.env.VITE_API_URL + '/inventory',
-            )
-
-            if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
-
-            return await response.json()
-        },
-    });
-
-    if (isPending) return 'Loading...'
-
-    if (error) return 'An error has occurred: ' + error.message
-
-    const lastBarcode = data[data.length - 1].barcode;
+    const rawData = useInventoryList();
 
     const newItemForm = useForm<NewItem>({
         mode: 'uncontrolled',
         initialValues: {
-            barcode: lastBarcode + 1,
+            barcode: 0,
             name: "",
             brand: "",
             serialNumber: "",
@@ -56,8 +40,8 @@ function AddItem() {
 
             if (result.ok) {
                 notifications.show({
-                    icon: <IconCheck size={20} />,
-                    color:"teal",
+                    icon: <IconCheck size={20}/>,
+                    color: "teal",
                     title: "All good!",
                     message: "Item Created",
                     position: 'top-center',
@@ -68,8 +52,8 @@ function AddItem() {
 
             if (!result.ok) {
                 notifications.show({
-                    icon: <IconX size={20} />,
-                    color:"red",
+                    icon: <IconX size={20}/>,
+                    color: "red",
                     title: "Bummer!",
                     message: "Something went wrong",
                     position: 'top-center',
@@ -77,9 +61,16 @@ function AddItem() {
                 throw new Error('Failed to create inventory item');
             }
 
-        }
+        },
+
+
     })
 
+    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 (
         <>
@@ -94,8 +85,9 @@ function AddItem() {
                           wrap="wrap">
 
                         <Title order={1}>Add Item</Title>
-                        <NumberInput  withAsterisk size="md" key={newItemForm.key('barcode')} label="Barcode"
-                                      placeholder="Barcode" {...newItemForm.getInputProps('barcode')}/>
+                        <NumberInput withAsterisk size="md" key={newItemForm.key('barcode')} label="Barcode"
+                                     placeholder="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"