From 00b392876b4561d1ac8ae025fc285fa3b94c64e1 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 2 Apr 2025 22:49:30 +0700
Subject: [PATCH] feat: add updateInventoryItem function and integrate with
 EditInventoryItem component

---
 frontend/api/inventory.ts                     | 20 +++-
 .../inventory/edit-inventory-item.tsx         | 93 +++++++++++++------
 frontend/types.ts                             |  2 +
 3 files changed, 85 insertions(+), 30 deletions(-)

diff --git a/frontend/api/inventory.ts b/frontend/api/inventory.ts
index 0c44e4e..ae9c465 100644
--- a/frontend/api/inventory.ts
+++ b/frontend/api/inventory.ts
@@ -4,6 +4,7 @@ import type {
   InventoryItemStatus,
   InventoryItemCategory,
   CreateInventoryItemInput,
+  UpdateInventoryItemInput,
 } from "@/types";
 
 /**
@@ -113,12 +114,25 @@ export async function createInventoryItem(
 
 export async function deleteInventoryItem(id: string) {
   try {
-    const response = await axiosInstance.delete<InventoryItem>(
-      "/inventory/" + id
-    );
+    const response = await axiosInstance.delete("/inventory/" + id);
     return response.data;
   } catch (error) {
     console.error("Error while deleting Inventory Item! " + error);
     throw new Error("Failed to deleting inventory item: " + error);
   }
 }
+export async function updateInventoryItem(
+  id: string,
+  item: UpdateInventoryItemInput
+) {
+  try {
+    const response = await axiosInstance.put<InventoryItem>(
+      "/inventory/" + id,
+      item
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error while updating Inventory Item! " + error);
+    throw new Error("Failed to updating inventory item: " + error);
+  }
+}
diff --git a/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx b/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
index 6ee2603..0740170 100644
--- a/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
+++ b/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
@@ -32,8 +32,8 @@ import {
   InventoryItemCategory,
   HarvestUnits,
 } from "@/types";
-// import { updateInventoryItem } from "@/api/inventory";
-// import type { UpdateInventoryItemInput } from "@/types";
+import { updateInventoryItem } from "@/api/inventory";
+import type { UpdateInventoryItemInput } from "@/types";
 
 export interface EditInventoryItemProps {
   id: string;
@@ -76,35 +76,73 @@ export function EditInventoryItem({
       (statusItem) => statusItem.id.toString() === statusId
     )?.name
   );
+  const [error, setError] = useState<string | null>(null);
 
-  // const queryClient = useQueryClient();
+  const queryClient = useQueryClient();
 
-  // const mutation = useMutation({
-  //   mutationFn: (item: UpdateInventoryItemInput) => UpdateInventoryItem(item),
-  //   onSuccess: () => {
-  //     // Invalidate queries to refresh inventory data.
-  //     queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
-  //     // Reset form fields and close dialog.
-  //     setItemName("");
-  //     setItemType("");
-  //     setItemCategory("");
-  //     setItemQuantity(0);
-  //     setItemUnit("");
-  //     setDate(undefined);
-  //     setOpen(false);
-  //   },
-  // });
+  const mutation = useMutation({
+    mutationFn: (item: UpdateInventoryItemInput) =>
+      updateInventoryItem(id, item),
+    onSuccess: () => {
+      // invalidate queries to refresh inventory data.
+      queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
+      // reset form fields and close dialog.
+      setItemName("");
+      setItemCategory("");
+      setItemQuantity(0);
+      setItemUnit("");
+      setOpen(false);
+      setItemStatus("");
+    },
+  });
 
+  // send edit request
   const handleEdit = () => {
-    //   // Basic validation (you can extend this as needed)
-    //   if (!itemName || !itemType || !itemCategory || !itemUnit) return;
-    //   mutation.mutate({
-    //     name: itemName,
-    //     type: itemType,
-    //     category: itemCategory,
-    //     quantity: itemQuantity,
-    //     unit: itemUnit,
-    //   });
+    if (!itemName || !itemCategory || !itemUnit) {
+      setError("All fields are required. Please fill in missing details.");
+      return;
+    }
+
+    const category = fetchedInventoryCategory.find(
+      (c) => c.name === itemCategory
+    );
+    const unit = fetchedHarvestUnits.find((u) => u.name === itemUnit);
+    const status = fetchedInventoryStatus.find((s) => s.name === itemStatus);
+
+    if (!category || !unit || !status) {
+      setError(
+        "Invalid category, unit, or status. Please select a valid option."
+      );
+      return;
+    }
+    // console.table({
+    //   name: itemName,
+    //   categoryId:
+    //     fetchedInventoryCategory.find(
+    //       (category) => category.name === itemCategory
+    //     )?.id ?? 0,
+    //   quantity: itemQuantity,
+    //   unitId:
+    //     fetchedHarvestUnits.find((unit) => unit.name === itemUnit)?.id ?? 0,
+    //   statusId:
+    //     fetchedInventoryStatus.find((status) => status.name === itemStatus)
+    //       ?.id ?? 0,
+    //   lastUpdated: new Date().toISOString(),
+    // });
+    mutation.mutate({
+      name: itemName,
+      categoryId:
+        fetchedInventoryCategory.find(
+          (category) => category.name === itemCategory
+        )?.id ?? 0,
+      quantity: itemQuantity,
+      unitId:
+        fetchedHarvestUnits.find((unit) => unit.name === itemUnit)?.id ?? 0,
+      statusId:
+        fetchedInventoryStatus.find((status) => status.name === itemStatus)
+          ?.id ?? 0,
+      lastUpdated: new Date().toISOString(),
+    });
   };
 
   return (
@@ -205,6 +243,7 @@ export function EditInventoryItem({
           </div>
         </div>
         <DialogFooter>
+          {error && <p className="text-red-500 text-sm">{error}</p>}
           <Button type="submit" onClick={handleEdit}>
             Save
           </Button>
diff --git a/frontend/types.ts b/frontend/types.ts
index fa0e53d..4be8579 100644
--- a/frontend/types.ts
+++ b/frontend/types.ts
@@ -91,6 +91,8 @@ export type CreateInventoryItemInput = {
   statusId: number;
 };
 
+export type UpdateInventoryItemInput = CreateInventoryItemInput & {};
+
 export interface Blog {
   id: number;
   title: string;