update order

src/features/product/ui/Product.tsx

@@ -27,7 +27,7 @@ import { toast } from 'sonner';
 
 const ProductDetail = () => {
   const t = useTranslations();
-  const [quantity, setQuantity] = useState(1);
+  const [quantity, setQuantity] = useState<number>(1);
   const { product } = useParams();
   const queryClient = useQueryClient();
   const [selectedImage, setSelectedImage] = useState<number>(0);
@@ -60,31 +60,50 @@ const ProductDetail = () => {
   });
 
   useEffect(() => {
-    if (!cart_id) return;
-    if (quantity <= 1) return;
+    if (!data || !cartItems) return;
 
-    const cartItemId = cartItems?.data?.cart_item.find(
-      (item) => item.product_id === data?.id,
-    )?.id;
+    const item = cartItems?.data.cart_item.find(
+      (item) => Number(item.product_id) === data?.id,
+    );
 
-    if (!cartItemId) return;
+    if (item) {
+      setQuantity(item.quantity);
+    } else {
+      setQuantity(1);
+    }
+  }, [data, cartItems]);
+
+  useEffect(() => {
+    if (!cart_id || !data || !cartItems) return;
+    if (quantity <= 0) return;
+
+    const cartItem = cartItems?.data?.cart_item.find(
+      (item) => Number(item.product_id) === data?.id,
+    );
+
+    if (!cartItem) return;
+    if (cartItem.quantity === quantity) return;
 
     if (debounceRef.current) clearTimeout(debounceRef.current);
 
     debounceRef.current = setTimeout(() => {
-      updateCartItem({ body: { quantity }, cart_item_id: cartItemId });
+      updateCartItem({ body: { quantity }, cart_item_id: cartItem.id });
     }, 500);
 
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
-  }, [quantity, cart_id]);
+  }, [quantity, cart_id, data, cartItems]);
 
   const { mutate } = useMutation({
     mutationFn: (body: { product: string; quantity: number; cart: string }) =>
       cart_api.cart_item(body),
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
+      toast.success(t("Mahsulot savatga qo'shildi"), {
+        richColors: true,
+        position: 'top-center',
+      });
     },
     onError: (err: AxiosError) => {
       const detail = (err.response?.data as { detail: string }).detail;
@@ -113,7 +132,6 @@ const ProductDetail = () => {
 
   const favouriteMutation = useMutation({
     mutationFn: (productId: string) => product_api.favourite(productId),
-
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ['product_list'] });
       queryClient.refetchQueries({ queryKey: ['product_detail', product] });
@@ -128,6 +146,27 @@ const ProductDetail = () => {
     }
   };
 
+  const handleAddToCart = () => {
+    if (!data || !cart_id) return;
+
+    const cartItem = cartItems?.data.cart_item.find(
+      (e) => Number(e.product_id) === data.id,
+    );
+
+    if (cartItem) {
+      updateCartItem({
+        body: { quantity: quantity },
+        cart_item_id: cartItem.id,
+      });
+    } else {
+      mutate({
+        product: String(data.id),
+        cart: cart_id,
+        quantity: quantity,
+      });
+    }
+  };
+
   if (isLoading) {
     return (
       <div className="custom-container pb-5">
@@ -166,18 +205,6 @@ const ProductDetail = () => {
                     className="w-full h-[400px] object-contain"
                   />
                 )}
-                {/* {products.discount > 0 && (
-                  <div className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
-                    -{products.discount}%
-                  </div>
-                )} */}
-                {/* {!products.inStock && (
-                  <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
-                    <span className="text-white text-xl font-bold">
-                      Mavjud emas
-                    </span>
-                  </div>
-                )} */}
               </div>
 
               <Carousel
@@ -245,52 +272,18 @@ const ProductDetail = () => {
                 {data?.name}
               </h1>
 
-              {/* Rating */}
-              {/* <div className="flex items-center gap-2 mb-4">
-                <div className="flex items-center">
-                  {[...Array(5)].map((_, i) => (
-                    <Star
-                      key={i}
-                      className={`w-5 h-5 ${
-                        i < Math.floor(products.rating)
-                          ? 'fill-yellow-400 text-yellow-400'
-                          : 'text-gray-300'
-                      }`}
-                    />
-                  ))}
-                </div>
-                <span className="text-gray-600">{products.rating}</span>
-              </div> */}
-
               {/* Price */}
               <div className="mb-6">
                 <div className="flex items-center gap-3 max-lg:flex-col max-lg:items-start">
                   <span className="text-4xl font-bold text-blue-600">
                     {data && formatPrice(data.price, true)}
                   </span>
-                  {/* {products.oldPrice && (
-                    <span className="text-xl text-gray-400 line-through">
-                      {products.oldPrice.toLocaleString()} {"so'm"}
-                    </span>
-                  )} */}
                 </div>
               </div>
 
               {/* Description */}
               <p className="text-gray-600 mb-6">{data?.description}</p>
 
-              {/* Brand and Category */}
-              {/* <div className="grid grid-cols-2 gap-4 mb-6 max-md:grid-cols-1">
-                <div>
-                  <span className="text-gray-500">Brand:</span>
-                  <p className="font-semibold">{products.brand}</p>
-                </div>
-                <div>
-                  <span className="text-gray-500">Kategoriya:</span>
-                  <p className="font-semibold">{products.category}</p>
-                </div>
-              </div> */}
-
               {/* Quantity Selector */}
               <div className="mb-6">
                 <label className="text-gray-700 font-medium mb-2 block">
@@ -309,12 +302,11 @@ const ProductDetail = () => {
                       value={quantity}
                       onChange={(e) => {
                         const v = e.target.value;
-
                         if (!/^\d*$/.test(v)) return;
-
                         const num = Number(v);
-
-                        setQuantity(num);
+                        if (num > 0) {
+                          setQuantity(num);
+                        }
                       }}
                       inputMode="numeric"
                       className="w-14 h-12 border-none text-center text-sm !p-0 focus-visible:ring-0"
@@ -338,29 +330,8 @@ const ProductDetail = () => {
               {/* Action Buttons */}
               <div className="flex gap-4 mb-6">
                 <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    const cart = cartItems?.data.cart_item.find(
-                      (e) => e.product_id === data?.id,
-                    );
-                    console.log(cart);
-
-                    if (cart && data) {
-                      updateCartItem({
-                        body: {
-                          quantity: quantity,
-                        },
-                        cart_item_id: cart.id,
-                      });
-                    } else if (!cart && data) {
-                      mutate({
-                        product: data.id,
-                        cart: cart_id!,
-                        quantity: quantity,
-                      });
-                    }
-                  }}
-                  className={`flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition ${'bg-green-600 hover:bg-green-700'}`}
+                  onClick={handleAddToCart}
+                  className="flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition bg-green-600 hover:bg-green-700"
                 >
                   <ShoppingCart className="w-5 h-5" />
                   {t('Savatga')}
@@ -400,12 +371,6 @@ const ProductDetail = () => {
                   <Shield className="w-8 h-8 text-blue-600 mb-2" />
                   <span className="text-sm text-gray-600">{t('Kafolat')}</span>
                 </div>
-                {/* <div className="flex flex-col items-center text-center">
-                  <RotateCcw className="w-8 h-8 text-blue-600 mb-2" />
-                  <span className="text-sm text-gray-600">
-                    14 kun qaytarish
-                  </span>
-                </div> */}
               </div>
             </div>
           </div>