organised orders to display those meant for a single user

Obiski15 · Feb 5, 2024 · 809541b · 809541b
1 parent b32ea1f
commit 809541b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/src/Features/Order/CheckoutSummary.jsx b/src/Features/Order/CheckoutSummary.jsx
@@ -8,6 +8,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { clearCart, getTotalPrice } from "../../Store/cartSlice";
 import { formatCurrency, formatDate } from "../../Utility/helpers";
 import { placeOrder } from "../../Services/orderApi";
+import { useUser } from "../Authentication/useUser";
 
 import Button from "../../Components/Button";
 import CheckoutSummaryRow from "./CheckoutSummaryRow";
@@ -18,17 +19,17 @@ import Heading from "../../Components/Heading";
 const date = new Date();
 
 function CheckoutSummary({ formValues, reset }) {
-  const { fullname, address, phone, state, city, email } = formValues;
+  const cart = useSelector((state) => state.cart.cart);
   const [coupon, setCoupon] = useState("");
-  const navigate = useNavigate();
-  const dispatch = useDispatch();
   const totalPrice = useSelector(getTotalPrice);
-  const deliveryDate = new Date().setDate(date.getDate() + 3);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { user } = useUser();
 
+  const { fullname, address, phone, state, city, email } = formValues;
+  const deliveryDate = new Date().setDate(date.getDate() + 3);
   const finalPrice = coupon ? totalPrice - coupon : totalPrice;
 
-  const cart = useSelector((state) => state.cart.cart);
-
   const { mutate, isPending, error } = useMutation({
     mutationKey: ["placeOrder"],
     mutationFn: async (orderDetails) => {
@@ -49,6 +50,7 @@ function CheckoutSummary({ formValues, reset }) {
   function handleOrder() {
     const orderDetails = {
       id: uid(),
+      user_id: user.id,
       cart: JSON.stringify(cart),
       address: `${address}, ${city}, ${state}`,
       phone,
@@ -103,7 +105,7 @@ function CheckoutSummary({ formValues, reset }) {
         </>
       ) : (
         <div className="mt-3">
-          <Heading font="semibold" moreStyles="italic">
+          <Heading font="semibold" type="h5" moreStyles="italic">
             Fill out the form to place your order
           </Heading>
         </div>

diff --git a/src/Features/Order/MyOrderRow.jsx b/src/Features/Order/MyOrderRow.jsx
@@ -1,12 +1,14 @@
 import { useState } from "react";
 
-import MyOrderDetails from "./MyOrderDetails";
-
 import { IoIosArrowDown, IoIosArrowForward } from "react-icons/io";
 import { SMALL_ICON_SIZE } from "../../Utility/constants";
+import { useUser } from "../Authentication/useUser";
+
+import MyOrderDetails from "./MyOrderDetails";
 
 function MyOrderRow({ orders }) {
   const [clickedId, setClickedId] = useState(false);
+  const { user } = useUser();
 
   function handleHideDetails() {
     setClickedId("");
@@ -16,12 +18,16 @@ function MyOrderRow({ orders }) {
     setClickedId(id);
   }
 
-  const sorted = orders.sort(
-    (a, b) =>
-      new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
-  );
+  const sorted = orders
+    .sort(
+      (a, b) =>
+        new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+    )
+    .filter((order) => order.user_id === user.id);
 
-  return (
+  return !sorted.length ? (
+    <p className="text-sm font-semibold">you do not have any order yet ):</p>
+  ) : (
     <div>
       {sorted.map((order) => (
         <div key={order.id}>
@@ -40,7 +46,7 @@ function MyOrderRow({ orders }) {
               />
             )}
             <div
-              className="no-scrollbar grid grow items-center justify-between gap-3 overflow-scroll px-2 text-left capitalize max-[768px]:grid-cols-2 max-[450px]:grid-cols-1 min-[768px]:grid-cols-4"
+              className="no-scrollbar grid grow items-center justify-between gap-3 overflow-scroll px-2 text-left capitalize max-[768px]:grid-cols-2 max-[450px]:grid-cols-1 min-[768px]:grid-cols-3"
               key={order.id}
             >
               <div className="justify-left flex items-center gap-2 whitespace-nowrap">
@@ -67,11 +73,6 @@ function MyOrderRow({ orders }) {
                 <p>delivery date:</p>
                 <p>{order.deliveryDate}</p>
               </div>
-
-              <div className="justify-left flex items-center gap-2 whitespace-nowrap font-semibold">
-                <p>Order Placed By:</p>
-                <p className="text-yellow-700 ">{order.fullname}</p>
-              </div>
             </div>
           </div>
           {clickedId === order.id && <MyOrderDetails order={order} />}