Updated Dashboard

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

@@ -2,22 +2,52 @@ 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");
-        return user.firstName;
+        let tags = document.getElementsByTagName("h1");
+        tags[0].innerHTML = user.firstName;
     }
     render() {
         return(
             <React.Fragment>
-                <h1>Welcome {this.getFirstName()}</h1>
+                <h1></h1>
                 <InputGroup className="w-50">
                     <FormControl
                         placeholder="Search for Matches"
@@ -28,8 +58,19 @@ export default class Dashboard extends React.Component{
                 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>
-            
         );
     }
 }