Fixed login route and authentication guards.

sports-matcher/client/src/Layout.js

@@ -1,6 +1,6 @@
 import "./styles/Layout.css";
 import "./styles/extra.css";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { NavLink, Route, Routes, useNavigate } from "react-router-dom";
 import Welcome from "./pages/Welcome";
 import Navbar from "react-bootstrap/Navbar";
@@ -15,16 +15,12 @@ import Context from "./globals.js";
 
 
 export default function layout() {
-    const [state, setState] = useState({
+    const [globals, setGlobals] = useState({
         user: null,
-        setUser: setUser,
+        update: (updates, onUpdate) => setGlobals((state) => { return { ...state, ...updates }; }, onUpdate),
         navigate: useNavigate()
     });
 
-    function setUser(user) {
-        setState({ user: user });
-    }
-
     let identityDisplay = (
         <Nav>
             <li className="nav-item">
@@ -36,11 +32,11 @@ export default function layout() {
         </Nav>
     );
 
-    if (state.user) {
+    if (globals.user) {
         identityDisplay = (
             <Nav>
                 <li className="nav-item">
-                    <NavLink className="nav-link" to="/" >Hi, {state.user.firstName}</NavLink>
+                    <NavLink className="nav-link" to="/" >Hi, {globals.user.firstName}</NavLink>
                 </li>
                 <li className="nav-item">
                     <NavLink className="nav-link" to="/logout" >Logout</NavLink>
@@ -51,7 +47,7 @@ export default function layout() {
 
     return (
         <div id="app">
-            <Context.Provider value={state}>
+            <Context.Provider value={globals}>
                 <header>
                     <Navbar bg="light" expand="md">
                         <Container>

sports-matcher/client/src/components/AuthenticationGuard.js

@@ -1,34 +1,25 @@
 import React from "react";
-import { Navigate } from "react-router-dom";
+import globals from "../globals";
-import context from "../globals";
 import { apiClient } from "../utils/httpClients";
 
 export default class AuthenticationGuard extends React.Component {
     constructor(props) {
         super(props);
     }
-    static contextType = context;
+    static contextType = globals;
 
     async componentDidMount() {
         if (!this.context.user) {
-            let userDataResponse = await apiClient.get("/user/");
+            let userDataResponse = await apiClient.get("/user");
             if (userDataResponse.status === 200) {
-                this.context.setUser(userDataResponse.data);
+                this.context.update({ user: userDataResponse.data });
+            } else if (userDataResponse.status == 401) {
+                this.context.navigate("/signup");
             }
         }
     }
 
-
     render() {
-        return (
+        return null;
-            <context.Consumer>
-                {val => {
-                    if (!val.user) {
-                        console.log(val);
-                        return <Navigate to="/signup" replace="true" />;
-                    }
-                }}
-            </context.Consumer>
-        );
     }
 }

sports-matcher/client/src/globals.js

@@ -2,6 +2,6 @@ import React from "react";
 
 export default React.createContext({
     user: null,
-    setUser: () => { },
+    update: () => { },
     navigate: () => { }
 });

sports-matcher/client/src/pages/Dashboard.js

@@ -5,7 +5,7 @@ import { apiClient } from "../utils/httpClients.js";
 import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
 import SportInfoCardDisplay from "../components/SportInfoCardDisplay";
 import AuthenticationGuard from "../components/AuthenticationGuard";
-import context from "../globals";
+import globals from "../globals";
 
 export default class Dashboard extends React.Component {
     constructor(props) {
@@ -18,7 +18,7 @@ export default class Dashboard extends React.Component {
         };
     }
 
-    static contextType = context;
+    static contextType = globals;
 
     async componentDidMount() {
         this.setState({ user: this.context.user });

sports-matcher/client/src/pages/Login.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Alert, Button, Card, Container, Form } from "react-bootstrap";
-import context from "../globals";
+import globals from "../globals";
 import { apiClient } from "../utils/httpClients";
 
 export default class Login extends React.Component {
@@ -15,24 +15,25 @@ export default class Login extends React.Component {
         this.attemptLogin = this.attemptLogin.bind(this);
     }
 
-    static contextType = context;
+    static contextType = globals;
 
     async componentDidMount() {
     }
 
+    componentDidUpdate() {
+        if (this.context.user) {
+            this.context.navigate("/dashboard");
+        }
+    }
+
     async attemptLogin(e) {
         e.preventDefault();
         const loginResponse = await apiClient.post("/user/login", {
             email: this.state.email,
             password: this.state.password,
-        }, {
-            validateStatus: function (status) {
-                return status === 200 || status === 401 || status === 400;
-            }
         });
         if (loginResponse.status === 200) {
-            this.context.user = loginResponse.data;
+            this.context.update({ user: loginResponse.data });
-            this.context.navigate("/dashboard", { replace: true });
         } else if (loginResponse.status === 401) {
             this.setState({ errorDisplayed: true });
         }

sports-matcher/client/src/pages/Logout.js

@@ -11,15 +11,15 @@ export default class Logout extends React.Component {
 
     async componentDidMount() {
         const logoutResponse = await apiClient.get("/user/logout");
-        if (logoutResponse.status === 401) {
+        if (logoutResponse.status === 200) {
-            globals.navigate("/dashboard", { replace: true });
-        } else {
             this.redirectTimer = setTimeout(() => {
-                globals.navigate("/", { replace: true });
+                this.context.navigate("/", { replace: true });
             }, 2000);
+        } else if (logoutResponse.status == 401) {
+            this.context.navigate("/", { replace: true });
         }
 
-        globals.setUser(null);
+        this.context.update({ user: null });
     }
 
     async componentWillUnmount() {

sports-matcher/client/src/pages/NewAdmin.js

@@ -1,15 +1,8 @@
 import React from "react";
 import { Button, Table } from "react-bootstrap";
 import "../styles/Admin.css";
-import { globalContext } from "../context";
+import globals from "../globals";
-import { needUser } from "../utils/routing";
+
-//import Button from "@mui/material/Button";
-// import Typography from "@mui/material/Typography";
-// import Container from "@mui/material/Container";
-// import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from "@mui/material";
-// import { apiClient } from "../utils/httpClients.js";
-// import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
-// import { needUser } from "../utils/routing.js";
 export default class Admin extends React.Component {
     constructor(props) {
         super(props);
@@ -40,10 +33,9 @@ export default class Admin extends React.Component {
 
     }
 
-    static contextType = globalContext;
+    static contextType = globals;
 
     async componentDidMount() {
-        await needUser(this.context.navigate);
     }
 
     DeleteButton() {