From 63d38fb99d43e8365132acf497326ae596d0dbe1 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 3 Apr 2025 21:30:41 +0700
Subject: [PATCH] feat: refactor inventory item deletion and editing logic for
 improved error handling and structure

---
 backend/internal/api/inventory.go             |  4 +-
 frontend/api/inventory.ts                     | 29 +++++++-
 .../inventory/delete-inventory-item.tsx       |  5 +-
 .../inventory/edit-inventory-item.tsx         | 73 +++++++------------
 frontend/app/(sidebar)/inventory/page.tsx     | 58 ++++++++++-----
 frontend/types.ts                             |  7 +-
 6 files changed, 98 insertions(+), 78 deletions(-)

diff --git a/backend/internal/api/inventory.go b/backend/internal/api/inventory.go
index f1cc6fe..04ca1cf 100644
--- a/backend/internal/api/inventory.go
+++ b/backend/internal/api/inventory.go
@@ -160,7 +160,6 @@ type GetInventoryItemOutput struct {
 
 type DeleteInventoryItemInput struct {
 	Header string `header:"Authorization" required:"true" example:"Bearer token"`
-	UserID string `header:"userId" required:"true" example:"user-uuid"`
 	ID     string `path:"id"`
 }
 
@@ -347,7 +346,8 @@ func (a *api) updateInventoryItemHandler(ctx context.Context, input *UpdateInven
 }
 
 func (a *api) deleteInventoryItemHandler(ctx context.Context, input *DeleteInventoryItemInput) (*DeleteInventoryItemOutput, error) {
-	err := a.inventoryRepo.Delete(ctx, input.ID, input.UserID)
+	userID, err := a.getUserIDFromHeader(input.Header)
+	err = a.inventoryRepo.Delete(ctx, input.ID, userID)
 	if err != nil {
 		return nil, err
 	}
diff --git a/frontend/api/inventory.ts b/frontend/api/inventory.ts
index 7c8d0f8..3847234 100644
--- a/frontend/api/inventory.ts
+++ b/frontend/api/inventory.ts
@@ -92,9 +92,32 @@ export async function deleteInventoryItem(id: string) {
   try {
     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);
+  } catch (error: unknown) {
+    // Cast error to AxiosError to safely access response properties
+    if (error instanceof AxiosError && error.response) {
+      // Log the detailed error message
+      console.error("Error while deleting Inventory Item!");
+      console.error("Response Status:", error.response.status); // e.g., 422
+      console.error("Error Detail:", error.response.data?.detail); // Custom error message from backend
+      console.error("Full Error Response:", error.response.data); // Entire error object (including details)
+
+      // Throw a new error with a more specific message
+      throw new Error(
+        `Failed to delete inventory item: ${
+          error.response.data?.detail || error.message
+        }`
+      );
+    } else {
+      // Handle other errors (e.g., network errors or unknown errors)
+      console.error(
+        "Error while deleting Inventory Item, unknown error:",
+        error
+      );
+      throw new Error(
+        "Failed to delete inventory item: " +
+          (error instanceof Error ? error.message : "Unknown error")
+      );
+    }
   }
 }
 export async function updateInventoryItem(
diff --git a/frontend/app/(sidebar)/inventory/delete-inventory-item.tsx b/frontend/app/(sidebar)/inventory/delete-inventory-item.tsx
index 677c095..79679c9 100644
--- a/frontend/app/(sidebar)/inventory/delete-inventory-item.tsx
+++ b/frontend/app/(sidebar)/inventory/delete-inventory-item.tsx
@@ -19,7 +19,6 @@ export function DeleteInventoryItem({ id }: { id: string }) {
     mutationFn: deleteInventoryItem,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
-      setOpen(false); // Close dialog on success
     },
     onError: (error) => {
       console.error("Failed to delete item:", error);
@@ -32,7 +31,7 @@ export function DeleteInventoryItem({ id }: { id: string }) {
 
   return (
     <div>
-      {/* trigger button for the confirmation dialog */}
+      {/* delete confirmation dialog */}
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
           <Button
@@ -48,8 +47,6 @@ export function DeleteInventoryItem({ id }: { id: string }) {
             Are you sure you want to delete this item? This action cannot be
             undone.
           </DialogDescription>
-
-          {/* footer with confirm and cancel buttons */}
           <DialogFooter>
             <Button
               className="bg-gray-500 hover:bg-gray-700 text-white"
diff --git a/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx b/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
index 465fb4d..5003a06 100644
--- a/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
+++ b/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
@@ -27,47 +27,40 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { InventoryStatus, InventoryItemCategory, HarvestUnits } from "@/types";
+import {
+  InventoryStatus,
+  InventoryItemCategory,
+  HarvestUnits,
+  UpdateInventoryItemInput,
+} from "@/types";
 import { updateInventoryItem } from "@/api/inventory";
-import type { UpdateInventoryItemInput } from "@/types";
-
-export interface EditInventoryItemProps {
-  id: string;
-  name: string;
-  categoryId: number;
-  statusId: number;
-  unitId: number;
-  quantity: number;
-  fetchedInventoryStatus: InventoryStatus[];
-  fetchedInventoryCategory: InventoryItemCategory[];
-  fetchedHarvestUnits: HarvestUnits[];
-}
 
 export function EditInventoryItem({
-  id,
-  name,
-  categoryId,
-  statusId,
-  unitId,
-  quantity,
+  item,
   fetchedInventoryStatus,
   fetchedInventoryCategory,
   fetchedHarvestUnits,
-}: EditInventoryItemProps) {
+}: {
+  item: UpdateInventoryItemInput;
+  fetchedInventoryStatus: InventoryStatus[];
+  fetchedInventoryCategory: InventoryItemCategory[];
+  fetchedHarvestUnits: HarvestUnits[];
+}) {
+  console.table(item);
   const [open, setOpen] = useState(false);
-  const [itemName, setItemName] = useState(name);
+  const [itemName, setItemName] = useState(item.name);
   const [itemCategory, setItemCategory] = useState(
-    fetchedInventoryCategory.find(
-      (categoryItem) => categoryItem.id === categoryId
-    )?.name
+    fetchedInventoryCategory.find((x) => x.id === item.categoryId)?.name
   );
-  const [itemQuantity, setItemQuantity] = useState(quantity);
+
+  const [itemQuantity, setItemQuantity] = useState(item.quantity);
+
   const [itemUnit, setItemUnit] = useState(
-    fetchedHarvestUnits.find((harvestItem) => harvestItem.id === unitId)?.name
+    fetchedHarvestUnits.find((x) => x.id === item.unitId)?.name
   );
+
   const [itemStatus, setItemStatus] = useState(
-    fetchedInventoryStatus.find((statusItem) => statusItem.id === statusId)
-      ?.name
+    fetchedInventoryStatus.find((x) => x.id === item.statusId)?.name
   );
   const [error, setError] = useState<string | null>(null);
 
@@ -75,7 +68,7 @@ export function EditInventoryItem({
 
   const mutation = useMutation({
     mutationFn: (item: UpdateInventoryItemInput) =>
-      updateInventoryItem(id, item),
+      updateInventoryItem(item.id, item),
     onSuccess: () => {
       // invalidate queries to refresh inventory data.
       queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
@@ -108,26 +101,9 @@ export function EditInventoryItem({
       );
       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,
+      categoryId: item.categoryId,
       quantity: itemQuantity,
       unitId:
         fetchedHarvestUnits.find((unit) => unit.name === itemUnit)?.id ?? 0,
@@ -135,6 +111,7 @@ export function EditInventoryItem({
         fetchedInventoryStatus.find((status) => status.name === itemStatus)
           ?.id ?? 0,
       dateAdded: new Date().toISOString(),
+      id: "",
     });
   };
 
diff --git a/frontend/app/(sidebar)/inventory/page.tsx b/frontend/app/(sidebar)/inventory/page.tsx
index 66cddbe..f50adda 100644
--- a/frontend/app/(sidebar)/inventory/page.tsx
+++ b/frontend/app/(sidebar)/inventory/page.tsx
@@ -40,11 +40,9 @@ import {
   fetchInventoryCategory,
 } from "@/api/inventory";
 import { AddInventoryItem } from "./add-inventory-item";
-import {
-  EditInventoryItem,
-  EditInventoryItemProps,
-} from "./edit-inventory-item";
+import { EditInventoryItem } from "./edit-inventory-item";
 import { DeleteInventoryItem } from "./delete-inventory-item";
+import { InventoryItem } from "@/types";
 
 export default function InventoryPage() {
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -105,12 +103,9 @@ export default function InventoryPage() {
     return inventoryItems
       .map((item) => ({
         ...item,
-        status: item.status.name,
-        category: item.category.name,
-        categoryId: item.categoryId,
-        unit: item.unit.name,
-        unitId: item.unitId,
-        statusId: item.statusId,
+        status: { id: item.status.id, name: item.status.name },
+        category: { id: item.category.id, name: item.category.name },
+        unit: { id: item.unit.id, name: item.unit.name },
         fetchedInventoryStatus: inventoryStatus,
         fetchedInventoryCategory: inventoryCategory,
         fetchedHarvestUnits: harvestUnits,
@@ -132,15 +127,31 @@ export default function InventoryPage() {
 
   const columns = [
     { accessorKey: "name", header: "Name" },
-    { accessorKey: "category", header: "Category" },
-    { accessorKey: "quantity", header: "Quantity" },
-    { accessorKey: "unit", header: "Unit" },
-    { accessorKey: "lastUpdated", header: "Last Updated" },
+    {
+      accessorKey: "category",
+      header: "Category",
+      cell: ({ row }: { row: { original: InventoryItem } }) =>
+        row.original.category.name,
+    },
+    {
+      accessorKey: "quantity",
+      header: "Quantity",
+    },
+    {
+      accessorKey: "unit",
+      header: "Unit",
+      cell: ({ row }: { row: { original: InventoryItem } }) =>
+        row.original.unit.name,
+    },
+    {
+      accessorKey: "lastUpdated",
+      header: "Last Updated",
+    },
     {
       accessorKey: "status",
       header: "Status",
-      cell: (info: { getValue: () => string }) => {
-        const status = info.getValue();
+      cell: ({ row }: { row: { original: InventoryItem } }) => {
+        const status = row.original.status.name;
 
         let statusClass = "";
 
@@ -166,11 +177,20 @@ export default function InventoryPage() {
     {
       accessorKey: "edit",
       header: "Edit",
-      cell: ({ row }: { row: { original: EditInventoryItemProps } }) => (
+      cell: ({ row }: { row: { original: InventoryItem } }) => (
         <EditInventoryItem
-          {...row.original}
+          item={{
+            id: row.original.id,
+            name: row.original.name,
+            categoryId: row.original.categoryId,
+            quantity: row.original.quantity,
+            unitId: row.original.unitId,
+            dateAdded: row.original.dateAdded,
+            statusId: row.original.statusId,
+          }}
           fetchedInventoryStatus={inventoryStatus}
           fetchedInventoryCategory={inventoryCategory}
+          fetchedHarvestUnits={harvestUnits}
         />
       ),
       enableSorting: false,
@@ -178,7 +198,7 @@ export default function InventoryPage() {
     {
       accessorKey: "delete",
       header: "Delete",
-      cell: ({ row }: { row: { original: EditInventoryItemProps } }) => (
+      cell: ({ row }: { row: { original: InventoryItem } }) => (
         <DeleteInventoryItem id={row.original.id} />
       ),
       enableSorting: false,
diff --git a/frontend/types.ts b/frontend/types.ts
index c4b42b5..3bf93a8 100644
--- a/frontend/types.ts
+++ b/frontend/types.ts
@@ -160,9 +160,12 @@ export type CreateInventoryItemInput = {
   statusId: number;
 };
 
-export type UpdateInventoryItemInput = CreateInventoryItemInput & {};
+// export type UpdateInventoryItemInput = CreateInventoryItemInput & {};
+// export type EditInventoryItemInput = CreateInventoryItemInput & { id: number };
 
-// export type UpdateInventoryItemInput = Partial<CreateInventoryItemInput> & { id: string };
+export type UpdateInventoryItemInput = Partial<CreateInventoryItemInput> & {
+  id: string;
+};
 
 export interface Blog {
   id: number;