From 2f7369c7f56e84d05ca2b5bbd82c201324dbfe4f Mon Sep 17 00:00:00 2001
From: Drew Rautenberg <drew@drewrautenberg.com>
Date: Sun, 19 Jan 2025 20:10:22 -0600
Subject: [PATCH] Move BarkHeader component to App layout

Consolidated BarkHeader usage by removing it from individual pages and including it in the main App layout. This improves consistency and reduces redundancy across components.
---
 barkmanui/src/App.tsx                         |  3 +-
 barkmanui/src/features/inventory/EditItem.tsx | 64 ++++++++++---------
 .../src/features/inventory/InventoryList.tsx  |  3 -
 .../src/features/inventory/ItemDetail.tsx     |  3 -
 barkmanui/src/pages/home.tsx                  |  5 --
 5 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/barkmanui/src/App.tsx b/barkmanui/src/App.tsx
index d901048..9633399 100644
--- a/barkmanui/src/App.tsx
+++ b/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>;
diff --git a/barkmanui/src/features/inventory/EditItem.tsx b/barkmanui/src/features/inventory/EditItem.tsx
index c0c2e23..2755408 100644
--- a/barkmanui/src/features/inventory/EditItem.tsx
+++ b/barkmanui/src/features/inventory/EditItem.tsx
@@ -1,13 +1,22 @@
-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 {InventoryItem} from "./types.ts";
 import {useQuery} from "@tanstack/react-query";
-
-
+import {InventoryItem} from "./types.ts";
 
 function EditItem() {
-    let params = useParams();
+    const params = useParams();
+
+    const form = useForm({
+        mode: 'uncontrolled',
+        initialValues: {
+            email: '',
+            termsOfService: false,
+        },
+
+        validate: {
+        },
+    });
 
     const { isPending, error, data, isFetching } = useQuery({
         queryKey: ['inventory', params.itemId],
@@ -26,31 +35,24 @@ function EditItem() {
 
     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>
-                <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>
 
-        </>
-    )
+    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"/>
+
+            <Group justify="flex-end" mt="md">
+                <Button type="submit">Submit</Button>
+            </Group>
+        </form>
+    );
 }
 
-export default EditItem
\ No newline at end of file
+export default EditItem;
\ No newline at end of file
diff --git a/barkmanui/src/features/inventory/InventoryList.tsx b/barkmanui/src/features/inventory/InventoryList.tsx
index 8b796c0..1f3edec 100644
--- a/barkmanui/src/features/inventory/InventoryList.tsx
+++ b/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"
diff --git a/barkmanui/src/features/inventory/ItemDetail.tsx b/barkmanui/src/features/inventory/ItemDetail.tsx
index bf239dc..2f643d8 100644
--- a/barkmanui/src/features/inventory/ItemDetail.tsx
+++ b/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>
diff --git a/barkmanui/src/pages/home.tsx b/barkmanui/src/pages/home.tsx
index 4550c01..c50456f 100644
--- a/barkmanui/src/pages/home.tsx
+++ b/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>
-
-
         </>
     )
 }