Merge remote-tracking branch 'origin/restructure' into Dashboard

This commit is contained in:
Piyush Sharma 2022-04-05 13:19:19 -04:00
commit 2877fc3fd7
27 changed files with 365 additions and 197 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"

Binary file not shown.

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 894 KiB

Binary file not shown.

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

@ -1,18 +1,17 @@
import React from "react";
import { Carousel } from "react-bootstrap";
import "../styles/HomeCarousel.css";
export default class HomeCarousel extends React.Component{
export default class HomeCarousel extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Carousel>
<Carousel className="jumbotron" variant="light">
<Carousel.Item>
<img
src='https://www.allanpanthera.com/wp-content/uploads/elementor/thumbs/79377445_m-o6r0ydib97moj7m7zg58w32qirim121wxt2i8thqyg.jpg'
className="d-block w-100"
src='/images/carousel/volleyball_normalized.jpg'
alt="Connect Slide"
style={{ height: "300px", width: "2000px"}}
/>
<Carousel.Caption>
<div className="captionStyle">
@ -23,9 +22,9 @@ export default class HomeCarousel extends React.Component{
</Carousel.Item>
<Carousel.Item>
<img
src='http://cpadollard.com/wp-content/uploads/2018/01/cpa-dollard-fsc-banner-calendar_2000x300.jpg'
className="d-block w-100"
src='/images/carousel/schedule_normalized.jpg'
alt="Schedule Slide"
style={{ height: "300px", width: "2000px" }}
/>
<Carousel.Caption>
<div className="captionStyle">
@ -36,9 +35,9 @@ export default class HomeCarousel extends React.Component{
</Carousel.Item>
<Carousel.Item>
<img
src='https://tadvantagesites-com.cdn-convertus.com/uploads/sites/288/2019/07/Generic-Personal-Watercraft-3.jpg'
src='/images/carousel/rentals_normalized.jpg'
alt="Rent Slide"
style={{ height: "300px", width: "2000px" }}
className="d-block w-100"
/>
<Carousel.Caption>
<div className="captionStyle">

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,20 +1,31 @@
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() {
return (
<div className="page-root">
<div>
{/* <h1>Sports Matcher</h1>
<p>The best place to find a local match for a good game of your favourite sport!</p> */}
<HomeCarousel></HomeCarousel>
</div>
<HomeCarousel />
<div className="text-center p-3 mt-2">
<h2>Why?</h2>
<p>Because you want to play the sports you love while meeting new friends!</p>
@ -23,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,15 +0,0 @@
.captionStyle {
background-color: seashell;
color: black;
outline: 1px solid black;
}
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
filter: invert(100%);
}
.carousel-indicators button {
filter: invert(100%);
}

View File

@ -1,19 +1,5 @@
.jumbotron {
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 12rem;
padding-bottom: 1rem;
text-align: center;
background-size: cover;
background-color: black;
color: white;
}
.jumbotron h1 {
font-size: 1.5rem;
}
.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

@ -0,0 +1 @@
mongod --dbpath ./server/mongo-data

View File

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

View File

@ -1,5 +1,5 @@
import express from "express";
import { authenticationGuard } from "../middleware/authority.js";
import { requireAuthenticated } from "../middleware/authority.js";
import { needDatabase } from "../middleware/database.js";
import matchModel from "../schemas/matchModel.js";
import sportModel from "../schemas/sportModel.js";
@ -18,7 +18,7 @@ MatchController.get("/search/:sport", needDatabase, async (req, res) => {
if (req.query.beforeDate) query.where("when").lte(req.query.beforeDate);
let queryResults = await query;
res.send({ queryResults });
res.send({ results: queryResults });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
@ -26,8 +26,18 @@ MatchController.get("/search/:sport", needDatabase, async (req, res) => {
});
MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
let limit = req.params.limit;
try {
let user = null;
if (req.session.userId) {
user = await userModel.findById(req.session.userId);
}
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 (isNaN(limit)) {
res.status(400).send("Limit parameter not a number.");
return;
@ -36,17 +46,23 @@ MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
res.status(400).send("Limit greater than maximum limit of 50.");
return;
}
try {
const recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 });
let recent = null;
if (user) {
await user.populate("participatingMatches");
recent = user.participatingMatches.slice(-limit);
} 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);
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
// TODO: Check and improve error handling.
}
});
MatchController.post("/", needDatabase, authenticationGuard, async (req, res) => {
MatchController.post("/", needDatabase, requireAuthenticated, async (req, res) => {
try {
const userId = req.session.userId;
const user = await userModel.findById(userId);
@ -64,7 +80,7 @@ MatchController.post("/", needDatabase, authenticationGuard, async (req, res) =>
user.createdMatches.push(match._id);
user.participatingMatches.push(match._id);
await user.save();
res.status(201).send(match);
res.status(201).send({ createdMatch: match });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
@ -72,7 +88,8 @@ MatchController.post("/", needDatabase, authenticationGuard, async (req, res) =>
}
});
MatchController.patch("/:id", needDatabase, authenticationGuard, async (req, res) => {
MatchController.patch("/:id", needDatabase, requireAuthenticated, async (req, res) => {
try {
const match = await matchModel.findById(req.params.id);
if (!match) {
res.status(400).send("Invalid match ID provided.");
@ -93,45 +110,54 @@ MatchController.patch("/:id", needDatabase, authenticationGuard, async (req, res
res.status(400).send("Cannot change creator of match.");
return;
}
await match.updateOne(req.body);
res.status(200).send({ updatedMatch: match });
res.status(200).send(match);
} catch (error) {
res.status(200).send("Internal server error.");
}
});
MatchController.delete("/:id", needDatabase, authenticationGuard, async (req, res) => {
MatchController.delete("/:id", needDatabase, requireAuthenticated, async (req, res) => {
try {
const match = await matchModel.findById(req.params.id);
if (!match) {
res.status(400).send("Invalid match ID provided.");
return;
}
if (req.user._id !== match.creator && req.user.accessLevel < 3) {
res.status(401).send("Not authorized.");
return;
}
await match.deleteOne();
res.status(200).send("Deleted.");
} catch (error) {
console.error(error);
res.status(500).send("Internal server error");
}
});
MatchController.get("/:matchId", needDatabase, async (req, res) => {
if (!req.params.matchId) {
MatchController.get("/:id", needDatabase, async (req, res) => {
try {
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);
res.status(200).send({ match: 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) {
console.error(error);
res.status(500).send("Internal server error.");
// TODO: Develop the error handling.
// TODO: Improve the error handling.
}
});
MatchController.get("/join/:id", needDatabase, authenticationGuard, async (req, res) => {
MatchController.get("/join/:id", needDatabase, requireAuthenticated, async (req, res) => {
try {
const match = await matchModel.findById(req.params.id);
const user = req.user;
if (!match) {
@ -151,9 +177,14 @@ MatchController.get("/join/:id", needDatabase, authenticationGuard, async (req,
await user.save();
res.status(200).send("Joined.");
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
}
});
MatchController.get("/leave/:id", needDatabase, authenticationGuard, async (req, res) => {
MatchController.get("/leave/:id", needDatabase, requireAuthenticated, async (req, res) => {
try {
const match = await matchModel.findById(req.params.id);
const user = req.user;
@ -176,6 +207,10 @@ MatchController.get("/leave/:id", needDatabase, authenticationGuard, async (req,
await user.save();
res.status(200).send("Left match.");
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
}
});
export default MatchController;

View File

@ -0,0 +1,116 @@
import express from "express";
import { requireAuthenticated } from "../middleware/authority.js";
import { needDatabase } from "../middleware/database.js";
import rentalModel from "../schemas/rentalModel.js";
import userModel from "../schemas/userModel.js";
const rentalController = express.Router();
rentalController.post("/", needDatabase, requireAuthenticated, async (req, res) => {
try {
const user = req.user;
req.body.createDate = undefined;
req.body.creator = user._id;
const rental = new rentalModel(req.body);
await rental.save();
res.status(201).send({ createdRental: rental });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
}
});
rentalController.get("/:id", needDatabase, async (req, res) => {
try {
const rental = await rentalModel.findById(req.params.id).populate("creator");
res.status(200).send({ rental: rental });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error");
}
});
rentalController.get("/recent/:limit?", needDatabase, async (req, res) => {
try {
let user = null;
if (req.session.userId) {
user = await userModel.findById(req.session.userId);
}
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 (isNaN(limit)) {
res.status(400).send("Limit parameter not a number.");
return;
}
if (limit > 50) {
res.status(400).send("Limit greater than maximum limit of 50.");
return;
}
let recent = null;
if (user) {
await user.populate("createdRentals");
recent = user.createdRentals.slice(-limit);
} else {
recent = await rentalModel.find().limit(limit).sort({ createDate: -1 });
}
await recent.populate("members.$");
res.status(200).send({ recent: recent });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
}
});
rentalController.patch("/:id", needDatabase, requireAuthenticated, async (req, res) => {
try {
const rental = await rentalModel.findById(req.params.id);
if (!rental) {
res.status(400).send("Invalid rental ID provided.");
return;
}
if (req.body._id) {
res.status(400).send("Cannot change ID of rental.");
return;
}
if (req.body.creator) {
res.status(400).send("Cannot change creator of rental.");
return;
}
if (req.user._id !== rental.creator && req.user.accessLevel < 3) {
res.status(401).send("Not authorized.");
return;
}
await rental.updateOne(req.body);
res.status(200).send({ updated: rental });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
}
});
rentalController.delete("/:id", needDatabase, requireAuthenticated, async (req, res) => {
try {
const rental = await rentalModel.findById(req.params.id);
if (!rental) {
res.status(400).send("Invalid match ID provided.");
return;
}
if (req.user._id !== rental.creator && req.user.accessLevel < 3) {
res.status(401).send("Not authorized.");
return;
}
await rental.deleteOne();
res.status(200).send("Deleted.");
} catch (error) {
console.error(error);
res.status(500).send("Internal server error");
}
});
export default rentalController;

View File

@ -1,12 +1,12 @@
import express from "express";
import { authenticationGuard } from "../middleware/authority.js";
import { requireAuthenticated } from "../middleware/authority.js";
import { needDatabase } from "../middleware/database.js";
import sportModel from "../schemas/sportModel.js";
import userModel from "../schemas/userModel.js";
const SportController = express.Router();
SportController.post("/", needDatabase, authenticationGuard, async (req, res) => {
SportController.post("/", needDatabase, requireAuthenticated, async (req, res) => {
const user = await userModel.findById(req.session.userId);
try {
if (user.accessLevel <= 2) {

View File

@ -1,5 +1,5 @@
import express from "express";
import { authenticationGuard } from "../middleware/authority.js";
import { requireAuthenticated } from "../middleware/authority.js";
import { needDatabase } from "../middleware/database.js";
import userModel from "../schemas/userModel.js";
import User from "../schemas/userModel.js";
@ -34,7 +34,7 @@ UserController.post("/login", needDatabase, async (req, res) => {
}
});
UserController.get("/logout", authenticationGuard, (req, res) => {
UserController.get("/logout", requireAuthenticated, (req, res) => {
req.session.destroy((err) => {
if (err) {
console.error(err);
@ -50,7 +50,7 @@ UserController.get("/logout", authenticationGuard, (req, res) => {
});
});
UserController.get("/:id?", needDatabase, authenticationGuard, async (req, res) => {
UserController.get("/:id?", needDatabase, requireAuthenticated, async (req, res) => {
let user = null;
if (req.params.id) {
if (req.user.accessLevel > 2) {
@ -66,7 +66,7 @@ UserController.get("/:id?", needDatabase, authenticationGuard, async (req, res)
res.status(200).send(user);
});
UserController.patch("/:id?", needDatabase, authenticationGuard, async (req, res) => {
UserController.patch("/:id?", needDatabase, requireAuthenticated, async (req, res) => {
let user = null;
if (req.params.id) {
if (req.user.accessLevel > 2) {
@ -114,7 +114,7 @@ UserController.patch("/:id?", needDatabase, authenticationGuard, async (req, res
/* TODO: Implement middleware for removing users.
UserController.delete("/:id?", needDatabase, authenticationGuard, async (req, res) => {
UserController.delete("/:id?", needDatabase, requireAuthenticated, async (req, res) => {
let user = null;
if (req.params.id) {
if (req.user.accessLevel > 2) {

View File

@ -17,7 +17,7 @@ if (process.env.NODE_ENV === "production") {
}
export const userSession = session(sessionConf);
export async function authenticationGuard(req, res, next) {
export async function requireAuthenticated(req, res, next) {
if (req.session.userId) {
req.user = await userModel.findById(req.session.userId);
next();
@ -26,7 +26,3 @@ export async function authenticationGuard(req, res, next) {
return;
}
}
// TODO: Authentication
// TODO: Identity
// TODO: Authority

View File

@ -1,5 +1,6 @@
export default {
Match: "match",
User: "user",
Sport: "sport"
Sport: "sport",
Rental: "rental",
};

View File

@ -0,0 +1,23 @@
import mongoose from "mongoose";
import modelNameRegister from "./modelNameRegister.js";
const Types = mongoose.Schema.Types;
const rentalSchema = new mongoose.Schema({
title: { type: String, required: true, trim: true },
rate: { type: String, required: true, trim: true },
description: { type: String, required: true },
contact: { type: String, required: true },
createDate: { type: Date, required: true, default: Date.now },
creator: { type: Types.ObjectId, ref: modelNameRegister.User }
});
rentalSchema.pre("remove", async function (next) {
const rental = this;
const rentalInd = rental.creator.createdRentals.indexOf(rental._id);
rental.creator.createdRentals.splice(rentalInd, 1);
await rental.save();
next();
});
export default mongoose.model(modelNameRegister.Rental, rentalSchema);

View File

@ -29,6 +29,7 @@ const userSchema = new mongoose.Schema({
},
createdMatches: { type: [{ type: Types.ObjectId, ref: modelNameRegister.Match }], required: true, default: [] },
participatingMatches: { type: [{ type: Types.ObjectId, ref: modelNameRegister.Match }], required: true, default: [] },
createdRentals: { type: [{ type: Types.ObjectId, ref: modelNameRegister.Rental }], required: true, default: [] },
emailPublicity: { type: Number, required: true, default: 0 },
bioPublicity: { type: Boolean, required: true, default: false },
phonePublicity: { type: Boolean, required: true, default: false },

View File

@ -7,6 +7,7 @@ import SportController from "./controllers/sportController.js";
import { userSession } from "./middleware/authority.js";
import { mongooseDbName, mongoURI } from "./database/mongoose.js";
import cors from "cors";
import rentalController from "./controllers/rentalController.js";
const server = express();
const port = process.env.PORT || 5000;
@ -40,7 +41,7 @@ server.use(userSession);
server.use("/user", UserController);
server.use("/match", MatchController);
server.use("/sport", SportController);
server.use("/rental", rentalController);
server.listen(port, () => {
console.log(`Server listening on port ${port}.`);