From 76cb31409623de4b4d3a8d09b7239eaf29d0d409 Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Sat, 7 May 2022 15:43:48 -0700
Subject: [PATCH] doc: add useStateValue, db, and classes

---
 src/Checkout/Orders/Orders.js | 39 +++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/Checkout/Orders/Orders.js b/src/Checkout/Orders/Orders.js
index 1ac528a..f0a84fd 100644
--- a/src/Checkout/Orders/Orders.js
+++ b/src/Checkout/Orders/Orders.js
@@ -1,8 +1,43 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+
+import { db } from "../../Auth/firebaseInit";
+import { useStateValue } from "../../redux/StateProvider";
+import Order from "./Order";
+
 import "./Orders.css";
 
 function Orders() {
-  return <section className="orders">Orders</section>;
+  const [{ basket, user }, dispatch] = useStateValue();
+  const [orders, setOrders] = useState([]);
+
+  useEffect(() => {
+    if (user) {
+      db.collection("users")
+        .doc(user?.uid)
+        .collection("orders")
+        .orderBy("created", "desc")
+        .onSnapshot((snapshot) =>
+          setOrders(
+            snapshot.docs.map((doc) => ({
+              id: doc.id,
+              data: doc.data(),
+            }))
+          )
+        );
+    } else {
+      setOrders([]);
+    }
+  }, [user]);
+  return (
+    <section className="orders">
+      <h1>Your Orders</h1>
+      <article className="orders__order">
+        {orders?.map((order) => (
+          <Order order={order} />
+        ))}
+      </article>
+    </section>
+  );
 }
 
 export default Orders;