ydeng/csc309-team58
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added rentals page

Browse Source
This commit is contained in:
Sahni-Arjun 2022-04-07 22:16:48 -04:00
parent 5d2528da5f
commit a01b9a0f48
3 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sports-matcher/client/src/Layout.js
View File

@ -10,6 +10,7 @@ import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
import Dashboard from "./pages/Dashboard";
import Logout from "./pages/Logout";
import Admin from "./pages/NewAdmin";
import Rentals from "./pages/Rentals";
import Login from "./pages/Login";
import Context from "./globals.js";
@ -71,6 +72,7 @@ export default function layout() {
<Route path="/login" element={<Login />} />
<Route path="/logout" element={<Logout />} />
<Route path="/admin" element={<Admin />} />
<Route path="/rentals" element={<Rentals />} />
</Routes>
</main>
<footer>

31
sports-matcher/client/src/components/RentalInfoCard.js Normal file
View File

@ -0,0 +1,31 @@
import React from "react";
import { Card } from "react-bootstrap";
//import { Button, Card } from "react-bootstrap";
import propTypes from "prop-types";
//import { grammaticalListString } from "../utils/strings";
export default class MatchInfoCard extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
// <Card style={{ width: "20rem" }}>
<Card>
<Card.Body>
<Card.Title>{this.props.rental.title}</Card.Title>
<Card.Text className="mb-2 text-muted">Rate: {this.props.rental.rate}</Card.Text>
<Card.Text>Date Created: {this.props.rental.createDate}</Card.Text>
<Card.Text>Owner: {this.props.rental.creator}</Card.Text>
<Card.Text>Contact: {this.props.rental.contact}</Card.Text>
<Card.Text>Description: {this.props.rental.description}</Card.Text>
</Card.Body>
</Card>
);
}
}
MatchInfoCard.propTypes = {
rental: propTypes.object,
};

89
sports-matcher/client/src/pages/Rentals.js Normal file
View File

@ -0,0 +1,89 @@
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 RentalInfoCard from "../components/RentalInfoCard";
// import AuthenticationGuard from "../components/AuthenticationGuard";
// import globals from "../globals";
export default class Rentals extends React.Component {
constructor(props) {
super(props);
this.state = {
rentals: [
{ id: 9, creator: "Person5", createDate: "05/21/2022", title: "Horse", rate: "$1000/day", description: "This is an amazing horse, has won many races", contact: "647 765 1234" },
{ id: 7, creator: "Person1", createDate: "05/05/2022", title: "Tennis Racquet", rate: "$300/day", description: "This is an amazing tennis racquet, used by Roger Federer to win Wimbledon in 2003", contact: "123 456 7890" },
{ id: 3, creator: "Person2", createDate: "05/11/2022", title: "Soccer Ball", rate: "$70/day", description: "This is an amazing soccer ball, signed by Messi", contact: "647 822 4321" },
{ id: 2, creator: "Person3", createDate: "05/13/2022", title: "Basket Ball", rate: "$7/day", description: "This is an amazing basketball, same model as the ones used in the NBA", contact: "467 279 4321" },
{ id: 1, creator: "Person4", createDate: "05/18/2022", title: "Table Tennis Racquet", rate: "$7/day", description: "This is an amazing table tennis racquet, it's very good", contact: "326 111 4321" },
]
};
}
// static contextType = globals;
// async componentDidMount() {
// this.setState({ user: this.context.user });
// await this.latestMatches();
// await this.availableSports();
// }
// async latestMatches() {
// let recentMatchesRes = await apiClient.get("/match/recent/user/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 });
// }
// }
// renderRentals() {
// 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>
// );
// }
rentalsCards() {
return this.state.rentals.map((rental) => {
return (<RentalInfoCard key={rental.id} rental={rental}></RentalInfoCard>);
});
}
render() {
return (
<div className="page-root">
<React.Fragment>
<h1></h1>
<InputGroup className="w-50">
<FormControl
placeholder="Search for Rentals"
aria-label="Search Bar"
aria-describedby="basic-addon2"
/>
<Button variant="outline-secondary" id="button-addon2">
Search
</Button>
</InputGroup>
<div className="p-4">
<h2>Available Rentals</h2>
{this.rentalsCards()}
</div>
</React.Fragment>
</div>
);
}
}