Began integrating dashboard.

Also fixed match controller populate calls.
This commit is contained in:
Harrison Deng 2022-04-05 14:52:19 -05:00
parent e4db4ab403
commit 8a7fbd074b
5 changed files with 40 additions and 33 deletions

View File

@ -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>

View File

@ -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";
export default class Dashboard extends React.Component{
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");
@ -38,14 +40,14 @@ export default class Dashboard extends React.Component{
}
}
async getFirstName(){
async getFirstName() {
// let result = await apiClient.post("/user/login", {"email": "johndoe@gmail.com", "password": "csc309h1"}).then(apiClient.get("/user"));
let user = await apiClient.get("/user");
let tags = document.getElementsByTagName("h1");
tags[0].innerHTML = user.firstName;
}
render() {
return(
return (
<React.Fragment>
<h1></h1>
<InputGroup className="w-50">
@ -55,7 +57,7 @@ export default class Dashboard extends React.Component{
aria-describedby="basic-addon2"
/>
<Button variant="outline-secondary" id="button-addon2">
Search
Search
</Button>
</InputGroup>
<div className="p-4">

View File

@ -15,25 +15,27 @@ export default class Login extends React.Component {
render() {
return (
<Card>
<Card.Body>
<Card.Title>Login</Card.Title>
<Card.Subtitle>Welcome back!</Card.Subtitle>
<Form>
<Form.Group className="mb-3" controlId="loginEmail">
<Form.Label>E-mail</Form.Label>
<Form.Control type="email" placeholder="Ex. youremail@mail.com" />
</Form.Group>
<Form.Group className="mb-3" controlId="loginPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Enter password" />
</Form.Group>
<Button variant="primary" type="submit">
Login
</Button>
</Form>
</Card.Body>
</Card>
<div className="page-root">
<Card>
<Card.Body>
<Card.Title>Login</Card.Title>
<Card.Subtitle>Welcome back!</Card.Subtitle>
<Form>
<Form.Group className="mb-3" controlId="loginEmail">
<Form.Label>E-mail</Form.Label>
<Form.Control type="email" placeholder="Ex. youremail@mail.com" />
</Form.Group>
<Form.Group className="mb-3" controlId="loginPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Enter password" />
</Form.Group>
<Button variant="primary" type="submit">
Login
</Button>
</Form>
</Card.Body>
</Card>
</div>
);
}
}

View File

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

View File

@ -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);