feat: backend order history

La-Fresca · Dec 1, 2024 · 0a8088f · 0a8088f
1 parent 97dbbb8
commit 0a8088f
Show file tree

Hide file tree

Showing 5 changed files with 367 additions and 349 deletions.
diff --git a/src/api/useOrder.tsx b/src/api/useOrder.tsx
@@ -19,6 +19,12 @@ function getCafeId() {
   return cafeId;
 }
 
+function getUserId() {
+  const accessToken = getToken();
+  const userId = jwtDecode(accessToken).userId;
+  return userId;
+}
+
 export const useOrders = () => {
   const getAllOrders = async () => {
     try {
@@ -190,6 +196,29 @@ export const useOrders = () => {
     }
   };
 
+  const getOrdersByUserId = async () => {
+    try {
+      const response = await fetch(
+        `${API_URL}/order/specificorderbycustomerid/${getUserId()}`,
+        {
+          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);
+    }
+  };
+
   return {
     getAllOrders,
     createOrder,
@@ -199,5 +228,6 @@ export const useOrders = () => {
     getPendingOrdersByDeliveryPersonId,
     getCompletedOrdersByDeliveryPersonId,
     updateOrderItemStatus,
+    getOrdersByUserId,
   };
 };
diff --git a/src/components/User/OrderHistory/OrderCard.tsx b/src/components/User/OrderHistory/OrderCard.tsx
@@ -1,58 +1,85 @@
 import React from 'react';
-import { TbTruckDelivery } from "react-icons/tb";
+import { TbTruckDelivery } from 'react-icons/tb';
 import CustomizedSteppers from './Stepping';
-import { Chip } from "@nextui-org/react";
+import { Chip } from '@nextui-org/react';
 import { useNavigate } from 'react-router-dom';
 import { useMediaQuery } from '@mui/material';
 
-export const OrderCard = ({ order }:{order:any}) => {
-    const navigate = useNavigate();
-    const isSmallScreen = useMediaQuery('(max-width: 1024px)'); // Adjust breakpoint as needed
-
-    var col: "default" | "success" | "warning" | "primary" | "secondary" | "danger" | undefined = "default";
-    if(order.order.orderStatus === 'Delivered'){
-        col = "success";
-    } else if(order.order.orderStatus === 'Cooking'){
-        col = "default";
-    } else if(order.order.orderStatus === 'Delivering'){
-        col = "warning";
-    } else if(order.order.orderStatus === 'Order Confirmed'){
-        col = "default";
+export const OrderCard = ({ order }: { order: any }) => {
+  const navigate = useNavigate();
+  const isSmallScreen = useMediaQuery('(max-width: 1024px)');
+
+  var col:
+    | 'default'
+    | 'success'
+    | 'warning'
+    | 'primary'
+    | 'secondary'
+    | 'danger'
+    | undefined = 'default';
+  switch (order.order.orderStatus) {
+    case 'COMPLETED':
+      col = 'success';
+      break;
+    case 'PREPARING':
+      col = 'warning';
+      break;
+    case 'DELIVERING':
+      col = 'primary';
+      break;
+    case 'PENDING':
+    default:
+      col = 'default';
+  }
+
+  const handleClick = () => {
+    if (isSmallScreen) {
+      navigate(`/orderhistory/${order.order.orderId}`, { state: { order } });
     }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString();
+  };
+
+  const formatOrderId = (id: string) => id.substring(0, 6);
+
+  return (
+    <div className="">
+      <div
+        onClick={handleClick}
+        className="w-[100%] flex flex-col lg:flex-col flex-grow items-left align-middle justify-between my-2 px-4 py-4 rounded-2xl border border-foodbg bg-foodbg backdrop-blur-md cursor-pointer hover:shadow-lg hover:shadow-[1px_1px_5px_#000000] dark:hover:shadow-[1px_1px_5px_#F59E0B] dark:bg-[#1E1E1E] dark:border-[#1E1E1E]"
+        style={{
+          backgroundColor: 'rgba(255, 255, 255, 0.01)',
+        }}
+      >
+        <div className="flex flex-row justify-between">
+          <h1 className="text-2xl text-black dark:text-white">
+            Order: {formatOrderId(order.order.orderId)}
+          </h1>
+          <Chip color={col} variant="flat">
+            {order.order.orderStatus}
+          </Chip>
+        </div>
+
+        <div className="flex justify-left gap-2 flex-row mb-5">
+          <p className="text-black dark:text-white">
+            Order Date: {formatDate(order.order.orderDate)}
+          </p>
+          <p className="text-black dark:text-white">|</p>
+          <TbTruckDelivery className="text-black dark:text-white text-2xl" />
+          <p className="text-black dark:text-white">
+            Total: LKR {order.order.orderSummary.total.toFixed(2)}
+          </p>
+        </div>
 
-    const handleClick = () => {
-        if (isSmallScreen) {
-            // Navigate to the details page if on a small screen
-            navigate(`/orderhistory/${order.order.orderId}`, { state: { order } });
-        }
-    };
-
-    return (
-        <div className="">
-            <div
-                onClick={handleClick}
-                className="w-[100%] flex flex-col lg:flex-col flex-grow items-left align-middle justify-between my-2 px-4 py-4 rounded-2xl border border-foodbg bg-foodbg backdrop-blur-md cursor-pointer hover:shadow-lg hover:shadow-[1px_1px_5px_#000000] dark:hover:shadow-[1px_1px_5px_#F59E0B] dark:bg-[#1E1E1E] dark:border-[#1E1E1E]"
-                style={{
-                    backgroundColor: 'rgba(255, 255, 255, 0.01)',
-                }}
-            >
-                <div className='flex flex-row justify-between'>
-                    <h1 className='text-2xl text-black dark:text-white'>Order No: #{order.order.orderId}</h1>
-                    <Chip color={col} variant="flat">{order.order.orderStatus}</Chip>
-                </div>
-
-                <div className='flex justify-left gap-2 flex-row mb-5'>
-                    <p className='text-black dark:text-white'>Order Date: {order.order.orderDate}</p>
-                    <p className='text-black dark:text-white'>|</p>
-                    <TbTruckDelivery className='text-black dark:text-white text-2xl' />
-                    <p className='text-black dark:text-white'>Estimated delivery: {order.order.deliveryDate}</p>
-                </div>
-
-                {/* Show stepper only on larger screens */}
-                <div className='hidden lg:block'>
-                    <CustomizedSteppers stage={order.stageIndex} completionTimesArray={order.completionTimesArray} />
-                </div>
-            </div>
+        <div className="hidden lg:block">
+          <CustomizedSteppers
+            stage={order.stageIndex}
+            completionTimesArray={order.completionTimesArray}
+          />
         </div>
-    );
+      </div>
+    </div>
+  );
 };