added rentals page

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>

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,
+};

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