Welcome page now shows current matches.

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

@@ -1,10 +1,25 @@
 import React from "react";
 import { apiClient } from "../utils/httpClients";
 import HomeCarousel from "../components/HomeCarousel";
+import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
 export default class Welcome extends React.Component {
     constructor(props) {
         super(props);
-        this.recentMatchesRequest = apiClient.get("/match/recent/15");
+        this.state = {
+            displayedMatches: [],
+        };
+    }
+
+    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 });
+        }
     }
 
     render() {
@@ -19,6 +34,7 @@ export default class Welcome extends React.Component {
                 <hr />
                 <div className="p-4">
                     <h2>Available Matches</h2>
+                    <MatchInfoCardDisplay recommendedmatches={this.state.displayedMatches} />
                 </div>
             </div>
         );