From f38867598e414bc879db241eed009277e9052e19 Mon Sep 17 00:00:00 2001
From: Piyush Sharma <piyush19sha@gmail.com>
Date: Tue, 5 Apr 2022 02:19:08 -0400
Subject: [PATCH 1/4] Setup Dashboard Page

---
 sports-matcher/client/src/pages/Dashboard.js | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 sports-matcher/client/src/pages/Dashboard.js

diff --git a/sports-matcher/client/src/pages/Dashboard.js b/sports-matcher/client/src/pages/Dashboard.js
new file mode 100644
index 0000000..c0af309
--- /dev/null
+++ b/sports-matcher/client/src/pages/Dashboard.js
@@ -0,0 +1,11 @@
+import React from "react";
+// import { apiClient } from "../utils/httpClients";
+
+export default class Dashboard extends React.Component{
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return(<h1>Dashboard</h1>);
+    }
+}
\ No newline at end of file

From 2831e2a39e73661f28fae0595a1ce7eb7f2ddf3d Mon Sep 17 00:00:00 2001
From: Piyush Sharma <piyush19sha@gmail.com>
Date: Tue, 5 Apr 2022 02:19:17 -0400
Subject: [PATCH 2/4] Added route

---
 sports-matcher/client/src/Layout.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/sports-matcher/client/src/Layout.js b/sports-matcher/client/src/Layout.js
index 3fe80fb..8f4d2ef 100644
--- a/sports-matcher/client/src/Layout.js
+++ b/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>

From 879cbac17f80fa550ccc7bb32a07f544454636df Mon Sep 17 00:00:00 2001
From: Piyush Sharma <piyush19sha@gmail.com>
Date: Tue, 5 Apr 2022 13:16:09 -0400
Subject: [PATCH 3/4] Added Dashboard

---
 sports-matcher/client/src/pages/Dashboard.js  | 28 +++++++++++++++++--
 .../client/src/styles/Dashboard.css           |  5 ++++
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 sports-matcher/client/src/styles/Dashboard.css

diff --git a/sports-matcher/client/src/pages/Dashboard.js b/sports-matcher/client/src/pages/Dashboard.js
index c0af309..15338e6 100644
--- a/sports-matcher/client/src/pages/Dashboard.js
+++ b/sports-matcher/client/src/pages/Dashboard.js
@@ -1,11 +1,35 @@
 import React from "react";
-// import { apiClient } from "../utils/httpClients";
+import { Button, InputGroup, FormControl } from "react-bootstrap";
+import "../styles/Dashboard.css";
+import { apiClient } from "../utils/httpClients";
 
 export default class Dashboard extends React.Component{
     constructor(props) {
         super(props);
+        this.state = {
+            displayedMatches: [],
+        };
+    }
+    async getFirstName(){
+        let user = await apiClient.get("/user");
+        return user.firstName;
     }
     render() {
-        return(<h1>Dashboard</h1>);
+        return(
+            <React.Fragment>
+                <h1>Welcome {this.getFirstName()}</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>
+            </React.Fragment>
+            
+        );
     }
 }
\ No newline at end of file
diff --git a/sports-matcher/client/src/styles/Dashboard.css b/sports-matcher/client/src/styles/Dashboard.css
new file mode 100644
index 0000000..f9ee5e2
--- /dev/null
+++ b/sports-matcher/client/src/styles/Dashboard.css
@@ -0,0 +1,5 @@
+.w-50{
+    margin-top: 5%;
+    margin-left: 25%;
+    margin-right: 25%;
+}
\ No newline at end of file

From d5a11d214cb7fa2ed4dd4568f20326d9ce07fa5f Mon Sep 17 00:00:00 2001
From: Piyush Sharma <piyush19sha@gmail.com>
Date: Tue, 5 Apr 2022 14:51:15 -0400
Subject: [PATCH 4/4] Updated Dashboard

---
 sports-matcher/client/src/pages/Dashboard.js | 49 ++++++++++++++++++--
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/sports-matcher/client/src/pages/Dashboard.js b/sports-matcher/client/src/pages/Dashboard.js
index 15338e6..1795892 100644
--- a/sports-matcher/client/src/pages/Dashboard.js
+++ b/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>
-            
         );
     }
 }
\ No newline at end of file