doc: add useStateValue, db, and classes

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;