52 Commits

Author SHA1 Message Date
Hansi Xu
687d6d8a63 Deleting and readding signup 2022-04-07 00:14:31 -04:00
Hansi Xu
9d982abe07 Update SIgnup.js 2022-04-07 00:08:45 -04:00
Hansi Xu
da6f5c8265 Fixed signup page routing 2022-04-06 23:56:39 -04:00
c738e8044a eslint no fails compiles due to unused imports. 2022-04-06 21:03:30 -05:00
499cbf3409 Fixed api client url error. 2022-04-06 20:35:41 -05:00
30894c59c4 Merge branch 'develop' of https://github.com/csc309-winter-2022/team58 into develop 2022-04-05 20:54:29 -05:00
34bbfb3d5d Final changes. 2022-04-05 20:54:26 -05:00
Hansi Xu
9f1df7f7f4 Merge branch 'restructure' into develop 2022-04-05 21:48:51 -04:00
Hansi Xu
f6a8cebbec Merge branch 'signup-page' into restructure 2022-04-05 21:48:32 -04:00
Hansi Xu
5a49a1e4f8 Moved signup to pages 2022-04-05 21:48:08 -04:00
Hansi Xu
1fd60e39d4 Merge branch 'restructure' into develop 2022-04-05 21:40:49 -04:00
Hansi Xu
332e4e94d8 Merge branch 'signup-page' into restructure 2022-04-05 21:40:21 -04:00
Hansi Xu
d86570996e updating the signup page 2022-04-05 21:39:48 -04:00
Hansi Xu
c691b710b7 Merge branch 'restructure' into develop 2022-04-05 21:18:15 -04:00
Hansi Xu
6c79a4e9b3 Merge branch 'signup-page' into restructure 2022-04-05 21:16:49 -04:00
Hansi Xu
559973de5a Create signup.js 2022-04-05 21:15:39 -04:00
6cd421ba01 Fixed sport display. 2022-04-05 20:13:55 -05:00
0a2d513d3c Merge branch 'main' of https://github.com/csc309-winter-2022/team58 2022-04-05 20:04:49 -05:00
bb911173ec Merge branch 'develop' 2022-04-05 20:03:30 -05:00
911e5a2c79 Merge branch 'Dashboard' into restructure 2022-04-05 20:00:28 -05:00
999f884694 Login now displays an error message on a failed login. 2022-04-05 19:51:13 -05:00
Piyush Sharma
8f46ad77b8 Added cards and scroll styling 2022-04-05 20:17:50 -04:00
c4c4031e4c Login complete. 2022-04-05 19:14:11 -05:00
5c393cb73d Changed layout to a be a function component. 2022-04-05 18:47:06 -05:00
4aced5ed2d Added "api/" prefix to api routes.
Client updated to reflect changes.
2022-04-05 17:24:41 -05:00
b2c4178482 Fixed broken recent matches endpoint. 2022-04-05 16:19:05 -05:00
8a7fbd074b Began integrating dashboard.
Also fixed match controller populate calls.
2022-04-05 14:52:19 -05:00
e4db4ab403 Merge branch 'restructure' into login-page 2022-04-05 14:22:28 -05:00
67c1b9e821 Added route guards and login page template. 2022-04-05 14:20:50 -05:00
Piyush Sharma
fe3039b4f3 Merge pull request #7 from csc309-winter-2022/Dashboard
Dashboard
2022-04-05 15:19:46 -04:00
Piyush Sharma
d5a11d214c Updated Dashboard 2022-04-05 14:51:15 -04:00
Piyush Sharma
2877fc3fd7 Merge remote-tracking branch 'origin/restructure' into Dashboard 2022-04-05 13:19:19 -04:00
Piyush Sharma
879cbac17f Added Dashboard 2022-04-05 13:16:09 -04:00
0b42dde699 Added mongo starts scripts. 2022-04-05 12:11:06 -05:00
b447dcd985 Fixed broken import. 2022-04-05 12:00:55 -05:00
98ea02b56c Added rental controller to server routes. 2022-04-05 11:54:06 -05:00
8f96a2e5c9 Multiple changes, basic rental CRUD backend implemented.
All responses are now in their own object with context name.

Added limit to user based recent results for matches.

Moved all code in endpoints inside try and catch.

Renamed authentication guard function.
2022-04-05 11:50:35 -05:00
a7885ecf53 Added padding to horizontal scrollers. 2022-04-05 03:44:04 -05:00
6cedd74473 Recent match endpoint now populates all references. 2022-04-05 03:41:20 -05:00
d17fe1d912 Fixed extra comma on stringified items. 2022-04-05 03:30:59 -05:00
c1589b9758 Welcome page now shows current matches. 2022-04-05 03:28:12 -05:00
Sahni-Arjun
859147ea3d comment 2022-04-05 03:50:11 -04:00
Piyush Sharma
2831e2a39e Added route 2022-04-05 02:19:17 -04:00
Piyush Sharma
f38867598e Setup Dashboard Page 2022-04-05 02:19:08 -04:00
f8abf7cd48 Changed carousel images to be more fitting. 2022-04-05 01:06:54 -05:00
8464c4debc Changed carousel images to larger images and restyled. 2022-04-05 01:00:25 -05:00
dd6dc787e9 Match controller now returns user recents if authenticated. 2022-04-05 00:21:34 -05:00
0f480af1f0 Merge branch 'restructure' of https://github.com/csc309-winter-2022/team58 into restructure 2022-04-04 22:50:29 -05:00
7dd862e134 Added U and D endpoints. 2022-04-04 22:50:26 -05:00
Piyush Sharma
489387ec9f Merge pull request #6 from csc309-winter-2022/carousel
New Carousel
2022-04-04 23:30:36 -04:00
8492c82e4f Merge branch 'main' of https://github.com/csc309-winter-2022/team58 2022-03-07 21:05:15 -06:00
Sahni-Arjun
df2071439d changes 2022-03-06 21:59:05 -05:00
41 changed files with 920 additions and 200 deletions

102
Signup.js Normal file
View File

@@ -0,0 +1,102 @@
import React from "react";
import { Button, Card, Form, Alert, Container } from "react-bootstrap";
import { apiClient } from "../utils/httpClients";
// import { guard } from "../utils/routing";
export default class Signup extends React.Component {
constructor(props) {
super(props);
this.state = {
newUser: null,
alertShow: false,
alertKey: null,
alertMsg: null
};
this.state.newUser = {
email: null,
firstName: null,
lastName: null,
phone: null,
password: null
};
this.warnUser("Internal server error. Please try again later.", "danger");
const sleep = ms => new Promise(res => setTimeout(res, ms));
this.setState({ alertKey: "danger" }, () => {
console.log(this.state.alertKey);
});
console.log("Hello");
}
async registerUser() {
const sleep = ms => new Promise(res => setTimeout(res, ms));
const res = await apiClient.post("/user", this.state.newUser);
if (res.status === 200) {
this.warnUser("You are successfully signed up!", "success");
sleep(3000).then(() => {
this.context.navigate("/dashboard", { replace: true });
});
} else if (res === 409) {
this.warnUser("This user already exists. Try logging in instead.", "danger");
} else if (res === 400) {
this.warnUser("Missing required fields.", "danger");
} else {
this.warnUser("Internal server error. Please try again later.", "danger");
}
}
setUserState(event) {
let newUser = this.state.user;
newUser[event.target.controlId] = event.target.value;
this.setState({user: newUser});
}
warnUser(msg, key) {
this.setState({alertMsg: msg});
this.setState({alertKey: key});
}
render() {
return (
<div className="page-root">
<Container style={{ maxWidth: "35rem" }}>
<Alert variant={this.state.alertKey} style={{ width: "35rem" }}>
<Alert.Heading>{this.state.alertMsg}</Alert.Heading>
</Alert>
<Card>
<Card.Body>
<Card.Title>Sign up with us</Card.Title> <br />
<Card.Subtitle>Welcome to Sports Matcher!</Card.Subtitle> <br />
<Form onSubmit={this.registerUser}>
<Form.Group className="mb-3" controlId="firstName">
<Form.Label>First name</Form.Label>
<Form.Control type="text" placeholder="Ex. John" onChange={this.setUserState}/>
</Form.Group>
<Form.Group className="mb-3" controlId="lastName">
<Form.Label>Last name</Form.Label>
<Form.Control type="text" placeholder="Ex. Smith" onChange={this.setUserState}/>
</Form.Group>
<Form.Group className="mb-3" controlId="email">
<Form.Label>E-mail</Form.Label>
<Form.Control type="email" placeholder="Ex. youremail@mail.com" onChange={this.setUserState}/>
</Form.Group>
<Form.Group className="mb-3" controlId="phone">
<Form.Label>Phone number</Form.Label>
<Form.Control type="text" placeholder="Ex. (123) 456-7890" onChange={this.setUserState}/>
</Form.Group>
<Form.Group className="mb-3" controlId="password">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Enter password" onChange={this.setUserState}/>
</Form.Group>
<Button variant="primary" type="submit">
Register!
</Button>
</Form>
</Card.Body>
</Card>
</Container>
</div>
);
}
}

View File

@@ -35,6 +35,7 @@
"semi": [
"error",
"always"
]
],
"no-unused-vars": "warn"
}
}

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,16 +1,65 @@
import "./styles/Layout.css";
import "./styles/extra.css";
import React from "react";
import { NavLink, Route, Routes } from "react-router-dom";
import { useEffect, useState } from "react";
import { NavLink, Route, Routes, useNavigate } from "react-router-dom";
import Welcome from "./pages/Welcome";
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";
export default class Layout extends React.Component {
render() {
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";
import { apiClient } from "./utils/httpClients";
import Signup from "./pages/Signup";
import { globalContext } from "./context.js";
export default function layout() {
const navigate = useNavigate();
const [state, setState] = useState({
user: null,
});
useEffect(async () => {
await updateAuthStatus();
});
async function updateAuthStatus() {
const getUserResponse = await apiClient.get("/user");
if (getUserResponse !== 200) {
setState({ user: null });
} else {
setState({ user: getUserResponse.data });
}
}
let indentityDisplay = (
<Nav>
<li className="nav-item">
<NavLink className="nav-link" to="/login" >Login</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/signup" >Sign up!</NavLink>
</li>
</Nav>
);
if (state.user) {
indentityDisplay = (
<Nav>
<li className="nav-item">
<NavLink className="nav-link" to="/" >Hi, {this.state.user.firstName}</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/logout" >Logout</NavLink>
</li>
</Nav>
);
}
return (
<div id="app">
<globalContext.Provider value={{ navigate: navigate }}>
<header>
<Navbar bg="light" expand="md">
<Container>
@@ -22,20 +71,23 @@ export default class Layout extends React.Component {
<NavLink className="nav-link" to="/" >Home</NavLink>
</li>
</Nav>
{indentityDisplay}
</NavbarCollapse>
</Container>
</Navbar>
</header>
<main>
<Routes>
<Route path="/" element={<Welcome></Welcome>}>
</Route>
<Route path="/" element={<Welcome />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</main>
<footer>
</footer>
</globalContext.Provider>
</div>
);
}
}

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 {
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,14 @@ 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 => {
this.props.match.participants.forEach(user => {
participants.push(user.firstName);
});
return participants;
@@ -19,10 +19,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 +31,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";
import "../styles/MatchInfoCardDisplay.css";
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

@@ -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>
{this.props.sport.description}
</Card.Text>
</Card.Body>
</Card>
);
}
}
SportInfoCard.propTypes = {
sport: propTypes.object,
};

View File

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

View File

@@ -0,0 +1,3 @@
import React from "react";
export const globalContext = React.createContext({});

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

@@ -0,0 +1,69 @@
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 { globalContext } from "../context";
import { needUser } from "../utils/routing";
export default class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
displayedMatches: [],
displayedSports: [],
displayedEquipment: [],
user: null
};
}
static contextType = globalContext;
async componentDidMount() {
await needUser(this.context.navigate);
await this.latestMatches();
await this.availableSports();
}
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 });
}
}
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>
</React.Fragment>
);
}
}

View File

@@ -0,0 +1,94 @@
import React from "react";
import { Alert, Button, Card, Container, Form } from "react-bootstrap";
import { globalContext } from "../context";
import { apiClient } from "../utils/httpClients";
import { guard } from "../utils/routing";
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
errorDisplayed: false,
};
this.attemptLogin = this.attemptLogin.bind(this);
}
static contextType = globalContext;
async componentDidMount() {
try {
const getUserResponse = await apiClient.get("/user");
guard(this.context.navigate, () => getUserResponse.status === 401, "/dashboard"); // If it's not 401, then we redirect to dashboard.
} catch (error) {
if (error.message !== "Request failed with status code 401") {
throw error;
}
}
}
async attemptLogin(e) {
e.preventDefault();
const loginResponse = await apiClient.post("/user/login", {
email: this.state.email,
password: this.state.password,
}, {
validateStatus: function (status) {
return status === 200 || status === 401 || status === 400;
}
});
if (loginResponse.status === 200) {
this.context.navigate("/dashboard", { replace: true });
} else if (loginResponse.status === 401) {
this.setState({ errorDisplayed: true });
}
}
render() {
let errorMsg = (
<div></div>
);
if (this.state.errorDisplayed) {
errorMsg = (
< Alert variant="danger" onClose={() => this.setState({ errorDisplayed: false })} dismissible >
<Alert.Heading>Incorrect credentials</Alert.Heading>
<p>Double check your provided e-mail and password!</p>
</Alert >
);
}
return (
<div className="d-flex justify-content-center align-items-center
page-root">
{errorMsg}
<Container style={{ maxWidth: "35rem" }}>
<Card>
<Card.Body>
<Card.Title>Login</Card.Title>
<Card.Subtitle>Welcome back!</Card.Subtitle>
<Form onSubmit={this.attemptLogin}>
<Form.Group className="mb-3" controlId="loginEmail">
<Form.Label>E-mail</Form.Label>
<Form.Control type="email" placeholder="Ex. youremail@mail.com" onChange={(e) => {
this.setState({ email: e.target.value });
}} />
</Form.Group>
<Form.Group className="mb-3" controlId="loginPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Enter password" onChange={(e) => {
this.setState({ password: e.target.value });
}} />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Card.Body>
</Card>
</Container>
</div>
);
}
}

View File

@@ -0,0 +1,36 @@
import React from "react";
import { useNavigate } from "react-router-dom";
import { apiClient } from "../utils/httpClients";
export default class Logout extends React.Component {
constructor(props) {
super(props);
}
async componentDidMount() {
const logoutResponse = await apiClient.get("/user/logout");
let navigation = useNavigate();
if (logoutResponse.status === 401) {
navigation("/dashboard", { replace: true });
} else {
this.redirectTimer = setTimeout(() => {
navigation("/", { replace: true });
}, 2000);
}
}
async componentWillUnmount() {
clearTimeout(this.redirectTimer);
}
render() {
return (
<div className="page-root">
<div>
<h1>You are now logged out. See you later!</h1>
<p className="text-muted">We will redirect you shortly...</p>
</div>
</div>
);
}
}

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

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

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

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

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,10 @@
import axios from "axios";
export const apiClient = axios.create({
baseURL: process.env.API_HOST,
baseURL: (process.env.REACT_APP_API_HOST || "") + "/api/",
timeout: 5000,
withCredentials: process.env.NODE_ENV === "development",
validateStatus: function (status) {
return status === 401 || status == 200;
}
});

View File

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

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

@@ -14,7 +14,7 @@
4
],
"linebreak-style": [
"error",
"warn",
"unix"
],
"quotes": [
@@ -24,6 +24,7 @@
"semi": [
"error",
"always"
]
],
"no-unused-vars": "warn"
}
}

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,18 +46,22 @@ 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) {
recent = matchModel.find({ creator: user._id });
} else {
recent = matchModel.find().where("publicity").gte(2);
}
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.
}
});
// TODO: delete, update match.
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);
@@ -61,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.");
@@ -73,21 +91,128 @@ MatchController.post("/", needDatabase, authenticationGuard, async (req, res) =>
}
});
MatchController.get("/:matchId", needDatabase, async (req, res) => {
if (!req.params.matchId) {
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.");
return;
}
if (req.user._id !== match.creator && req.user.accessLevel < 3) {
res.status(401).send("Not authorized.");
return;
}
if (req.body._id) {
res.status(400).send("Cannot change ID of match.");
return;
}
if (req.body.creator) {
res.status(400).send("Cannot change creator of match.");
return;
}
await match.updateOne(req.body);
res.status(200).send({ updatedMatch: match });
} catch (error) {
res.status(200).send("Internal server error.");
}
});
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.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: Improve the error handling.
}
});
MatchController.get("/join/:id", needDatabase, requireAuthenticated, async (req, res) => {
try {
const match = await matchModel.findById(req.params.id);
const user = req.user;
if (!match) {
res.status(400).send("Invalid match ID provided.");
return;
}
if (user.participatingMatches.includes(match._id)) {
res.status(400).send("Already participating in match.");
return;
}
match.participants.push(user._id);
user.participatingMatches.push(match._id);
await match.save();
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, requireAuthenticated, async (req, res) => {
try {
const match = await matchModel.findById(req.params.id);
const user = req.user;
if (!match) {
res.status(400).send("Invalid match ID provided.");
return;
}
if (!user.participatingMatches.includes(match._id)) {
res.status(400).send("Not part of match.");
return;
}
const userIndex = match.participants.indexOf(user._id);
match.participants.splice(userIndex, 1);
await match.save();
const matchIndex = user.participatingMatches.indexOf(match._id);
user.participatingMatches.splice(matchIndex, 1);
await user.save();
res.status(200).send("Left match.");
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
// TODO: Develop the error handling.
}
});

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,6 +1,7 @@
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";
const UserController = express.Router();
@@ -33,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);
@@ -49,84 +50,88 @@ UserController.get("/logout", authenticationGuard, (req, res) => {
});
});
UserController.get("/email/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.email.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ email: selUser.email });
UserController.get("/:id?", needDatabase, requireAuthenticated, async (req, res) => {
let user = null;
if (req.params.id) {
if (req.user.accessLevel > 2) {
user = await userModel.findById(req.params.id);
} else {
res.status(401).send("Could not authenticate request.");
res.status(401).send("Unauthorized.");
return;
}
} else {
user = req.user;
}
user.password = undefined;
res.status(200).send(user);
});
UserController.get("/firstName/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.firstName.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ firstName: selUser.firstName });
UserController.patch("/:id?", needDatabase, requireAuthenticated, async (req, res) => {
let user = null;
if (req.params.id) {
if (req.user.accessLevel > 2) {
user = await userModel.findById(req.params.id);
} else {
res.status(401).send("Could not authenticate request.");
res.status(401).send("Unauthorized.");
return;
}
} else {
user = req.user;
}
if (req.body._id) {
res.status(400).send("Cannot change user ID.");
return;
}
if (req.body.createdMatches) {
res.status(400).send("Cannot directly change the list of created matches.");
return;
}
if (req.body.password) {
res.status(400).send("Cannot directly change user password.");
return;
}
if (req.body.participatingMatches) {
res.status(400).send("Cannot directly change the list of participating matches.");
return;
}
if (req.body.joinDate) {
res.status(400).send("Cannot change the join date.");
return;
}
if (req.body.accessLevel && req.user.accessLevel < 3) {
res.status(401).send("Unauthorized to change the access level of this user.");
return;
}
await user.updateOne(req.body);
res.status(200).send("Updated.");
});
UserController.get("/lastName/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.lastName.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ email: selUser.lastName });
/* TODO: Implement middleware for removing users.
UserController.delete("/:id?", needDatabase, requireAuthenticated, async (req, res) => {
let user = null;
if (req.params.id) {
if (req.user.accessLevel > 2) {
user = await userModel.findById(req.params.id);
} else {
res.status(401).send("Could not authenticate request.");
res.status(401).send("Unauthorized.");
return;
}
} else {
user = req.user;
}
await user.deleteOne();
res.status(200).send("Deleted user.");
});
UserController.get("/phone/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.phone.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ phone: selUser.phone });
} else {
res.status(401).send("Could not authenticate request.");
}
});
UserController.get("/participatingMatches/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.participatingMatches.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ participatingMatches: selUser.participatingMatches });
} else {
res.status(401).send("Could not authenticate request.");
}
});
UserController.get("/joinDate/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ joinDate: selUser.joinDate });
} else {
res.status(401).send("Could not authenticate request.");
}
});
UserController.get("/createdMatches/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ createdMatches: selUser.createdMatches });
} else {
res.status(401).send("Could not authenticate request.");
}
});
// TODO: Finish update requests using put.
*/
UserController.post("/", needDatabase, async (req, res) => {
try {

View File

@@ -1,6 +1,7 @@
import MongoStore from "connect-mongo";
import session from "express-session";
import { mongooseDbName, mongoURI } from "../database/mongoose.js";
import userModel from "../schemas/userModel.js";
const sessionConf = {
secret: process.env.SESSION_SECRET || "super duper secret string.",
cookie: {
@@ -16,15 +17,12 @@ if (process.env.NODE_ENV === "production") {
}
export const userSession = session(sessionConf);
export 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();
} else {
res.sendStatus(401);
res.status(401).send("Not authorized.");
return;
}
}
// TODO: Authentication
// TODO: Identity
// TODO: Authority

View File

@@ -24,4 +24,17 @@ const matchSchema = new mongoose.Schema({
createDate: { type: Date, required: true, default: Date.now }
});
matchSchema.pre("remove", function (next) {
const match = this;
match.populate("creator").populate("participants");
match.participants.forEach(participant => {
const index = participant.participatingMatches.indexOf(match._id);
participant.participatingMatches.splice(index, 1);
});
match.creator.createdMatches.splice(match.creator.createdMatches.indexOf(match._id), 1);
next();
});
export default mongoose.model(ModelNameRegister.Match, matchSchema);

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;
@@ -26,9 +27,9 @@ try {
if (process.env.NODE_ENV === "development") {
console.log("We are running in development mode.");
mongoose.set("bufferCommands", false); // We want to know if there are connection issues immediately for development. Disables globally.
server.use(cors());
server.use(cors({ credentials: true, origin: "http://localhost:3000" }));
}
// Docs: https://www.npmjs.com/package/body-parser
@@ -37,10 +38,10 @@ server.use(bodyParser.urlencoded({ extended: true }));
server.use(userSession);
server.use("/user", UserController);
server.use("/match", MatchController);
server.use("/sport", SportController);
server.use("/api/user", UserController);
server.use("/api/match", MatchController);
server.use("/api/sport", SportController);
server.use("/api/rental", rentalController);
server.listen(port, () => {
console.log(`Server listening on port ${port}.`);