5 Commits

16 changed files with 78 additions and 46 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

Before

Width:  |  Height:  |  Size: 529 KiB

After

Width:  |  Height:  |  Size: 529 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 496 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 396 KiB

View File

Before

Width:  |  Height:  |  Size: 894 KiB

After

Width:  |  Height:  |  Size: 894 KiB

View File

Before

Width:  |  Height:  |  Size: 592 KiB

After

Width:  |  Height:  |  Size: 592 KiB

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

@@ -10,7 +10,7 @@ export default class HomeCarousel extends React.Component {
<Carousel.Item>
<img
className="d-block w-100"
src='/images/volleyball_normalized.jpg'
src='/images/carousel/volleyball_normalized.jpg'
alt="Connect Slide"
/>
<Carousel.Caption>
@@ -23,7 +23,7 @@ export default class HomeCarousel extends React.Component {
<Carousel.Item>
<img
className="d-block w-100"
src='/images/basketball_normalized.jpg'
src='/images/carousel/schedule_normalized.jpg'
alt="Schedule Slide"
/>
<Carousel.Caption>
@@ -35,7 +35,7 @@ export default class HomeCarousel extends React.Component {
</Carousel.Item>
<Carousel.Item>
<img
src='/images/tennis_normalized.jpg'
src='/images/carousel/rentals_normalized.jpg'
alt="Rent Slide"
className="d-block w-100"
/>

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,3 +1,5 @@
.horizontal-scroller {
overflow-x: scroll;
padding-top: 1rem;
padding-bottom: 1rem;
}

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

@@ -10,7 +10,9 @@ export function grammaticalListString(items, max) {
return;
}
built += item;
if (index < items.length - 1) {
built += ", ";
}
if (index == max - 1) {
built += "and ";
}

View File

@@ -27,13 +27,11 @@ 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 (user) {
res.status(200).send(user.participatingMatches.slice(limit));
if (isNaN(limit)) {
console.log(typeof (limit));
res.status(400).send("Limit parameter is not a number.");
return;
}
if (isNaN(limit)) {
@@ -44,8 +42,15 @@ MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
res.status(400).send("Limit greater than maximum limit of 50.");
return;
}
let recent = null;
try {
const recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 });
if (user) {
await user.populate("participatingMatches").populate("participatingMatches.participants").populate("participatingMatches.sport");
recent = user.participatingMatches;
} else {
recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 });
}
await recent.populate("members.$"); // Populates all references.
res.status(200).send({ recent: recent });
} catch (err) {
console.error(err);
@@ -103,7 +108,6 @@ MatchController.patch("/:id", needDatabase, authenticationGuard, async (req, res
}
await match.updateOne(req.body);
res.status(200).send(match);
});
@@ -119,19 +123,20 @@ MatchController.delete("/:id", needDatabase, authenticationGuard, async (req, re
return;
}
await match.deleteOne();
res.status(200).send("Deleted.");
});
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.");