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
Download Patch File Download Diff File Expand all files Collapse all files

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