update admin order page order status

sksabbirhossain · Sep 16, 2023 · 56bd2ef · 56bd2ef
1 parent 8df6028
commit 56bd2ef
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git a/src/features/order/orderApi.js b/src/features/order/orderApi.js
@@ -7,7 +7,29 @@ export const orderApi = apiSlice.injectEndpoints({
         url: "/order/all",
       }),
     }),
+    updateOrderStatus: builder.mutation({
+      query: ({ orderId, data }) => ({
+        url: `/order/update-status/${orderId}`,
+        method: "PATCH",
+        body: data,
+      }),
+      async onQueryStarted(arg, { queryFulfilled, dispatch }) {
+        const result = dispatch(
+          orderApi.util.updateQueryData("getAllOrder", undefined, (draft) => {
+            const orderIndex = draft?.findIndex(
+              (order) => order._id === arg.orderId
+            );
+            draft[orderIndex].oderStatus = arg.data.status;
+          })
+        );
+        try {
+          await queryFulfilled;
+        } catch (err) {
+          result.undo();
+        }
+      },
+    }),
   }),
 });
 
-export const { useGetAllOrderQuery } = orderApi;
+export const { useGetAllOrderQuery, useUpdateOrderStatusMutation } = orderApi;
diff --git a/src/pages/Order/OrderTable.js b/src/pages/Order/OrderTable.js
@@ -1,8 +1,19 @@
-import React, { useState } from "react";
-import { FaPencilAlt, FaTrashAlt } from "react-icons/fa";
+import React from "react";
 import { Link } from "react-router-dom";
+import { useUpdateOrderStatusMutation } from "../../features/order/orderApi";
 
 export const OrderTable = ({ orders }) => {
+  const [updateOrderStatus] = useUpdateOrderStatusMutation();
+
+  //update order status
+  const updateOrderHandler = (id, status) => {
+    updateOrderStatus({
+      orderId: id,
+      data: {
+        status: status,
+      },
+    });
+  };
   return (
     <>
       <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
@@ -35,7 +46,7 @@ export const OrderTable = ({ orders }) => {
                 {/* Order row */}
                 <tr className="bg-gray-200">
                   <th className="px-6 py-3 ">
-                    <span className="capitalize"> transaction Id : </span>
+                    <span className="capitalize"> transaction Id :</span>
                     {order.transactionId}
                   </th>
                   <td className="px-6 py-3 capitalize"></td>
@@ -44,10 +55,18 @@ export const OrderTable = ({ orders }) => {
                   </td>
                   <td className="px-6 py-3 capitalize">{order.stock}</td>
                   <td className="px-6 py-3 cursor-pointer">
-                    <select name="orderStatus" id="">
-                      <option value=""> {order.oderStatus}</option>
-                      <option value=""></option>
-                      <option value=""></option>
+                    <select
+                      disabled={order.oderStatus === "completed"}
+                      name="orderStatus"
+                      defaultValue={order.oderStatus}
+                      onChange={(e) => {
+                        updateOrderHandler(order._id, e.target.value);
+                      }}
+                    >
+                      {/* <option value="">{order.oderStatus}</option> */}
+                      <option value="processing">processing</option>
+                      <option value="delivered">delivered</option>
+                      <option value="completed">completed</option>
                     </select>
                   </td>
                   <td className="px-6 py-3 sm:space-x-2 space-x-1">