fix: change order status mutation

La-Fresca · Aug 10, 2024 · 84acf1c · 84acf1c
1 parent 4f67913
commit 84acf1c
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 25 deletions.
diff --git a/src/api/useOrders.tsx b/src/api/useOrders.tsx
@@ -1,4 +1,4 @@
-import { Order } from '@/types/order';
+import { Order, OrderItemStatus } from '@/types/order';
 import Cookies from 'js-cookie';
 
 const API_URL = (import.meta as any).env.VITE_API_URL;
@@ -117,13 +117,16 @@ export const useOrders = () => {
 
   const getPendingOrdersByDeliveryPersonId = async (id: string) => {
     try {
-      const response = await fetch(`${API_URL}/order/pendingordersbydeliverypersonid/${id}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${getToken()}`,
+      const response = await fetch(
+        `${API_URL}/order/pendingordersbydeliverypersonid/${id}`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${getToken()}`,
+          },
         },
-      });
+      );
       if (!response.ok) {
         throw new Error('Failed to fetch orders');
       } else {
@@ -133,27 +136,58 @@ export const useOrders = () => {
       console.error(error);
       throw new Error(error);
     }
-  }
+  };
 
   const getCompletedOrdersByDeliveryPersonId = async (id: string) => {
     try {
-      const response = await fetch(`${API_URL}/order/completedordersbydeliverypersonid/${id}`, {
-        method: 'GET',
+      const response = await fetch(
+        `${API_URL}/order/completedordersbydeliverypersonid/${id}`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${getToken()}`,
+          },
+        },
+      );
+      if (!response.ok) {
+        throw new Error('Failed to fetch orders');
+      } else {
+        return response.json();
+      }
+    } catch (error: any) {
+      console.error(error);
+      throw new Error(error);
+    }
+  };
+
+  const updateOrderItemStatus = async (data: OrderItemStatus) => {
+    try {
+      const response = await fetch(`${API_URL}/order/updateOrderItemStatus`, {
+        method: 'PUT',
         headers: {
           'Content-Type': 'application/json',
           Authorization: `Bearer ${getToken()}`,
         },
+        body: JSON.stringify(data),
       });
       if (!response.ok) {
-        throw new Error('Failed to fetch orders');
-      } else {
-        return response.json();
+        throw new Error('Failed to update order item status');
       }
     } catch (error: any) {
       console.error(error);
       throw new Error(error);
     }
-  }
+  };
 
-  return { getAllOrders, createOrder, getOrderById, updateOrder, deleteOrder, getPendingOrdersByDeliveryPersonId, getCompletedOrdersByDeliveryPersonId };
+  return {
+    getAllOrders,
+    createOrder,
+    getOrderById,
+    updateOrder,
+    deleteOrder,
+    getPendingOrdersByDeliveryPersonId,
+    getCompletedOrdersByDeliveryPersonId,
+    updateOrderItemStatus,
+  };
 };
diff --git a/src/pages/KitchenManager/Dashboard/index.tsx b/src/pages/KitchenManager/Dashboard/index.tsx
@@ -1,17 +1,28 @@
 import React from 'react';
 import { Button } from '@nextui-org/react';
-import { useQuery } from '@tanstack/react-query';
-import { Order } from '@/types/order';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Order, OrderItemStatus } from '@/types/order';
 import { useOrders } from '@/api/useOrders';
 import timeAgo from '@/util/TimesAgo';
 
 const Dashboard: React.FC = () => {
-  const { getAllOrders } = useOrders();
+  const { getAllOrders, updateOrderItemStatus } = useOrders();
+  const queryClient = useQueryClient();
+
   const orderQuery = useQuery({
     queryKey: ['orders'],
     queryFn: getAllOrders,
   });
 
+  const updateOrderItemStatusMutation = useMutation({
+    mutationFn: async (orderItem: OrderItemStatus) => {
+      await updateOrderItemStatus(orderItem);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['orders'] });
+    },
+  });
+
   if (orderQuery.isLoading) {
     return <div>Loading...</div>;
   }
@@ -101,7 +112,16 @@ const Dashboard: React.FC = () => {
                       <p className="text-xs">x{item.quantity}</p>
                     </div>
                     <div className="grid w-[100px]">
-                      <Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg text-xl scale-50 py-5 px-10 mb-[-10px] w-[130px] h-[50px]">
+                      <Button
+                        className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg text-xl scale-50 py-5 px-10 mb-[-10px] w-[130px] h-[50px]"
+                        onClick={() => {
+                          updateOrderItemStatusMutation.mutate({
+                            orderId: order.id,
+                            itemId: item.foodId,
+                            status: 'PREPARING',
+                          });
+                        }}
+                      >
                         Next
                       </Button>
                     </div>
@@ -159,10 +179,28 @@ const Dashboard: React.FC = () => {
                       <p className="text-xs">x{item.quantity}</p>
                     </div>
                     <div className="grid w-[100px]">
-                      <Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg text-xl scale-50 py-5 px-10 mb-[-10px] w-[130px] h-[50px]">
+                      <Button
+                        className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg text-xl scale-50 py-5 px-10 mb-[-10px] w-[130px] h-[50px]"
+                        onClick={() => {
+                          updateOrderItemStatusMutation.mutate({
+                            orderId: order.id,
+                            itemId: item.foodId,
+                            status: 'READY',
+                          });
+                        }}
+                      >
                         Next
                       </Button>
-                      <Button className="bg-gradient-to-r from-gray-600 to-gray-400 text-white shadow-lg rounded-lg text-xl scale-50 py-5 px-10 mb-[-10px] w-[130px] h-[50px]">
+                      <Button
+                        className="bg-gradient-to-r from-gray-600 to-gray-400 text-white shadow-lg rounded-lg text-xl scale-50 py-5 px-10 mb-[-10px] w-[130px] h-[50px]"
+                        onClick={() => {
+                          updateOrderItemStatusMutation.mutate({
+                            orderId: order.id,
+                            itemId: item.foodId,
+                            status: 'PENDING',
+                          });
+                        }}
+                      >
                         Back
                       </Button>
                     </div>
@@ -220,10 +258,16 @@ const Dashboard: React.FC = () => {
                       <p className="text-xs">x{item.quantity}</p>
                     </div>
                     <div className="grid w-[100px]">
-                      <Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg text-xl scale-50 py-5 px-10 mb-[-10px] w-[130px] h-[50px]">
-                        Next
-                      </Button>
-                      <Button className="bg-gradient-to-r from-gray-600 to-gray-400 text-white shadow-lg rounded-lg text-xl scale-50 py-5 px-10 mb-[-10px] w-[130px] h-[50px]">
+                      <Button
+                        className="bg-gradient-to-r from-gray-600 to-gray-400 text-white shadow-lg rounded-lg text-xl scale-50 py-5 px-10 mb-[-10px] w-[130px] h-[50px]"
+                        onClick={() => {
+                          updateOrderItemStatusMutation.mutate({
+                            orderId: order.id,
+                            itemId: item.foodId,
+                            status: 'PREPARING',
+                          });
+                        }}
+                      >
                         Back
                       </Button>
                     </div>

diff --git a/src/types/order.ts b/src/types/order.ts
@@ -33,3 +33,9 @@ export type AddedFeature = {
   level: string;
   additionalPrice: number;
 };
+
+export type OrderItemStatus = {
+  orderId: string;
+  itemId: string;
+  status: string;
+};