47 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
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
39 changed files with 823 additions and 182 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": [ "semi": [
"error", "error",
"always" "always"
] ],
"no-unused-vars": "warn"
} }
} }

View File

@@ -16,7 +16,7 @@
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "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", "build": "../scripts/build.py",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"

View File

Before

Width:  |  Height:  |  Size: 529 KiB

After

Width:  |  Height:  |  Size: 529 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 496 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 396 KiB

View File

Before

Width:  |  Height:  |  Size: 894 KiB

After

Width:  |  Height:  |  Size: 894 KiB

View File

Before

Width:  |  Height:  |  Size: 592 KiB

After

Width:  |  Height:  |  Size: 592 KiB

View File

@@ -1,16 +1,65 @@
import "./styles/Layout.css"; import "./styles/Layout.css";
import "./styles/extra.css"; import "./styles/extra.css";
import React from "react"; import { useEffect, useState } from "react";
import { NavLink, Route, Routes } from "react-router-dom"; import { NavLink, Route, Routes, useNavigate } from "react-router-dom";
import Welcome from "./pages/Welcome"; import Welcome from "./pages/Welcome";
import Navbar from "react-bootstrap/Navbar"; import Navbar from "react-bootstrap/Navbar";
import { Container, Nav, NavbarBrand } from "react-bootstrap"; import { Container, Nav, NavbarBrand } from "react-bootstrap";
import NavbarToggle from "react-bootstrap/esm/NavbarToggle"; import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse"; import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
export default class Layout extends React.Component { import Dashboard from "./pages/Dashboard";
render() { 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 ( return (
<div id="app"> <div id="app">
<globalContext.Provider value={{ navigate: navigate }}>
<header> <header>
<Navbar bg="light" expand="md"> <Navbar bg="light" expand="md">
<Container> <Container>
@@ -22,20 +71,23 @@ export default class Layout extends React.Component {
<NavLink className="nav-link" to="/" >Home</NavLink> <NavLink className="nav-link" to="/" >Home</NavLink>
</li> </li>
</Nav> </Nav>
{indentityDisplay}
</NavbarCollapse> </NavbarCollapse>
</Container> </Container>
</Navbar> </Navbar>
</header> </header>
<main> <main>
<Routes> <Routes>
<Route path="/" element={<Welcome></Welcome>}> <Route path="/" element={<Welcome />} />
</Route> <Route path="/dashboard" element={<Dashboard />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes> </Routes>
</main> </main>
<footer> <footer>
</footer> </footer>
</globalContext.Provider>
</div> </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

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

View File

@@ -2,14 +2,14 @@ import React from "react";
import { Button, Card } from "react-bootstrap"; import { Button, Card } from "react-bootstrap";
import propTypes from "prop-types"; import propTypes from "prop-types";
import { grammaticalListString } from "../utils/strings"; import { grammaticalListString } from "../utils/strings";
export default class GameInfoCard extends React.Component { export default class MatchInfoCard extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
getParticipants() { getParticipants() {
let participants = []; let participants = [];
this.props.match.registeredUsers.array.forEach(user => { this.props.match.participants.forEach(user => {
participants.push(user.firstName); participants.push(user.firstName);
}); });
return participants; return participants;
@@ -19,10 +19,10 @@ export default class GameInfoCard extends React.Component {
return ( return (
<Card style={{ width: "20rem" }}> <Card style={{ width: "20rem" }}>
<Card.Body> <Card.Body>
<Card.Title>{this.props.match.sport}</Card.Title> <Card.Title>{this.props.match.sport.name}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">{this.props.match.sport}</Card.Subtitle> <Card.Subtitle className="mb-2 text-muted">{this.props.match.title}</Card.Subtitle>
<Card.Text> <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> </Card.Text>
<Button variant="primary">Join!</Button> <Button variant="primary">Join!</Button>
</Card.Body> </Card.Body>
@@ -31,6 +31,6 @@ export default class GameInfoCard extends React.Component {
} }
} }
GameInfoCard.propTypes = { MatchInfoCard.propTypes = {
match: propTypes.object, 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 reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css"; // This could be optimized by importing individual css components. import "bootstrap/dist/css/bootstrap.min.css"; // This could be optimized by importing individual css components.
console.log(process.env);
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<BrowserRouter> <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,10 +1,25 @@
import React from "react"; import React from "react";
import { apiClient } from "../utils/httpClients"; import { apiClient } from "../utils/httpClients";
import HomeCarousel from "../components/HomeCarousel"; import HomeCarousel from "../components/HomeCarousel";
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
export default class Welcome extends React.Component { export default class Welcome extends React.Component {
constructor(props) { constructor(props) {
super(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() { render() {
@@ -19,6 +34,7 @@ export default class Welcome extends React.Component {
<hr /> <hr />
<div className="p-4"> <div className="p-4">
<h2>Available Matches</h2> <h2>Available Matches</h2>
<MatchInfoCardDisplay recommendedmatches={this.state.displayedMatches} />
</div> </div>
</div> </div>
); );

View File

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

View File

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

View File

@@ -1,3 +1,5 @@
.horizontal-scroller { .horizontal-scroller {
overflow-x: scroll; overflow-x: scroll;
padding-top: 1rem;
padding-bottom: 1rem;
} }

View File

@@ -1,6 +1,10 @@
import axios from "axios"; import axios from "axios";
export const apiClient = axios.create({ export const apiClient = axios.create({
baseURL: process.env.API_HOST, baseURL: (process.env.REACT_APP_API_HOST || "") + "/api/",
timeout: 5000, 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; return;
} }
built += item; built += item;
if (index < items.length - 1) {
built += ", "; built += ", ";
}
if (index == max - 1) { if (index == max - 1) {
built += "and "; 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 4
], ],
"linebreak-style": [ "linebreak-style": [
"error", "warn",
"unix" "unix"
], ],
"quotes": [ "quotes": [
@@ -24,6 +24,7 @@
"semi": [ "semi": [
"error", "error",
"always" "always"
] ],
"no-unused-vars": "warn"
} }
} }

View File

@@ -1,5 +1,5 @@
import express from "express"; import express from "express";
import { authenticationGuard } from "../middleware/authority.js"; import { requireAuthenticated } from "../middleware/authority.js";
import { needDatabase } from "../middleware/database.js"; import { needDatabase } from "../middleware/database.js";
import matchModel from "../schemas/matchModel.js"; import matchModel from "../schemas/matchModel.js";
import sportModel from "../schemas/sportModel.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); if (req.query.beforeDate) query.where("when").lte(req.query.beforeDate);
let queryResults = await query; let queryResults = await query;
res.send({ queryResults }); res.send({ results: queryResults });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
res.status(500).send("Internal server error."); res.status(500).send("Internal server error.");
@@ -26,14 +26,16 @@ MatchController.get("/search/:sport", needDatabase, async (req, res) => {
}); });
MatchController.get("/recent/:limit?", needDatabase, async (req, res) => { MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
const user = req.user; try {
let limit = req.params.limit; let user = null;
if (limit && typeof (limit) !== "number") { if (req.session.userId) {
res.status(400).send("Limit parameter is not a number."); user = await userModel.findById(req.session.userId);
} }
let limit = parseInt(req.params.limit);
if (!req.params.limit) limit = 10; if (!req.params.limit) limit = 10;
if (user) { if (isNaN(limit)) {
res.status(200).send(user.participatingMatches.slice(limit)); console.log(typeof (limit));
res.status(400).send("Limit parameter is not a number.");
return; return;
} }
if (isNaN(limit)) { if (isNaN(limit)) {
@@ -44,17 +46,22 @@ MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
res.status(400).send("Limit greater than maximum limit of 50."); res.status(400).send("Limit greater than maximum limit of 50.");
return; return;
} }
try { let recent = null;
const recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 }); 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 }); res.status(200).send({ recent: recent });
} catch (err) { } catch (error) {
console.error(err); console.error(error);
res.status(500).send("Internal server error."); res.status(500).send("Internal server error.");
// TODO: Check and improve error handling. // TODO: Check and improve error handling.
} }
}); });
MatchController.post("/", needDatabase, authenticationGuard, async (req, res) => { MatchController.post("/", needDatabase, requireAuthenticated, async (req, res) => {
try { try {
const userId = req.session.userId; const userId = req.session.userId;
const user = await userModel.findById(userId); const user = await userModel.findById(userId);
@@ -68,11 +75,15 @@ MatchController.post("/", needDatabase, authenticationGuard, async (req, res) =>
sport: await sportModel.findByName(req.body.sport), sport: await sportModel.findByName(req.body.sport),
participants: [user._id] participants: [user._id]
}); });
if (!match.sport) {
res.status(400).send("Invalid sport name provided.");
return;
}
await match.save(); await match.save();
user.createdMatches.push(match._id); user.createdMatches.push(match._id);
user.participatingMatches.push(match._id); user.participatingMatches.push(match._id);
await user.save(); await user.save();
res.status(201).send(match); res.status(201).send({ createdMatch: match });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
res.status(500).send("Internal server error."); res.status(500).send("Internal server error.");
@@ -80,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); const match = await matchModel.findById(req.params.id);
if (!match) { if (!match) {
res.status(400).send("Invalid match ID provided."); res.status(400).send("Invalid match ID provided.");
@@ -101,45 +113,54 @@ MatchController.patch("/:id", needDatabase, authenticationGuard, async (req, res
res.status(400).send("Cannot change creator of match."); res.status(400).send("Cannot change creator of match.");
return; return;
} }
await match.updateOne(req.body); 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); const match = await matchModel.findById(req.params.id);
if (!match) { if (!match) {
res.status(400).send("Invalid match ID provided."); res.status(400).send("Invalid match ID provided.");
return; return;
} }
if (req.user._id !== match.creator && req.user.accessLevel < 3) { if (req.user._id !== match.creator && req.user.accessLevel < 3) {
res.status(401).send("Not authorized."); res.status(401).send("Not authorized.");
return; return;
} }
await match.deleteOne(); 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) => { MatchController.get("/:id", needDatabase, async (req, res) => {
if (!req.params.matchId) { try {
if (!req.params.id) {
res.status(404).send("Id must be provided to retrieve match"); res.status(404).send("Id must be provided to retrieve match");
return; return;
} }
try { const match = await matchModel.findById(req.params.id).populate("sport");
const match = await matchModel.findById(req.params.matchId);
if (match) { if (match) {
res.status(200).send(match); res.status(200).send({ match: match });
} else { } 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) { } catch (error) {
console.error(error);
res.status(500).send("Internal server 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 match = await matchModel.findById(req.params.id);
const user = req.user; const user = req.user;
if (!match) { if (!match) {
@@ -159,9 +180,14 @@ MatchController.get("/join/:id", needDatabase, authenticationGuard, async (req,
await user.save(); await user.save();
res.status(200).send("Joined."); 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 match = await matchModel.findById(req.params.id);
const user = req.user; const user = req.user;
@@ -184,6 +210,10 @@ MatchController.get("/leave/:id", needDatabase, authenticationGuard, async (req,
await user.save(); await user.save();
res.status(200).send("Left match."); res.status(200).send("Left match.");
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
}
}); });
export default MatchController; 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 express from "express";
import { authenticationGuard } from "../middleware/authority.js"; import { requireAuthenticated } from "../middleware/authority.js";
import { needDatabase } from "../middleware/database.js"; import { needDatabase } from "../middleware/database.js";
import sportModel from "../schemas/sportModel.js"; import sportModel from "../schemas/sportModel.js";
import userModel from "../schemas/userModel.js"; import userModel from "../schemas/userModel.js";
const SportController = express.Router(); 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); const user = await userModel.findById(req.session.userId);
try { try {
if (user.accessLevel <= 2) { if (user.accessLevel <= 2) {

View File

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

View File

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

View File

@@ -1,5 +1,6 @@
export default { export default {
Match: "match", Match: "match",
User: "user", 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: [] }, createdMatches: { type: [{ type: Types.ObjectId, ref: modelNameRegister.Match }], required: true, default: [] },
participatingMatches: { 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 }, emailPublicity: { type: Number, required: true, default: 0 },
bioPublicity: { type: Boolean, required: true, default: false }, bioPublicity: { type: Boolean, required: true, default: false },
phonePublicity: { 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 { userSession } from "./middleware/authority.js";
import { mongooseDbName, mongoURI } from "./database/mongoose.js"; import { mongooseDbName, mongoURI } from "./database/mongoose.js";
import cors from "cors"; import cors from "cors";
import rentalController from "./controllers/rentalController.js";
const server = express(); const server = express();
const port = process.env.PORT || 5000; const port = process.env.PORT || 5000;
@@ -26,9 +27,9 @@ try {
if (process.env.NODE_ENV === "development") { 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. mongoose.set("bufferCommands", false); // We want to know if there are connection issues immediately for development. Disables globally.
server.use(cors({ credentials: true, origin: "http://localhost:3000" }));
server.use(cors());
} }
// Docs: https://www.npmjs.com/package/body-parser // Docs: https://www.npmjs.com/package/body-parser
@@ -37,10 +38,10 @@ server.use(bodyParser.urlencoded({ extended: true }));
server.use(userSession); server.use(userSession);
server.use("/user", UserController); server.use("/api/user", UserController);
server.use("/match", MatchController); server.use("/api/match", MatchController);
server.use("/sport", SportController); server.use("/api/sport", SportController);
server.use("/api/rental", rentalController);
server.listen(port, () => { server.listen(port, () => {
console.log(`Server listening on port ${port}.`); console.log(`Server listening on port ${port}.`);