From 8c1faae7262d2fdfbe591e3407a60233680c71de Mon Sep 17 00:00:00 2001
From: TakahashiNg <83152264+TakahashiNguyen@users.noreply.github.com>
Date: Wed, 13 May 2026 02:46:16 +0000
Subject: [PATCH] chore: update

---
 components/organisms/manager/MenuItemsTab.tsx | 102 ++++++++----------
 1 file changed, 46 insertions(+), 56 deletions(-)

diff --git a/components/organisms/manager/MenuItemsTab.tsx b/components/organisms/manager/MenuItemsTab.tsx
index be2f2d4..7ee10e0 100644
--- a/components/organisms/manager/MenuItemsTab.tsx
+++ b/components/organisms/manager/MenuItemsTab.tsx
@@ -9,9 +9,20 @@ import {
 } from "@/lib/types";
 import { gql } from "@apollo/client";
 import { useMutation, useQuery } from "@apollo/client/react";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
-const GET_EATERY_MENU = gql`{ allEateries { id menuItems { id name } } }`;
+const GET_EATERY_MENU = gql`
+  query GetEateryMenu {
+    allEateries {
+      id
+      menuItems {
+        id
+        name
+        price
+      }
+    }
+  }
+`;
 
 const ADD_MENU_ITEM = gql`
   mutation addMenuItem($menuItem: AddMenuItemInput!) {
@@ -30,14 +41,6 @@ function formatPrice(price: number) {
 export default function MenuItemsTab() {
   const { user } = useAuth();
   const [menuItems, setMenuItems] = useState<MenuItemEntity[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const [showForm, setShowForm] = useState(false);
-  const [newName, setNewName] = useState("");
-  const [newPrice, setNewPrice] = useState("");
-  const [submitting, setSubmitting] = useState(false);
-  const [submitError, setSubmitError] = useState<string | null>(null);
 
   const {
     data,
@@ -45,53 +48,49 @@ export default function MenuItemsTab() {
     error: gqlError,
   } = useQuery<allEateriesQuery>(GET_EATERY_MENU, {
     client: eateryClient,
-    fetchPolicy: "no-cache",
+    fetchPolicy: "network-only",
   });
 
+  const [mutateAddMenuItem] = useMutation<addMenuItemMutation>(ADD_MENU_ITEM, {
+    client: eateryClient,
+  });
+
+  const [showForm, setShowForm] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newPrice, setNewPrice] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
   useEffect(() => {
-    setLoading(true);
-    setError(null);
-
-    if (!gqlLoading) {
-      if (data) setMenuItems(data.allEateries[0].menuItems);
-      else
-        setError(
-          gqlError?.message ||
-            "Không thể tải dữ liệu menu. Kiểm tra kết nối backend.",
-        );
+    if (data?.allEateries?.[0]) {
+      setMenuItems(data.allEateries[0].menuItems);
     }
-
-    setLoading(false);
-  }, [data, gqlLoading, gqlError]);
+  }, [data]);
 
   const handleAdd = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!newName.trim() || !newPrice) return;
+
     setSubmitting(true);
     setSubmitError(null);
-    try {
-      const [addMenuItem, { data }] = useMutation<addMenuItemMutation>(
-        GET_EATERY_MENU,
-        {
-          client: eateryClient,
-          fetchPolicy: "no-cache",
-        },
-      );
 
-      await addMenuItem({
+    try {
+      const { data: mutationResult } = await mutateAddMenuItem({
         variables: {
-          name: newName,
-          price: newPrice,
+          menuItem: {
+            name: newName,
+            price: parseFloat(newPrice),
+          },
         },
       });
 
-      if (data) setMenuItems((prev) => [...prev, data.addMenuItem]);
-
-      setNewName("");
-      setNewPrice("");
-      setShowForm(false);
-    } catch {
-      setSubmitError("Không thể thêm món. Vui lòng thử lại.");
+      if (mutationResult?.addMenuItem) {
+        setMenuItems((prev) => [...prev, mutationResult.addMenuItem]);
+        closeForm();
+      }
+    } catch (err: any) {
+      console.error("Mutation Error:", err);
+      setSubmitError(err.message || "Không thể thêm món. Vui lòng thử lại.");
     } finally {
       setSubmitting(false);
     }
@@ -104,23 +103,14 @@ export default function MenuItemsTab() {
     setNewPrice("");
   };
 
-  if (loading) {
+  if (gqlLoading && menuItems.length === 0)
+    return <div className="py-16 text-center">Đang tải menu...</div>;
+  if (gqlError)
     return (
-      <div className="flex items-center justify-center py-16 text-(--color-text-muted)">
-        <i className="fa-solid fa-spinner mr-2 animate-spin"></i>
-        Đang tải menu...
+      <div className="py-16 text-center text-red-500">
+        Lỗi: {gqlError.message}
       </div>
     );
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col items-center justify-center py-16 text-red-500">
-        <i className="fa-solid fa-circle-exclamation mb-2 text-2xl"></i>
-        <p className="text-sm">{error}</p>
-      </div>
-    );
-  }
 
   return (
     <div className="space-y-4">