From 3ec9af3b4e51611dfe739467fced654c81f8de31 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 7 Oct 2022 18:26:59 -0500
Subject: [PATCH] reassembling component structure

---
 client/src/App.tsx                            | 51 +++++++++----------
 client/src/components/Cart/Cart.tsx           |  5 ++
 client/src/components/Home.tsx                |  9 ++--
 client/src/components/Nav/Navbar.tsx          |  7 ++-
 .../Product.scss => Order/OrderCard.tsx}      |  0
 client/src/components/Order/OrderHistory.tsx  |  5 ++
 client/src/components/Order/OrderRecord.tsx   |  3 ++
 client/src/components/Product/AllProducts.tsx |  5 ++
 .../Product/{Product.tsx => ProductCard.tsx}  |  0
 client/src/components/Product/ProductPage.tsx |  5 ++
 client/src/components/User/User.scss          |  0
 client/src/components/User/User.tsx           |  0
 client/src/components/User/UserProfile.tsx    | 21 ++++++++
 client/src/components/User/UserSettings.tsx   |  3 ++
 14 files changed, 83 insertions(+), 31 deletions(-)
 rename client/src/components/{Product/Product.scss => Order/OrderCard.tsx} (100%)
 create mode 100644 client/src/components/Order/OrderHistory.tsx
 create mode 100644 client/src/components/Order/OrderRecord.tsx
 create mode 100644 client/src/components/Product/AllProducts.tsx
 rename client/src/components/Product/{Product.tsx => ProductCard.tsx} (100%)
 create mode 100644 client/src/components/Product/ProductPage.tsx
 delete mode 100644 client/src/components/User/User.scss
 delete mode 100644 client/src/components/User/User.tsx
 create mode 100644 client/src/components/User/UserProfile.tsx
 create mode 100644 client/src/components/User/UserSettings.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 4d72250..425011a 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,45 +1,30 @@
 // react imports
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 // components
 import Home from './components/Home'
 import Navbar from './components/Nav/Navbar'
 import AuthForm from './components/Auth/AuthForm'
+import Cart from './components/Cart/Cart'
+import AllProducts from './components/Product/AllProducts'
+import ProductPage from './components/Product/ProductPage'
+import UserProfile from './components/User/UserProfile'
+import UserSettings from './components/User/UserSettings'
+import OrderHistory from './components/Order/OrderHistory'
+import OrderRecord from './components/Order/OrderRecord'
 
 // util
 import { SupabaseProvider, getSupabaseClient, useSupabase } from './supabase/SupabaseContext'
-import { initialState } from './util/initialState'
-import { AppState } from './util/types'
 import './App.scss'
 
 export default function App() {
-  const [state, setState] = useState<AppState>(initialState);
   const supabase = useSupabase();
 
   useEffect(() => {
-    setState((prev: AppState) => {
-      let newUser;
-      let newSession;
-
-      if (supabase) {
-        newSession = supabase.auth.session();
-        newUser = supabase.auth.user();
-      }
-
-      return {
-        ...prev,
-        supabase: supabase,
-        user: newUser ?? prev.user,
-        session: newSession ?? prev.session
-      }
-    })
+    console.log(supabase);
   }, [supabase])
 
-  useEffect(() => {
-    console.log(state);
-  }, [state]);
-
   return (
     <SupabaseProvider value={getSupabaseClient()}>
       <BrowserRouter>
@@ -47,12 +32,26 @@ export default function App() {
         <Navbar />
           <Routes>
 
-            {/* Top level route */}
+            {/* Top level home page */}
             <Route path="/" element={<Home />} />
 
-            {/* Second level routes */}
+            {/* Auth routes */}
             <Route path="/register" element={<AuthForm format="register" />} />
             <Route path="/login" element={<AuthForm format="login" />} />
+
+            {/* Product components */}
+            <Route path="/products" element={<AllProducts />} />
+            <Route path="/products/:productId" element={<ProductPage />} />
+
+            {/* User data */}
+            <Route path="/my-profile" element={<UserProfile />} />
+            <Route path="/user-settings" element={<UserSettings />} />
+            <Route path="/cart" element={<Cart />} />
+
+            {/* Order data */}
+            <Route path="/orders" element={<OrderHistory />} />
+            <Route path="/orders/:orderId" element={<OrderRecord />} />
+
           </Routes>
         </div>
       </BrowserRouter>
diff --git a/client/src/components/Cart/Cart.tsx b/client/src/components/Cart/Cart.tsx
index e69de29..208bf2a 100644
--- a/client/src/components/Cart/Cart.tsx
+++ b/client/src/components/Cart/Cart.tsx
@@ -0,0 +1,5 @@
+export default function Cart() {
+    return (
+        <h1>Cart!</h1>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index fe64de3..5e73153 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -5,12 +5,13 @@ export default function Home() {
 
     return (
         <div>
-            <h1>Vite + React + Supabase</h1>
-            <p>Check out the user stuff below:</p>
+            <h1>The finest spice shop on the internet.</h1>
+            <p>Or at the very least, what their website could look like.</p>
 
             <div>
-                <button onClick={() => navigate('/login')}>Login</button>
-                <button onClick={() => navigate('/register')}>Register</button>
+                <button onClick={() => navigate('/products')}>View our Products</button>
+                <button onClick={() => navigate('/philosophy')}>Our Philosophy</button>
+                <button onClick={() => navigate('/contact')}>Contact Us</button>
             </div>
         </div>
     )
diff --git a/client/src/components/Nav/Navbar.tsx b/client/src/components/Nav/Navbar.tsx
index a39666a..e3c539d 100644
--- a/client/src/components/Nav/Navbar.tsx
+++ b/client/src/components/Nav/Navbar.tsx
@@ -21,7 +21,12 @@ export default function Navbar() {
                 <h1><a href="/">Express Spice Market</a></h1>
                 <div className="user-data">
                     {
-                        user?.email && <p>{user.email}</p>
+                        user?.email && (
+                            <>
+                            <p>{user.email}</p>
+                            <button onClick={() => navigate('/my-profile')}>View Profile</button>
+                            </>
+                        )
                     }
                     {
                         user ? <button onClick={handleLogout}>Log Out</button> : (
diff --git a/client/src/components/Product/Product.scss b/client/src/components/Order/OrderCard.tsx
similarity index 100%
rename from client/src/components/Product/Product.scss
rename to client/src/components/Order/OrderCard.tsx
diff --git a/client/src/components/Order/OrderHistory.tsx b/client/src/components/Order/OrderHistory.tsx
new file mode 100644
index 0000000..a053b5e
--- /dev/null
+++ b/client/src/components/Order/OrderHistory.tsx
@@ -0,0 +1,5 @@
+export default function OrderHistory() {
+    return (
+        <h1>Order History!</h1>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/Order/OrderRecord.tsx b/client/src/components/Order/OrderRecord.tsx
new file mode 100644
index 0000000..4d8182a
--- /dev/null
+++ b/client/src/components/Order/OrderRecord.tsx
@@ -0,0 +1,3 @@
+export default function OrderRecord() {
+    return <h1>Order Record!</h1>
+}
\ No newline at end of file
diff --git a/client/src/components/Product/AllProducts.tsx b/client/src/components/Product/AllProducts.tsx
new file mode 100644
index 0000000..759dece
--- /dev/null
+++ b/client/src/components/Product/AllProducts.tsx
@@ -0,0 +1,5 @@
+export default function AllProducts() {
+    return (
+        <h1>All Products!</h1>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/Product/Product.tsx b/client/src/components/Product/ProductCard.tsx
similarity index 100%
rename from client/src/components/Product/Product.tsx
rename to client/src/components/Product/ProductCard.tsx
diff --git a/client/src/components/Product/ProductPage.tsx b/client/src/components/Product/ProductPage.tsx
new file mode 100644
index 0000000..6ea4cf2
--- /dev/null
+++ b/client/src/components/Product/ProductPage.tsx
@@ -0,0 +1,5 @@
+export default function ProductPage() {
+    return (
+        <h1>Product Page!</h1>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/User/User.scss b/client/src/components/User/User.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/User/User.tsx b/client/src/components/User/User.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/User/UserProfile.tsx b/client/src/components/User/UserProfile.tsx
new file mode 100644
index 0000000..d778c1f
--- /dev/null
+++ b/client/src/components/User/UserProfile.tsx
@@ -0,0 +1,21 @@
+import { useNavigate } from "react-router-dom";
+import { useSupabase } from "../../supabase/SupabaseContext"
+
+export default function UserProfile() {
+    const supabase = useSupabase();
+    const navigate = useNavigate();
+
+    return (
+        <section>
+            <h1>User Profile!</h1>
+            <p>Your email is {supabase?.auth.user()?.email || "not found"}</p>
+
+            <h2>Options:</h2>
+            <div className="user-profile-options">
+                <button onClick={() => navigate('/cart')}>View my Cart</button>
+                <button onClick={() => navigate('/orders')}>View my Order History</button>
+                <button>Manage Account Settings</button>
+            </div>
+        </section>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/User/UserSettings.tsx b/client/src/components/User/UserSettings.tsx
new file mode 100644
index 0000000..45a0234
--- /dev/null
+++ b/client/src/components/User/UserSettings.tsx
@@ -0,0 +1,3 @@
+export default function UserSettings() {
+    return <h1>User Settings!</h1>
+}
\ No newline at end of file