From b575fc7fde35a9a53890405605d17a75d6e2188d Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Wed, 6 Apr 2022 22:53:20 -0500
Subject: [PATCH] Login endpoint now returns the user profile.

---
 sports-matcher/client/src/Layout.js           | 25 +++++++++++++------
 .../src/components/AuthenticationGuard.js     | 22 +++++++++-------
 sports-matcher/client/src/context.js          |  3 ---
 sports-matcher/client/src/globals.js          |  7 ++++++
 sports-matcher/client/src/pages/Dashboard.js  |  4 +--
 sports-matcher/client/src/pages/Login.js      |  6 ++---
 sports-matcher/client/src/pages/Logout.js     | 11 +++++---
 .../server/controllers/userController.js      |  3 ++-
 8 files changed, 51 insertions(+), 30 deletions(-)
 delete mode 100644 sports-matcher/client/src/context.js
 create mode 100644 sports-matcher/client/src/globals.js

diff --git a/sports-matcher/client/src/Layout.js b/sports-matcher/client/src/Layout.js
index 4ebcfb9..dbf3ca1 100644
--- a/sports-matcher/client/src/Layout.js
+++ b/sports-matcher/client/src/Layout.js
@@ -1,6 +1,6 @@
 import "./styles/Layout.css";
 import "./styles/extra.css";
-import { useContext } from "react";
+import { useEffect, useState } from "react";
 import { NavLink, Route, Routes, useNavigate } from "react-router-dom";
 import Welcome from "./pages/Welcome";
 import Navbar from "react-bootstrap/Navbar";
@@ -8,14 +8,22 @@ import { Container, Nav, NavbarBrand } from "react-bootstrap";
 import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
 import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
 import Dashboard from "./pages/Dashboard";
+import Logout from "./pages/Logout";
 import Login from "./pages/Login";
-import { globalContext } from "./context.js";
+import Context from "./globals.js";
 
 
 export default function layout() {
-    const navigate = useNavigate();
+    const [state, setState] = useState({
+        user: null,
+        setUser: setUser,
+        navigate: useNavigate()
+    });
+
+    function setUser(user) {
+        setState({ user: user });
+    }
 
-    const context = useContext(globalContext);
     let identityDisplay = (
         <Nav>
             <li className="nav-item">
@@ -27,11 +35,11 @@ export default function layout() {
         </Nav>
     );
 
-    if (context.user) {
+    if (state.user) {
         identityDisplay = (
             <Nav>
                 <li className="nav-item">
-                    <NavLink className="nav-link" to="/" >Hi, {this.state.user.firstName}</NavLink>
+                    <NavLink className="nav-link" to="/" >Hi, {state.user.firstName}</NavLink>
                 </li>
                 <li className="nav-item">
                     <NavLink className="nav-link" to="/logout" >Logout</NavLink>
@@ -42,7 +50,7 @@ export default function layout() {
 
     return (
         <div id="app">
-            <globalContext.Provider value={{ navigate: navigate, user: null }}>
+            <Context.Provider value={state}>
                 <header>
                     <Navbar bg="light" expand="md">
                         <Container>
@@ -64,12 +72,13 @@ export default function layout() {
                         <Route path="/" element={<Welcome />} />
                         <Route path="/dashboard" element={<Dashboard />} />
                         <Route path="/login" element={<Login />} />
+                        <Route path="/logout" element={<Logout />} />
                     </Routes>
                 </main>
                 <footer>
 
                 </footer>
-            </globalContext.Provider>
+            </Context.Provider>
         </div>
     );
 }
\ No newline at end of file
diff --git a/sports-matcher/client/src/components/AuthenticationGuard.js b/sports-matcher/client/src/components/AuthenticationGuard.js
index 84622e4..5a85cd9 100644
--- a/sports-matcher/client/src/components/AuthenticationGuard.js
+++ b/sports-matcher/client/src/components/AuthenticationGuard.js
@@ -1,30 +1,34 @@
 import React from "react";
 import { Navigate } from "react-router-dom";
-import { globalContext } from "../context";
+import context from "../globals";
 import { apiClient } from "../utils/httpClients";
 
 export default class AuthenticationGuard extends React.Component {
     constructor(props) {
         super(props);
     }
+    static contextType = context;
 
     async componentDidMount() {
         if (!this.context.user) {
             let userDataResponse = await apiClient.get("/user/");
             if (userDataResponse.status === 200) {
-                this.context.user = userDataResponse.data;
+                this.context.setUser(userDataResponse.data);
             }
         }
     }
 
-    static contextType = globalContext;
 
     render() {
-        if (!this.context.user) {
-            return (
-                <Navigate to="/signup" replace="true" />
-            );
-        }
-        return;
+        return (
+            <context.Consumer>
+                {val => {
+                    if (!val.user) {
+                        console.log(val);
+                        return <Navigate to="/signup" replace="true" />;
+                    }
+                }}
+            </context.Consumer>
+        );
     }
 }
\ No newline at end of file
diff --git a/sports-matcher/client/src/context.js b/sports-matcher/client/src/context.js
deleted file mode 100644
index 8f6e61c..0000000
--- a/sports-matcher/client/src/context.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import React from "react";
-
-export const globalContext = React.createContext({});
diff --git a/sports-matcher/client/src/globals.js b/sports-matcher/client/src/globals.js
new file mode 100644
index 0000000..4859047
--- /dev/null
+++ b/sports-matcher/client/src/globals.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+export default React.createContext({
+    user: null,
+    setUser: () => { },
+    navigate: () => { }
+});
\ No newline at end of file
diff --git a/sports-matcher/client/src/pages/Dashboard.js b/sports-matcher/client/src/pages/Dashboard.js
index 9374e5a..61d828b 100644
--- a/sports-matcher/client/src/pages/Dashboard.js
+++ b/sports-matcher/client/src/pages/Dashboard.js
@@ -4,8 +4,8 @@ import "../styles/Dashboard.css";
 import { apiClient } from "../utils/httpClients.js";
 import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
 import SportInfoCardDisplay from "../components/SportInfoCardDisplay";
-import { globalContext } from "../context";
 import AuthenticationGuard from "../components/AuthenticationGuard";
+import context from "../globals";
 
 export default class Dashboard extends React.Component {
     constructor(props) {
@@ -18,7 +18,7 @@ export default class Dashboard extends React.Component {
         };
     }
 
-    static contextType = globalContext;
+    static contextType = context;
 
     async componentDidMount() {
         this.setState({ user: this.context.user });
diff --git a/sports-matcher/client/src/pages/Login.js b/sports-matcher/client/src/pages/Login.js
index 82e99a5..a8ad7d1 100644
--- a/sports-matcher/client/src/pages/Login.js
+++ b/sports-matcher/client/src/pages/Login.js
@@ -1,8 +1,7 @@
 import React from "react";
 import { Alert, Button, Card, Container, Form } from "react-bootstrap";
-import { globalContext } from "../context";
+import context from "../globals";
 import { apiClient } from "../utils/httpClients";
-import AuthenticationGuard from "../components/AuthenticationGuard";
 
 export default class Login extends React.Component {
     constructor(props) {
@@ -16,7 +15,7 @@ export default class Login extends React.Component {
         this.attemptLogin = this.attemptLogin.bind(this);
     }
 
-    static contextType = globalContext;
+    static contextType = context;
 
     async componentDidMount() {
     }
@@ -32,6 +31,7 @@ export default class Login extends React.Component {
             }
         });
         if (loginResponse.status === 200) {
+            this.context.user = loginResponse.data;
             this.context.navigate("/dashboard", { replace: true });
         } else if (loginResponse.status === 401) {
             this.setState({ errorDisplayed: true });
diff --git a/sports-matcher/client/src/pages/Logout.js b/sports-matcher/client/src/pages/Logout.js
index 517d95c..7c898eb 100644
--- a/sports-matcher/client/src/pages/Logout.js
+++ b/sports-matcher/client/src/pages/Logout.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import globals from "../globals";
 import { apiClient } from "../utils/httpClients";
 
 export default class Logout extends React.Component {
@@ -7,16 +7,19 @@ export default class Logout extends React.Component {
         super(props);
     }
 
+    static contextType = globals;
+
     async componentDidMount() {
         const logoutResponse = await apiClient.get("/user/logout");
-        let navigation = useNavigate();
         if (logoutResponse.status === 401) {
-            navigation("/dashboard", { replace: true });
+            globals.navigate("/dashboard", { replace: true });
         } else {
             this.redirectTimer = setTimeout(() => {
-                navigation("/", { replace: true });
+                globals.navigate("/", { replace: true });
             }, 2000);
         }
+
+        globals.setUser(null);
     }
 
     async componentWillUnmount() {
diff --git a/sports-matcher/server/controllers/userController.js b/sports-matcher/server/controllers/userController.js
index 520b788..7267b64 100644
--- a/sports-matcher/server/controllers/userController.js
+++ b/sports-matcher/server/controllers/userController.js
@@ -16,7 +16,8 @@ UserController.post("/login", needDatabase, async (req, res) => {
         } else {
             req.session.userId = user._id;
             req.session.email = user.email;
-            res.status(200).send("Authenticated.");
+            user.password = undefined;
+            res.status(200).send(user);
         }
     } catch (error) {
         if (error.name === "TypeError") {