From a01b9a0f48c8a9bd3884e80d8bf7ab5e23cf7274 Mon Sep 17 00:00:00 2001
From: Sahni-Arjun <arjun.sahni@mail.utoronto.ca>
Date: Thu, 7 Apr 2022 22:16:48 -0400
Subject: [PATCH] added rentals page

---
 sports-matcher/client/src/Layout.js           |  2 +
 .../client/src/components/RentalInfoCard.js   | 31 +++++++
 sports-matcher/client/src/pages/Rentals.js    | 89 +++++++++++++++++++
 3 files changed, 122 insertions(+)
 create mode 100644 sports-matcher/client/src/components/RentalInfoCard.js
 create mode 100644 sports-matcher/client/src/pages/Rentals.js

diff --git a/sports-matcher/client/src/Layout.js b/sports-matcher/client/src/Layout.js
index 612e2c8..908c098 100644
--- a/sports-matcher/client/src/Layout.js
+++ b/sports-matcher/client/src/Layout.js
@@ -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>
diff --git a/sports-matcher/client/src/components/RentalInfoCard.js b/sports-matcher/client/src/components/RentalInfoCard.js
new file mode 100644
index 0000000..f31eff6
--- /dev/null
+++ b/sports-matcher/client/src/components/RentalInfoCard.js
@@ -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,
+};
\ No newline at end of file
diff --git a/sports-matcher/client/src/pages/Rentals.js b/sports-matcher/client/src/pages/Rentals.js
new file mode 100644
index 0000000..abfe5ad
--- /dev/null
+++ b/sports-matcher/client/src/pages/Rentals.js
@@ -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>
+        );
+    }
+}
\ No newline at end of file