ydeng/csc309-team58
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Began integrating dashboard.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
sports-matcher/client/src/Layout.js
View File

@ -8,6 +8,8 @@ import { Container, Nav, NavbarBrand } from "react-bootstrap";
import NavbarToggle from "react-bootstrap/esm/NavbarToggle"; import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse"; import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
import Dashboard from "./pages/Dashboard"; import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";
export default class Layout extends React.Component { export default class Layout extends React.Component {
render() { render() {
return ( return (
@ -29,8 +31,9 @@ export default class Layout extends React.Component {
</header> </header>
<main> <main>
<Routes> <Routes>
<Route path="/" element={<Welcome></Welcome>} /> <Route path="/" element={<Welcome />} />
<Route path="/Dashboard" element={<Dashboard></Dashboard>} /> <Route path="/dashboard" element={<Dashboard />} />
<Route path="/login" element={<Login />} />
</Routes> </Routes>
</main> </main>
<footer> <footer>

18
sports-matcher/client/src/pages/Dashboard.js
View File

@ -1,21 +1,23 @@
import React from "react"; import React from "react";
import { Button, InputGroup, FormControl } from "react-bootstrap"; import { Button, InputGroup, FormControl } from "react-bootstrap";
import "../styles/Dashboard.css"; import "../styles/Dashboard.css";
import { apiClient } from "../utils/httpClients"; import { apiClient } from "../utils/httpClients.js";
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay"; 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) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
displayedMatches: [], displayedMatches: [],
displayedSports: [], displayedSports: [],
displayedEquipment: [] displayedEquipment: [],
user: null
}; };
this.getFirstName(); this.getFirstName();
} }
async componentDidMount() { 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() { async latestMatches() {
let recentMatchesRes = await apiClient.get("/match/recent/15"); 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 result = await apiClient.post("/user/login", {"email": "johndoe@gmail.com", "password": "csc309h1"}).then(apiClient.get("/user"));
let user = await apiClient.get("/user"); let user = await apiClient.get("/user");
let tags = document.getElementsByTagName("h1"); let tags = document.getElementsByTagName("h1");
tags[0].innerHTML = user.firstName; tags[0].innerHTML = user.firstName;
} }
render() { render() {
return( return (
<React.Fragment> <React.Fragment>
<h1></h1> <h1></h1>
<InputGroup className="w-50"> <InputGroup className="w-50">
@ -55,7 +57,7 @@ export default class Dashboard extends React.Component{
aria-describedby="basic-addon2" aria-describedby="basic-addon2"
/> />
<Button variant="outline-secondary" id="button-addon2"> <Button variant="outline-secondary" id="button-addon2">
Search Search
</Button> </Button>
</InputGroup> </InputGroup>
<div className="p-4"> <div className="p-4">

40
sports-matcher/client/src/pages/Login.js
View File

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

2
sports-matcher/scripts/start_mongo.sh
View File

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

6
sports-matcher/server/controllers/matchController.js
View File

@ -48,12 +48,12 @@ MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
} }
let recent = null; let recent = null;
if (user) { if (user) {
await user.populate("participatingMatches"); await user.populate("participatingMatches").populate("participatingMatches.members.$");
recent = user.participatingMatches.slice(-limit); recent = user.participatingMatches.slice(-limit);
} else { } 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 }); res.status(200).send({ recent: recent });
} catch (error) { } catch (error) {
console.error(error); console.error(error);