Added cards and scroll styling

Also fixed match controller populate calls.

sports-matcher/client/src/Layout.js

@@ -7,6 +7,9 @@ import Navbar from "react-bootstrap/Navbar";
 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 (
@@ -28,8 +31,9 @@ export default class Layout extends React.Component {
                 </header>
                 <main>
                     <Routes>
-                        <Route path="/" element={<Welcome></Welcome>}>
-                        </Route>
+                        <Route path="/" element={<Welcome />} />
+                        <Route path="/dashboard" element={<Dashboard />} />
+                        <Route path="/login" element={<Login />} />
                     </Routes>
                 </main>
                 <footer>

sports-matcher/client/src/components/MatchInfoCardDisplay.js

@@ -1,7 +1,7 @@
 import React from "react";
 import propTypes from "prop-types";
 import MatchInfoCard from "./MatchInfoCard";
-
+import "../styles/MatchInfoCardDisplay.css";
 export default class MatchInfoCardDisplay extends React.Component {
     constructor(props) {
         super(props);

sports-matcher/client/src/components/SportInfoCard.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Card } from "react-bootstrap";
+import propTypes from "prop-types";
+export default class SportInfoCard extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <Card style={{ width: "20rem" }}>
+                <Card.Body>
+                    <Card.Title>{this.props.sport.name}</Card.Title>
+                    <Card.Subtitle className="mb-2 text-muted">{this.props.sport.minPlayers.toString()}</Card.Subtitle>
+                    <Card.Text>
+                        <p>{this.props.sport.description}</p>
+                    </Card.Text>
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+SportInfoCard.propTypes = {
+    sport: propTypes.object,
+};

sports-matcher/client/src/components/SportInfoCardDisplay.js

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

sports-matcher/client/src/pages/Dashboard.js

@@ -0,0 +1,85 @@
+import React from "react";
+import { Button, InputGroup, FormControl } from "react-bootstrap";
+import "../styles/Dashboard.css";
+import { apiClient } from "../utils/httpClients.js";
+import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
+import SportInfoCardDisplay from "../components/SportInfoCardDisplay";
+// import { needUser } from "../utils/routing.js";
+export default class Dashboard extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            displayedMatches: [],
+            displayedSports: [],
+            displayedEquipment: [],
+            user: null
+        };
+        // this.getFirstName();
+    }
+    // async componentDidMount() {
+    //     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 componentDidMount() {
+        await this.latestMatches();
+        await this.availableSports();
+        // await this.availableEquipment();
+    }
+    async latestMatches() {
+        let recentMatchesRes = await apiClient.get("/match/recent/15");
+        if (recentMatchesRes.status === 200) {
+            this.setState({ displayedMatches: recentMatchesRes.data.recent });
+        }
+    }
+
+    async availableSports() {
+        let availableSportsRes = await apiClient.get("/sport");
+        if (availableSportsRes.status === 200) {
+            this.setState({ displayedSports: availableSportsRes.data.recent });
+        }
+    }
+
+    // async availableEquipment() {
+    //     let availableEquipmentRes = await apiClient.get("/rentals");
+    //     if (availableEquipmentRes.status === 200) {
+    //         this.setState({ displayedEquipment: availableEquipmentRes.data.recent });
+    //     }
+    // }
+
+    // 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 (
+            <React.Fragment>
+                <h1></h1>
+                <InputGroup className="w-50">
+                    <FormControl
+                        placeholder="Search for Matches"
+                        aria-label="Search Bar"
+                        aria-describedby="basic-addon2"
+                    />
+                    <Button variant="outline-secondary" id="button-addon2">
+                        Search
+                    </Button>
+                </InputGroup>
+                <div className="p-4">
+                    <h2>Available Matches</h2>
+                    <MatchInfoCardDisplay recommendedmatches={this.state.displayedMatches} />
+                </div>
+                <div className="p-4">
+                    <h2>Available Sports</h2>
+                    <SportInfoCardDisplay recommendedsports={this.state.displayedSports} />
+                </div>
+                {/* <div className="p-4">
+                    <h2>Available Equipment</h2>
+                    <MatchInfoCardDisplay recommendedmatches={this.state.displayedEquipment} />
+                </div> */}
+
+            </React.Fragment>
+        );
+    }
+}

sports-matcher/client/src/pages/Login.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Button, Card, Form } from "react-bootstrap";
+import { apiClient } from "../utils/httpClients";
+import { guard } from "../utils/routing";
+
+export default class Login extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    async componentDidMount() {
+        const getUserResponse = await apiClient.get("/user");
+        guard(() => getUserResponse.status === 401, "/dashboard"); // If it's not 401, then we redirect to dashboard.
+    }
+
+    render() {
+        return (
+            <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>
+        );
+    }
+}

sports-matcher/client/src/styles/Dashboard.css

@@ -0,0 +1,5 @@
+.w-50{
+    margin-top: 5%;
+    margin-left: 25%;
+    margin-right: 25%;
+}

sports-matcher/client/src/styles/MatchInfoCardDisplay.css

@@ -0,0 +1,4 @@
+.horizontal-scroller{
+    display: flex;
+    overflow-x: auto;
+}

sports-matcher/client/src/utils/routing.js

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import { apiClient } from "./httpClients";
+
+export function guard(evaluator, redirect, navigateOptions, onRedirect) {
+    if (!evaluator) throw new Error("evaluator required.");
+    if (!redirect) throw new Error("redirect required.");
+    if (!navigateOptions) {
+        navigateOptions = {
+            replace: true
+        };
+    }
+    let navigate = useNavigate();
+    let redirecting = !evaluator();
+    if (redirecting) {
+        if (onRedirect) onRedirect();
+        navigate(redirect, navigateOptions);
+    }
+}
+
+export async function needUser() {
+    let userDataResponse = await apiClient.get("/user");
+    guard(() => userDataResponse.status === 200, "/login");
+    return userDataResponse.data;
+}

sports-matcher/scripts/start_mongo.bat

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

sports-matcher/scripts/start_mongo.sh

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

sports-matcher/server/controllers/matchController.js

@@ -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,7 +26,11 @@ MatchController.get("/search/:sport", needDatabase, async (req, res) => {
 });
 
 MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
-    const user = req.user;
+    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)) {
@@ -43,23 +47,21 @@ MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
             return;
         }
         let recent = null;
-    try {
         if (user) {
-            await user.populate("participatingMatches").populate("participatingMatches.participants").populate("participatingMatches.sport");
-            recent = user.participatingMatches;
+            recent = matchModel.find({ creator: user._id });
         } else {
-            recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 });
+            recent = matchModel.find().where("publicity").gte(2);
         }
-        await recent.populate("members.$"); // Populates all references.
+        recent = await recent.sort({ createDate: -1 }).limit(limit).populate(["sport", "participants"]);
         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);
@@ -73,11 +75,15 @@ MatchController.post("/", needDatabase, authenticationGuard, async (req, res) =>
             sport: await sportModel.findByName(req.body.sport),
             participants: [user._id]
         });
+        if (!match.sport) {
+            res.status(400).send("Invalid sport name provided.");
+            return;
+        }
         await match.save();
         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.");
@@ -85,7 +91,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.");
@@ -106,45 +113,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(match);
+        res.status(200).send({ updatedMatch: 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("/: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.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.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) {
@@ -164,9 +180,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;
 
@@ -189,6 +210,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;

sports-matcher/server/controllers/rentalController.js

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

sports-matcher/server/controllers/sportController.js

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

sports-matcher/server/controllers/userController.js

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

sports-matcher/server/middleware/authority.js

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

sports-matcher/server/schemas/modelNameRegister.js

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

sports-matcher/server/schemas/rentalModel.js

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

sports-matcher/server/schemas/userModel.js

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

sports-matcher/server/server.js

@@ -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}.`);