Welcome page now shows current matches.

This commit is contained in:
Harrison Deng 2022-04-05 03:28:12 -05:00
parent f8abf7cd48
commit c1589b9758
8 changed files with 68 additions and 40 deletions

View File

@ -16,7 +16,7 @@
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "NODE_ENV=development API_HOST=http://localhost:5000 react-scripts start",
"start": "NODE_ENV='development' REACT_APP_API_HOST='http://localhost:5000' react-scripts start",
"build": "../scripts/build.py",
"test": "react-scripts test",
"eject": "react-scripts eject"

View File

@ -1,21 +0,0 @@
import React from "react";
import propTypes from "prop-types";
import GameInfoCard from "./GameInfoCard";
export default class GameInfoCardDisplay extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="horizontal-scroller">
{this.props.recommendedMatches.map((match) => <GameInfoCard key={match.id} match={match}></GameInfoCard>)}
</div>
);
}
}
GameInfoCardDisplay.propTypes = {
recommendedMatches: propTypes.array,
};

View File

@ -2,14 +2,15 @@ import React from "react";
import { Button, Card } from "react-bootstrap";
import propTypes from "prop-types";
import { grammaticalListString } from "../utils/strings";
export default class GameInfoCard extends React.Component {
export default class MatchInfoCard extends React.Component {
constructor(props) {
super(props);
}
getParticipants() {
let participants = [];
this.props.match.registeredUsers.array.forEach(user => {
console.log(this.props);
this.props.match.participants.forEach(user => {
participants.push(user.firstName);
});
return participants;
@ -19,10 +20,10 @@ export default class GameInfoCard extends React.Component {
return (
<Card style={{ width: "20rem" }}>
<Card.Body>
<Card.Title>{this.props.match.sport}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">{this.props.match.sport}</Card.Subtitle>
<Card.Title>{this.props.match.sport.name}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">{this.props.match.title}</Card.Subtitle>
<Card.Text>
Join <strong>{grammaticalListString(this.getParticipants(), 4)}</strong> to play a few matches of <strong>{this.props.match.sport}</strong> at <strong>{this.props.match.location}</strong> on <strong>{this.props.match.dateTime.toLocaleDateString("en-US")}</strong>!
Join <strong>{grammaticalListString(this.getParticipants(), 4)}</strong> to play a few matches of <strong>{this.props.match.sport.name}</strong> at <strong>{this.props.match.location.toString()}</strong> on <strong>{new Date(this.props.match.when).toLocaleDateString("en-US")}</strong>!
</Card.Text>
<Button variant="primary">Join!</Button>
</Card.Body>
@ -31,6 +32,6 @@ export default class GameInfoCard extends React.Component {
}
}
GameInfoCard.propTypes = {
MatchInfoCard.propTypes = {
match: propTypes.object,
};

View File

@ -0,0 +1,24 @@
import React from "react";
import propTypes from "prop-types";
import MatchInfoCard from "./MatchInfoCard";
export default class MatchInfoCardDisplay extends React.Component {
constructor(props) {
super(props);
}
render() {
let matches = null;
if (this.props.recommendedmatches.length > 0) {
matches = this.props.recommendedmatches.map((match) => <MatchInfoCard key={match._id} match={match}></MatchInfoCard>);
}
return (
<div className="horizontal-scroller">
{matches}
</div>
);
}
}
MatchInfoCardDisplay.propTypes = {
recommendedmatches: propTypes.array,
};

View File

@ -4,6 +4,9 @@ import Layout from "./Layout";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css"; // This could be optimized by importing individual css components.
console.log(process.env);
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>

View File

@ -1,10 +1,25 @@
import React from "react";
import { apiClient } from "../utils/httpClients";
import HomeCarousel from "../components/HomeCarousel";
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
export default class Welcome extends React.Component {
constructor(props) {
super(props);
this.recentMatchesRequest = apiClient.get("/match/recent/15");
this.state = {
displayedMatches: [],
};
}
async componentDidMount() {
await this.latestMatches();
}
async latestMatches() {
let recentMatchesRes = await apiClient.get("/match/recent/15");
if (recentMatchesRes.status === 200) {
this.setState({ displayedMatches: recentMatchesRes.data.recent });
}
}
render() {
@ -19,6 +34,7 @@ export default class Welcome extends React.Component {
<hr />
<div className="p-4">
<h2>Available Matches</h2>
<MatchInfoCardDisplay recommendedmatches={this.state.displayedMatches} />
</div>
</div>
);

View File

@ -1,6 +1,6 @@
import axios from "axios";
export const apiClient = axios.create({
baseURL: process.env.API_HOST,
baseURL: process.env.REACT_APP_API_HOST,
timeout: 5000,
});

View File

@ -27,13 +27,18 @@ MatchController.get("/search/:sport", needDatabase, async (req, res) => {
MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
const user = req.user;
let limit = req.params.limit;
if (limit && typeof (limit) !== "number") {
res.status(400).send("Limit parameter is not a number.");
}
let limit = parseInt(req.params.limit);
if (!req.params.limit) limit = 10;
if (isNaN(limit)) {
console.log(typeof (limit));
res.status(400).send("Limit parameter is not a number.");
return;
}
if (user) {
res.status(200).send(user.participatingMatches.slice(limit));
await user.populate("participatingMatches");
await user.populate("participatingMatches.participants");
await user.populate("participatingMatches.sport");
res.status(200).send();
return;
}
if (isNaN(limit)) {
@ -45,7 +50,7 @@ MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
return;
}
try {
const recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 });
const recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 }).populate("participants").populate("sport");
res.status(200).send({ recent: recent });
} catch (err) {
console.error(err);
@ -121,17 +126,17 @@ MatchController.delete("/:id", needDatabase, authenticationGuard, async (req, re
await match.deleteOne();
});
MatchController.get("/:matchId", needDatabase, async (req, res) => {
if (!req.params.matchId) {
MatchController.get("/:id", needDatabase, async (req, res) => {
if (!req.params.id) {
res.status(404).send("Id must be provided to retrieve match");
return;
}
try {
const match = await matchModel.findById(req.params.matchId);
const match = await matchModel.findById(req.params.id).populate("sport");
if (match) {
res.status(200).send(match);
} else {
res.status(404).send("Could not find match with ID: " + req.params.matchId);
res.status(404).send("Could not find match with ID: " + req.params.id);
}
} catch (error) {
res.status(500).send("Internal server error.");