Integrate User Orders API with the Frontend (Display placed Orders to…

… the UI)
elyse502 · Nov 8, 2024 · d3dd41f · d3dd41f
1 parent 7ea139a
commit d3dd41f
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 12 deletions.
diff --git a/backend/controllers/orderController.js b/backend/controllers/orderController.js
@@ -35,7 +35,17 @@ const placeOrderStripe = async (req, res) => {};
 const allOrders = async (req, res) => {};
 
 // User Order Data for Frontend
-const userOrders = async (req, res) => {};
+const userOrders = async (req, res) => {
+  try {
+    const { userId } = req.body;
+
+    const orders = await orderModel.find({ userId });
+    res.json({ success: true, orders });
+  } catch (error) {
+    console.log(error);
+    res.json({ success: false, message: error.message });
+  }
+};
 
 // update order status from Admin Panel
 const updateStatus = async (req, res) => {};

diff --git a/frontend/src/pages/Orders.jsx b/frontend/src/pages/Orders.jsx
@@ -1,9 +1,43 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { ShopContext } from "../context/ShopContext";
 import Title from "../components/Title";
+import axios from "axios";
 
 const Orders = () => {
-  const { products, currency } = useContext(ShopContext);
+  const { backendUrl, token, currency } = useContext(ShopContext);
+
+  const [orderData, setorderData] = useState([]);
+
+  const loadorderData = async () => {
+    try {
+      if (!token) {
+        return null;
+      }
+
+      const response = await axios.post(
+        backendUrl + "/api/order/userorders",
+        {},
+        { headers: { token } }
+      );
+      if (response.data.success) {
+        let allOrdersItem = [];
+        response.data.orders.map((order) => {
+          order.items.map((item) => {
+            item["status"] = order.status;
+            item["payment"] = order.payment;
+            item["paymentMethod"] = order.paymentMethod;
+            item["date"] = order.date;
+            allOrdersItem.push(item);
+          });
+        });
+        setorderData(allOrdersItem.reverse());
+      }
+    } catch (error) {}
+  };
+
+  useEffect(() => {
+    loadorderData();
+  }, [token]);
 
   return (
     <div className="border-t pt-16">
@@ -12,7 +46,7 @@ const Orders = () => {
       </div>
 
       <div>
-        {products.slice(1, 4).map((item, index) => (
+        {orderData.map((item, index) => (
           <div
             key={index}
             className="py-4 border-t border-b text-gray-700 flex flex-col md:flex-row md:items-center md:justify-between gap-4"
@@ -21,25 +55,35 @@ const Orders = () => {
               <img className="w-16 sm:w-20" src={item.image[0]} alt="" />
               <div>
                 <p className="sm:text-base font-medium">{item.name}</p>
-                <div className="flex items-center gap-3 mt-2 text-base text-gray-700">
-                  <p className="text-lg">
+                <div className="flex items-center gap-3 mt-1 text-base text-gray-700">
+                  <p>
                     {currency}
                     {item.price}
                   </p>
-                  <p>Quantity: 1</p>
-                  <p>Size: M</p>
+                  <p>Quantity: {item.quantity}</p>
+                  <p>Size: {item.size}</p>
                 </div>
-                <p className="mt-2">
-                  Date: <span className="text-gray-400">25, July, 2024</span>
+                <p className="mt-1">
+                  Date:{" "}
+                  <span className="text-gray-400">
+                    {new Date(item.date).toDateString()}
+                  </span>
+                </p>
+                <p className="mt-1">
+                  Payment:{" "}
+                  <span className="text-gray-400">{item.paymentMethod}</span>
                 </p>
               </div>
             </div>
             <div className="md:w-1/2 flex justify-between">
               <div className="flex items-center gap-2">
                 <p className="min-w-2 h-2 rounded-full bg-green-500"></p>
-                <p className="text-sm md:text-base">Ready to ship</p>
+                <p className="text-sm md:text-base">{item.status}</p>
               </div>
-              <button className="border px-4 py-2 text-sm font-medium rounded-sm">
+              <button
+                onClick={loadorderData}
+                className="border px-4 py-2 text-sm font-medium rounded-sm"
+              >
                 Tack Order
               </button>
             </div>