Added Dashboard Page

car-ui-react/package.json

@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^6.4.0",
+    "react-scripts": "^5.0.1",
+    "react-toastify": "^9.0.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

car-ui-react/src/hooks/useTitle.js

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+
+export const useTitle = (title) => {
+
+    useEffect(() => {
+        document.title = `${title} - NashTechAutoMarket`;
+    }, [title]);
+
+  return null;
+}

car-ui-react/src/pages/Dashboard/DashboardPage.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import { toast } from "react-toastify";
+import { useTitle } from "../../hooks/useTitle";
+import { getUserOrders } from "../../services/dataService";
+import { DashboardCard } from "./components/DashboardCard";
+import { DashboardEmpty } from "./components/DashboardEmpty";
+
+export const DashboardPage = () => {
+    const [orders, setOrders] = useState([]);
+    useTitle("Dashboard");
+
+    useEffect(() => {
+        async function fetchOrders(){
+          try{
+            const data = await getUserOrders();
+            setOrders(data);
+          } catch(error){
+            toast.error(error.message, { closeButton: true, position: "bottom-center" });
+          }      
+        }
+        fetchOrders();
+      }, []);
+
+      return (
+        <main>
+          <section>
+            <p className="text-2xl text-center font-semibold dark:text-slate-100 my-10 underline underline-offset-8">My Dashboard</p>
+          </section>
+
+          <section>
+            { orders.length && orders.map((order) => (
+              <DashboardCard key={order.id} order={order} />
+            )) }
+          </section>
+
+          <section>
+            { !orders.length && <DashboardEmpty /> }
+          </section>
+
+        </main>
+      )
+}

car-ui-react/src/pages/Dashboard/components/DashboardCard.js

@@ -0,0 +1,29 @@
+import { Link } from "react-router-dom"
+
+export const DashboardCard = ({order}) => {
+  return (
+    <div className="max-w-4xl m-auto p-2 mb-5 border dark:border-slate-700">
+        <div className="flex justify-between text-sm m-2 font-bold dark:text-slate-200">
+            <span>Order Id: {order.id}</span>
+            <span>Total: ${order.amount_paid}</span>
+        </div>
+        { order.cartList.map((product) => (
+            <div key={product.id} className="flex flex-wrap justify-between max-w-4xl m-auto p-2 my-5 ">
+                <div className="flex">
+                    <Link to={`/products/${product.id}`}>
+                        <img className="w-32 rounded" src={product.poster} alt={product.name} />
+                    </Link>
+                    <div className="">
+                        <Link to={`/products/${product.id}`}>
+                            <p className="text-lg ml-2 dark:text-slate-200">{product.name}</p>
+                        </Link>
+                        <div className="text-lg m-2 dark:text-slate-200">
+                            <span>${product.price}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )) }
+    </div>
+  )
+}

car-ui-react/src/pages/Dashboard/components/DashboardEmpty.js

@@ -0,0 +1,12 @@
+export const DashboardEmpty = () => {
+    return (
+      <section className="text-xl text-center max-w-4xl mx-auto my-10 py-5 dark:text-slate-100 border dark:border-slate-700 rounded">
+          <div className="my-5">
+              <p className="bi bi-cart text-green-600 text-7xl mb-5"></p>
+              <p>Oops! Your order dashboard looks empty!</p>
+              <p>Add eBooks to your cart from our store collection.</p>
+          </div>
+          <a href="/" type="button" className="text-white bg-blue-700 hover:bg-blue-800 rounded-lg text-lg px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none">Continue Shopping <i className="ml-2 bi bi-cart"></i></a>
+      </section>  
+    )
+  }

car-ui-react/src/pages/index.js

@@ -0,0 +1 @@
+export { DashboardPage } from "./Dashboard/DashboardPage";

car-ui-react/src/services/dataService.js

@@ -0,0 +1,33 @@
+function getSession(){
+    const token = JSON.parse(sessionStorage.getItem("token"));
+    const cbid = JSON.parse(sessionStorage.getItem("cbid"));
+    return {token, cbid};
+}
+
+export async function getUser(){
+    const browserData = getSession();
+    const requestOptions = {
+        method: "GET",
+        headers: {"Content-Type": "application/json", Authorization: `Bearer ${browserData.token}`}
+    }
+    const response = await fetch(`${process.env.REACT_APP_HOST}/600/users/${browserData.cbid}`, requestOptions);
+    if(!response.ok){
+        throw { message: response.statusText, status: response.status }; //eslint-disable-line
+    }
+    const data = await response.json();
+    return data;
+}
+
+export async function getUserOrders(){
+    const browserData = getSession();
+    const requestOptions = {
+        method: "GET",
+        headers: {"Content-Type": "application/json", Authorization: `Bearer ${browserData.token}`}
+    }
+    const response = await fetch(`${process.env.REACT_APP_HOST}/660/orders?user.id=${browserData.cbid}`, requestOptions);
+    if(!response.ok){
+        throw { message: response.statusText, status: response.status }; //eslint-disable-line
+    }
+    const data = await response.json();
+    return data;
+}