fixing bugs where rendering overwrites local state. user profiles

client/src/App.tsx

@@ -7,6 +7,7 @@ import LandingPage from './components/LandingPage';
 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 './App.scss'
 
@@ -21,6 +22,7 @@ function App() {
           <Routes>
             <Route path="/" element={<LandingPage/>} />
             <Route path="/login" element={<LoginForm/>} />
+            <Route path="/users/:userID" element={<UserProfile profile={state.user.id} />} />
             <Route path="/register" element={<Register/>} />
             <Route path="/products/" element={<Products />} />
           </Routes>

client/src/components/Navbar.tsx

@@ -5,11 +5,10 @@ import { useNavigate } from 'react-router-dom';
 
 function NavBar() {
     const [loggedIn, setLoggedIn] = useState(false);
-    const [userID, setUserID] = useState(null);
+    const [profText, setProfText] = useState(null);
     const [searchInput, setSearchInput] = useState('');
 
     const [state, dispatch] = useContext(AppContext);
-    // const { searchTerm, user, cart } = useContext(AppContext);
 
     const navigate = useNavigate();
 
@@ -20,24 +19,30 @@ function NavBar() {
         navigate(`/products?query=${searchInput}`);
     }
 
-    // const forceRender = () => {
-    //     console.log(searchTerm);
-    //     console.log(user);
-    // }
+    useEffect(() => {
+        if (state === initialState) return;
 
-    // useEffect(() => {
-    //     console.log('state updated!');
-    // }, [user])
+        console.log(state.user);
+
+        if (state.user && state.user.headers.authenticated) {
+            console.log('authenticated!');
+            setProfText(state.user.email);
+            setLoggedIn(true);
+        } else if (!state.user.authenticated) {
+            setLoggedIn(false);
+        }
+
+    }, [state]);
 
     return (
         <nav>
-            <a href="/">Logo</a>
+            <button onClick={() => navigate("/")}>Logo</button>
             <div className="searchbar">
                 <input type="text" placeholder="Search products" onChange={(e) => setSearchInput(e.target.value)}/>
                 <button onClick={handleSearch}>Search</button>
                 <button onClick={() => console.log(state)}>Render</button>
             </div>
-            {loggedIn ? <a href={`/users/${userID}`}>Profile info</a> : <a href="/login">Log In</a>}
+            {loggedIn ? <button onClick={() => navigate(`/users/${state.user.id}`)}>{profText}</button> : <button onClick={() => navigate("/login")}>Log In</button>}
         </nav>
     )
 }

client/src/components/User/LoginForm.tsx

@@ -25,13 +25,12 @@ function LoginForm() {
         const json = await response?.json();
 
         if (json) {
-            console.log(json);
-            console.log(json.user);
-
+            const { session, userProfile } = json;
             let thisUser: userInfo = {
-                email: json.user.email,
-                password: json.user.password,
-                headers: json
+                id: userProfile.id,
+                email: userProfile.email,
+                password: userProfile.password,
+                headers: session
             }
 
             setToDispatch(thisUser);
@@ -39,7 +38,7 @@ function LoginForm() {
     }
 
     useEffect(() => {
-        console.log('thing?');
+        if (!toDispatch) return;
         dispatch({ type: ActionType.USERLOGIN, payload: toDispatch });
     }, [toDispatch]);
 

client/src/components/User/UserProfile.tsx

@@ -0,0 +1,33 @@
+import { useContext, useEffect } from "react"
+import { useNavigate } from "react-router-dom";
+import { AppContext } from "../../store/store"
+
+import Page from "../../util/Page";
+
+export default function UserProfile(profile: any): JSX.Element {
+    const [state, dispatch] = useContext(AppContext);
+
+    const navigate = useNavigate();
+
+    // useEffect(() => {
+    //     if (!state.user.headers.authenticated) {
+    //         console.log('bad');
+    //     }
+    // }, []);
+
+    return (
+        <Page>
+            <h1>User Profile</h1>
+            <h2>Thanks for supporting us{`, ${state.user.name}!` || '!'}</h2>
+            <h2>{state.user.id || 'Profile not found'}</h2>
+            <h3>{state.user.email}</h3>
+
+            <div className="profile-options">
+                <button>Order History</button>
+                <button>Open Orders</button>
+                <button>Edit Profile</button>
+                <button>Profile Settings</button>
+            </div>
+        </Page>
+    )
+}

client/src/util/apiUtils.ts

@@ -35,5 +35,5 @@ export const handleLogin = async (email: string, password: string) => {
         body: JSON.stringify({ email: email, password: password })
     });
 
-    if (serverCall.ok) return serverCall;
+    return serverCall;
 }

routes/login.js

@@ -19,7 +19,12 @@ loginRouter.route('/').post(async (req, res) => {
             req.session.authenticated = true;
             req.session.user = { email: email, password: password }
 
-            res.send(req.session);
+            let fullUserProfile = await newClient.query("SELECT * FROM users WHERE email = ($1)", [email]);
+
+            res.send({
+                session: req.session,
+                userProfile: fullUserProfile.rows[0]
+            });
         }
     } catch(e) {
         console.log(e);