Began integrating dashboard.

Also fixed match controller populate calls.

sports-matcher/client/src/Layout.js

@@ -8,6 +8,8 @@ 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 Login from "./pages/Login";
+
 export default class Layout extends React.Component {
     render() {
         return (
@@ -29,8 +31,9 @@ export default class Layout extends React.Component {
                 </header>
                 <main>
                     <Routes>
-                        <Route path="/" element={<Welcome></Welcome>} />
-                        <Route path="/Dashboard" element={<Dashboard></Dashboard>} />
+                        <Route path="/" element={<Welcome />} />
+                        <Route path="/dashboard" element={<Dashboard />} />
+                        <Route path="/login" element={<Login />} />
                     </Routes>
                 </main>
                 <footer>

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

@@ -1,21 +1,23 @@
 import React from "react";
 import { Button, InputGroup, FormControl } from "react-bootstrap";
 import "../styles/Dashboard.css";
-import { apiClient } from "../utils/httpClients";
+import { apiClient } from "../utils/httpClients.js";
 import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
+import { needUser } from "../utils/routing.js";
 export default class Dashboard extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             displayedMatches: [],
             displayedSports: [],
-            displayedEquipment: []
+            displayedEquipment: [],
+            user: null
         };
         this.getFirstName();
     }
     async componentDidMount() {
-        await this.latestMatches();
-
+        this.setState({ user: await needUser() }); // needUser says this page needs a user, and therefore, if there isn't a user, get them to login first. It returns the authenticated user.
+        this.setState({ displayedMatches: await this.latestMatches() });
     }
     async latestMatches() {
         let recentMatchesRes = await apiClient.get("/match/recent/15");

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

@@ -15,6 +15,7 @@ export default class Login extends React.Component {
 
     render() {
         return (
+            <div className="page-root">
                 <Card>
                     <Card.Body>
                         <Card.Title>Login</Card.Title>
@@ -34,6 +35,7 @@ export default class Login extends React.Component {
                         </Form>
                     </Card.Body>
                 </Card>
+            </div>
         );
     }
 }

sports-matcher/scripts/start_mongo.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-mongod --dbpath ./server/mongo-data
+mongod --dbpath ../server/mongo-data

sports-matcher/server/controllers/matchController.js

@@ -48,12 +48,12 @@ MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
         }
         let recent = null;
         if (user) {
-            await user.populate("participatingMatches");
+            await user.populate("participatingMatches").populate("participatingMatches.members.$");
             recent = user.participatingMatches.slice(-limit);
         } else {
-            recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 });
+            recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 }).populate("members.$");
         }
-        await recent.populate("members.$"); // Populates all references.
+        await recent; // Populates all references.
         res.status(200).send({ recent: recent });
     } catch (error) {
         console.error(error);