reassembling component structure

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) => {
+    console.log(supabase);
-      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
-      }
-    })
   }, [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>

client/src/components/Cart/Cart.tsx

@@ -0,0 +1,5 @@
+export default function Cart() {
+    return (
+        <h1>Cart!</h1>
+    )
+}

client/src/components/Home.tsx

@@ -5,12 +5,13 @@ export default function Home() {
 
     return (
         <div>
-            <h1>Vite + React + Supabase</h1>
+            <h1>The finest spice shop on the internet.</h1>
-            <p>Check out the user stuff below:</p>
+            <p>Or at the very least, what their website could look like.</p>
 
             <div>
-                <button onClick={() => navigate('/login')}>Login</button>
+                <button onClick={() => navigate('/products')}>View our Products</button>
-                <button onClick={() => navigate('/register')}>Register</button>
+                <button onClick={() => navigate('/philosophy')}>Our Philosophy</button>
+                <button onClick={() => navigate('/contact')}>Contact Us</button>
             </div>
         </div>
     )

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> : (

client/src/components/Order/OrderHistory.tsx

@@ -0,0 +1,5 @@
+export default function OrderHistory() {
+    return (
+        <h1>Order History!</h1>
+    )
+}

client/src/components/Order/OrderRecord.tsx

@@ -0,0 +1,3 @@
+export default function OrderRecord() {
+    return <h1>Order Record!</h1>
+}

client/src/components/Product/AllProducts.tsx

@@ -0,0 +1,5 @@
+export default function AllProducts() {
+    return (
+        <h1>All Products!</h1>
+    )
+}

client/src/components/Product/ProductPage.tsx

@@ -0,0 +1,5 @@
+export default function ProductPage() {
+    return (
+        <h1>Product Page!</h1>
+    )
+}

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>
+    )
+}

client/src/components/User/UserSettings.tsx

@@ -0,0 +1,3 @@
+export default function UserSettings() {
+    return <h1>User Settings!</h1>
+}