Merge pull request #7 from csc309-winter-2022/Dashboard

Dashboard

sports-matcher/client/src/Layout.js

@@ -7,6 +7,7 @@ import Navbar from "react-bootstrap/Navbar";
 import { Container, Nav, NavbarBrand } from "react-bootstrap";
 import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
 import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
+import Dashboard from "./pages/Dashboard";
 export default class Layout extends React.Component {
     render() {
         return (
@@ -28,8 +29,8 @@ export default class Layout extends React.Component {
                 </header>
                 <main>
                     <Routes>
-                        <Route path="/" element={<Welcome></Welcome>}>
-                        </Route>
+                        <Route path="/" element={<Welcome></Welcome>}></Route>
+                        <Route path="/Dashboard" element={<Dashboard></Dashboard>}></Route>
                     </Routes>
                 </main>
                 <footer>

sports-matcher/client/src/pages/Dashboard.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { Button, InputGroup, FormControl } from "react-bootstrap";
+import "../styles/Dashboard.css";
+import { apiClient } from "../utils/httpClients";
+import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
+export default class Dashboard extends React.Component{
+    constructor(props) {
+        super(props);
+        this.state = {
+            displayedMatches: [],
+            displayedSports: [],
+            displayedEquipment: []
+        };
+        this.getFirstName();
+    }
+    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 });
+        }
+    }
+
+    async availableMatches() {
+        let availableMatchesRes = await apiClient.get("/sports");
+        if (availableMatchesRes.status === 200) {
+            this.setState({ displayedSports: availableMatchesRes.data.recent });
+        }
+    }
+
+    async availableEquipment() {
+        let availableEquipmentRes = await apiClient.get("/rentals");
+        if (availableEquipmentRes.status === 200) {
+            this.setState({ displayedEquipment: availableEquipmentRes.data.recent });
+        }
+    }
+
+    async getFirstName(){
+        // let result = await apiClient.post("/user/login", {"email": "johndoe@gmail.com", "password": "csc309h1"}).then(apiClient.get("/user"));
+        let user = await apiClient.get("/user");
+        let tags = document.getElementsByTagName("h1");
+        tags[0].innerHTML = user.firstName;
+    }
+    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>
+                    <MatchInfoCardDisplay recommendedmatches={this.state.displayedSports} />
+                </div>
+                <div className="p-4">
+                    <h2>Available Equipment</h2>
+                    <MatchInfoCardDisplay recommendedmatches={this.state.displayedEquipment} />
+                </div>
+            </React.Fragment>
+        );
+    }
+}

sports-matcher/client/src/styles/Dashboard.css

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