Merge pull request #18 from Pup-Ion-Dev/edit-page-form

Edit page form

barkmanui/src/App.tsx

@@ -6,6 +6,7 @@ import {createTheme, MantineProvider} from '@mantine/core';
 import '@mantine/core/styles.css';
 import ItemDetail from "./features/inventory/ItemDetail.tsx";
 import EditItem from "./features/inventory/EditItem.tsx";
+import {BarkHeader} from "./common/components/BarkHeader.tsx";
 
 // Create a client
 const queryClient = new QueryClient()
@@ -33,6 +34,7 @@ function App() {
   return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{ (
       <QueryClientProvider client={queryClient}>
     <>
+        <BarkHeader></BarkHeader>
         <Routes>
             <Route index element={<Home />} />
             <Route path="inventory" element={<InventoryList />} />
@@ -40,7 +42,6 @@ function App() {
             <Route path="editItem/:itemId" element={<EditItem />} />
         </Routes>
 
-
     </>
       </QueryClientProvider>
   ) }</MantineProvider>;

barkmanui/src/features/inventory/EditItem.tsx

@@ -1,13 +1,30 @@
-import {NumberInput, Stack, Text, Textarea, TextInput} from "@mantine/core";
-import {BarkHeader} from "../../common/components/BarkHeader.tsx";
+import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
+import { useForm } from '@mantine/form';
 import {useParams} from "react-router";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import {InventoryItem} from "./types.ts";
-import {useQuery} from "@tanstack/react-query";
-
+import {useEffect} from "react";
 
+type EditableInventoryItem = Omit<InventoryItem, 'id'>;
 
 function EditItem() {
-    let params = useParams();
+    const params = useParams();
+
+    const form = useForm<EditableInventoryItem>({
+        mode: 'uncontrolled',
+        initialValues: {
+            name: "",
+            brand: "",
+            status: "",
+            serialNumber: "",
+            rentalPrice: 0,
+            replacementCost: 0,
+            notes: "",
+        },
+
+        validate: {
+        },
+    });
 
     const { isPending, error, data, isFetching } = useQuery({
         queryKey: ['inventory', params.itemId],
@@ -22,35 +39,67 @@ 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]);
+
     if (isPending) return 'Loading...'
 
     if (error) return 'An error has occurred: ' + error.message
 
     return (
-        <>
-            <BarkHeader></BarkHeader>
-            <Stack
-                h={600}
-                bg="var(--mantine-color-body)"
-                align="center"
-                justify="center"
-                gap="md"
-            >
-                <Text c="red">Edit Item</Text>
+        <form onSubmit={form.onSubmit(async (values) => await
+            updateItem.mutateAsync(values))}>
             <div>{isFetching ? 'Updating...' : ''}</div>
             <Text>ID: {data.id}</Text>
-                <TextInput withAsterisk size="md" label="Brand" placeholder={data.brand}/>
-                <TextInput withAsterisk size="md" label="Name" placeholder={data.name}/>
-                <TextInput size="md" label="Status" placeholder={data.status}/>
-                <TextInput size="md" label="Serial Number" placeholder={data.serialNumber}/>
-                <NumberInput size="md" label="Rental Price" placeholder={data.rentalPrice.toString()}/>
-                <NumberInput size="md" label="Replacement Cost" placeholder={data.replacementCost.toString()}/>
-                <Text>Replacement Cost: ${data.replacementCost}</Text>
-                <Textarea label="Notes" placeholder={data.notes}/>
-            </Stack>
+            <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>
+            </Group>
+        </form>
+    );
 }
 
-export default EditItem
+export default EditItem;

barkmanui/src/features/inventory/InventoryList.tsx

@@ -1,6 +1,5 @@
 import {useQuery} from "@tanstack/react-query";
 import {InventoryItem} from "./types";
-import {BarkHeader} from "../../common/components/BarkHeader.tsx";
 import {Flex, Table} from '@mantine/core';
 import BarkButton from "../../common/components/BarkButton.tsx";
 import {Link} from "react-router";
@@ -27,8 +26,6 @@ function InventoryList() {
 
     return (
         <>
-            <BarkHeader></BarkHeader>
-
             <Flex
                 mih={50}
                 gap="xl"

barkmanui/src/features/inventory/ItemDetail.tsx

@@ -1,9 +1,7 @@
 import {Text} from "@mantine/core";
-import {BarkHeader} from "../../common/components/BarkHeader.tsx";
 import {Link, useParams} from "react-router";
 import {InventoryItem} from "./types.ts";
 import {useQuery} from "@tanstack/react-query";
-import editItem from "./EditItem.tsx";
 
 
 
@@ -29,7 +27,6 @@ if (error) return 'An error has occurred: ' + error.message
 
     return (
         <>
-            <BarkHeader></BarkHeader>
             <Text c="red">Item Detail</Text>
             <div>{isFetching ? 'Updating...' : ''}</div>
             <Text>ID: {data.id}</Text>

barkmanui/src/pages/home.tsx

@@ -1,4 +1,3 @@
-import {BarkHeader} from "../common/components/BarkHeader.tsx";
 import {Text} from "@mantine/core";
 
 
@@ -7,11 +6,7 @@ function Home() {
 
     return (
         <>
-            <BarkHeader></BarkHeader>
-
             <Text c="red">Bark productions: at the intersection of professionalism and degeneracy</Text>
-
-
         </>
     )
 }