From 8b26b622aa6e1e5ca7572fcc301ee6c06667f73d Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Mon, 4 Jul 2022 13:27:37 -0500
Subject: [PATCH] skeleton for cart

---
 client/src/App.scss                           |  9 +++++
 client/src/App.tsx                            |  4 ++-
 client/src/components/Cart/Cart.tsx           | 34 +++++++++++++++++--
 client/src/components/Cart/CartItem.tsx       |  8 +++--
 client/src/components/Navbar.tsx              |  8 ++++-
 .../src/components/Products/ProductCard.tsx   | 15 ++++++--
 .../src/components/Products/ProductPage.tsx   |  2 +-
 client/src/components/User/Register.tsx       |  3 ++
 client/src/store/store.ts                     | 12 +++++++
 client/src/store/store_types.ts               |  3 +-
 client/src/types/main.d.ts                    |  2 +-
 client/src/util/helpers.ts                    |  7 ++++
 swagger.yml                                   |  0
 13 files changed, 94 insertions(+), 13 deletions(-)
 create mode 100644 client/src/util/helpers.ts
 create mode 100644 swagger.yml

diff --git a/client/src/App.scss b/client/src/App.scss
index 66b0840..108d00a 100644
--- a/client/src/App.scss
+++ b/client/src/App.scss
@@ -122,4 +122,13 @@ nav {
   background-color: white;
   padding: 0.8rem;
   margin: 0.5rem;
+}
+
+// cart styles
+.cart-item-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 0 2rem;
+  background-color: white;
+  width: 75vw;
 }
\ No newline at end of file
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 89dd050..94e49b8 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -8,9 +8,10 @@ import Products from './components/Products/Products';
 import LoginForm from './components/User/LoginForm';
 import Register from './components/User/Register';
 import UserProfile from './components/User/UserProfile';
+import ProductPage from './components/Products/ProductPage';
+import Cart from './components/Cart/Cart';
 
 import './App.scss'
-import ProductPage from './components/Products/ProductPage';
 
 function App() {
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -26,6 +27,7 @@ function App() {
             <Route path="/users/:userID" element={<UserProfile profile={state.user.id} />} />
             <Route path="/register" element={<Register/>} />
             <Route path="/products/" element={<Products />} />
+            <Route path="/cart/" element={<Cart />} />
             <Route path="/products/:productID" element={<ProductPage />} />
           </Routes>
         </AppContext.Provider>
diff --git a/client/src/components/Cart/Cart.tsx b/client/src/components/Cart/Cart.tsx
index ee0c345..9c544e3 100644
--- a/client/src/components/Cart/Cart.tsx
+++ b/client/src/components/Cart/Cart.tsx
@@ -1,7 +1,37 @@
+import { useContext, useEffect, useState } from "react";
+import { AppContext } from "../../store/store";
+import { Product } from '../../types/main';
+import Page from "../../util/Page";
+import CartItem from "./CartItem";
+
 function Cart() {
+    const [state, dispatch] = useContext(AppContext);
+    const [contents, setContents] = useState<JSX.Element>();
+
+    useEffect(() => {
+        setContents(
+            state.cart.contents.map((product: Product) => <CartItem product={product} />)
+        )
+    }, [state, setContents]);
+
+    useEffect(() => {
+        console.log(contents);
+    }, [contents]);
+
     return (
-        <>
-        </>
+        <Page>
+        {
+        state.user.firstName ?
+
+            <h1>Hello, {state.user.firstName}!</h1>
+        :
+            <h1>Your cart is empty! Please <a href='/login'>log in</a> to build your own.</h1>
+        }
+
+        <section id="cart-contents">
+            {contents || null}
+        </section>
+        </Page>
     )
 }
 
diff --git a/client/src/components/Cart/CartItem.tsx b/client/src/components/Cart/CartItem.tsx
index f3bbfd3..9074b01 100644
--- a/client/src/components/Cart/CartItem.tsx
+++ b/client/src/components/Cart/CartItem.tsx
@@ -1,7 +1,9 @@
-function CartItem() {
+function CartItem({ product }: any) {
     return (
-        <>
-        </>
+        <div className="cart-item-panel">
+            <strong>{product.name}</strong>
+            <p>{product.price}</p>
+        </div>
     )
 }
 
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index f2a5128..4ef6b33 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -42,7 +42,13 @@ function NavBar() {
                 <button onClick={handleSearch}>Search</button>
                 <button onClick={() => console.log(state)}>Render</button>
             </div>
-            {loggedIn ? <button onClick={() => navigate(`/users/${state.user.id}`)}>{profText}</button> : <button onClick={() => navigate("/login")}>Log In</button>}
+            {loggedIn ?
+                <>
+                <button onClick={() => navigate(`/users/${state.user.id}`)}>{profText}</button>
+                <button onClick={() => navigate('/cart')}>Your cart</button>
+                </>
+            :
+                <button onClick={() => navigate("/login")}>Log In</button>}
         </nav>
     )
 }
diff --git a/client/src/components/Products/ProductCard.tsx b/client/src/components/Products/ProductCard.tsx
index cc5df56..45388f9 100644
--- a/client/src/components/Products/ProductCard.tsx
+++ b/client/src/components/Products/ProductCard.tsx
@@ -1,9 +1,11 @@
+import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
-import Route from 'react-router-dom';
-import ProductPage from "./ProductPage";
+import { addToCart } from "../../util/helpers";
+import { AppContext } from "../../store/store";
 
 export default function ProductCard({ productData }: any) {
     const { name, category, description, price, id } = productData;
+    const [state, dispatch] = useContext(AppContext);
     const navigate = useNavigate();
 
     return (
@@ -15,7 +17,14 @@ export default function ProductCard({ productData }: any) {
             <p>Price: {`$${price}` || "Free, apparently!"}</p>
             <div className="product-options">
                 <button onClick={() => navigate(`/products/${id}`)}>More info</button>
-                <button>Add to Cart</button>
+
+                {
+                state.user.headers && state.user.headers.authenticated ?
+                <button onClick={() => addToCart(productData, dispatch)}>Add to Cart</button>
+                :
+                <button onClick={() => navigate('/login')}>Login to add to your cart</button>
+                }
+
             </div>
         </div>
     )
diff --git a/client/src/components/Products/ProductPage.tsx b/client/src/components/Products/ProductPage.tsx
index 2ff8633..f222d41 100644
--- a/client/src/components/Products/ProductPage.tsx
+++ b/client/src/components/Products/ProductPage.tsx
@@ -20,7 +20,7 @@ export default function ProductPage() {
 
             <p>(a photo here)</p>
             <p>{info.description}</p>
-            <p>Price: {info.price}</p>
+            <p>Price: ${info.price}</p>
         </Page>
         : <></>
     )
diff --git a/client/src/components/User/Register.tsx b/client/src/components/User/Register.tsx
index 1dd89c8..d8f0348 100644
--- a/client/src/components/User/Register.tsx
+++ b/client/src/components/User/Register.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useReducer, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { initialState, reducer } from "../../store/store";
 import { ActionType, emptySessionHeader } from "../../store/store_types";
 import { userInfo } from '../../types/main';
@@ -16,6 +17,7 @@ function Register() {
         headers: emptySessionHeader
     }
 
+    const navigate = useNavigate();
     const [state, dispatch] = useReducer(reducer, initialState);
     const [userInput, setUserInput] = useState(formInitialState);
     const [warningText, setWarningText] = useState('initial');
@@ -58,6 +60,7 @@ function Register() {
 
         if (register.ok) {
             setUserInput(formInitialState);
+            navigate('/');
         } else {
             console.log('Something went wrong');
         }
diff --git a/client/src/store/store.ts b/client/src/store/store.ts
index c88c42e..eea3d94 100644
--- a/client/src/store/store.ts
+++ b/client/src/store/store.ts
@@ -28,6 +28,18 @@ export const reducer = (state: appState, action: userAction) => {
                 ...state,
                 user: payload
             }
+        case ActionType.ADDTOCART:
+            let updatedContents = state.cart.contents;
+            console.log(action.payload);
+            updatedContents.push(action.payload);
+
+            return {
+                ...state,
+                cart: {
+                    ...state.cart,
+                    contents: updatedContents
+                }
+            }
         default:
             return state;
     }
diff --git a/client/src/store/store_types.ts b/client/src/store/store_types.ts
index 90db9b6..c1899dd 100644
--- a/client/src/store/store_types.ts
+++ b/client/src/store/store_types.ts
@@ -8,7 +8,8 @@ export enum ActionType {
     REGISTERNEW,
     UPDATEONE,
     SEARCH,
-    USERLOGIN
+    USERLOGIN,
+    ADDTOCART
 }
 
 export interface userAction {
diff --git a/client/src/types/main.d.ts b/client/src/types/main.d.ts
index 0648493..30ce9dc 100644
--- a/client/src/types/main.d.ts
+++ b/client/src/types/main.d.ts
@@ -7,7 +7,7 @@ export type userInfo = {
     email: string
     id?: number
     
-    // NOTE: userInfo.name is deprecated
+    // NOTE: userInfo.name => displayName?
     name?: string
     password: string
     verifyPassword?: string
diff --git a/client/src/util/helpers.ts b/client/src/util/helpers.ts
new file mode 100644
index 0000000..3481f3a
--- /dev/null
+++ b/client/src/util/helpers.ts
@@ -0,0 +1,7 @@
+import React from "react";
+import { ActionType, userAction } from "../store/store_types";
+import { Product } from "../types/main";
+
+export const addToCart = (productData: Product, dispatch: React.Dispatch<userAction>): any => {
+    dispatch({ type: ActionType.ADDTOCART, payload: productData });
+}
\ No newline at end of file
diff --git a/swagger.yml b/swagger.yml
new file mode 100644
index 0000000..e69de29