diff --git a/sports-matcher/client/src/components/MatchInfoCardDisplay.js b/sports-matcher/client/src/components/MatchInfoCardDisplay.js
index 3dd3f7b..cb19099 100644
--- a/sports-matcher/client/src/components/MatchInfoCardDisplay.js
+++ b/sports-matcher/client/src/components/MatchInfoCardDisplay.js
@@ -1,7 +1,7 @@
import React from "react";
import propTypes from "prop-types";
import MatchInfoCard from "./MatchInfoCard";
-
+import "../styles/MatchInfoCardDisplay.css";
export default class MatchInfoCardDisplay extends React.Component {
constructor(props) {
super(props);
diff --git a/sports-matcher/client/src/components/SportInfoCard.js b/sports-matcher/client/src/components/SportInfoCard.js
new file mode 100644
index 0000000..5995d4d
--- /dev/null
+++ b/sports-matcher/client/src/components/SportInfoCard.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { Card } from "react-bootstrap";
+import propTypes from "prop-types";
+export default class SportInfoCard extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+
+
+ {this.props.sport.name}
+ {this.props.sport.minPlayers.toString()}
+
+ {this.props.sport.description}
+
+
+
+ );
+ }
+}
+
+SportInfoCard.propTypes = {
+ sport: propTypes.object,
+};
\ No newline at end of file
diff --git a/sports-matcher/client/src/components/SportInfoCardDisplay.js b/sports-matcher/client/src/components/SportInfoCardDisplay.js
new file mode 100644
index 0000000..649572f
--- /dev/null
+++ b/sports-matcher/client/src/components/SportInfoCardDisplay.js
@@ -0,0 +1,24 @@
+import React from "react";
+import propTypes from "prop-types";
+import SportInfoCard from "./SportInfoCard";
+import "../styles/MatchInfoCardDisplay.css";
+export default class SportInfoCardDisplay extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ let sports = null;
+ if(this.props.recommendedsports && this.props.recommendedsports.length > 0) {
+ sports = this.props.recommendedsports.map((sport) => );
+ }
+ return (
+
+ {sports}
+
+ );
+ }
+}
+
+SportInfoCardDisplay.propTypes = {
+ recommendedsports: propTypes.array,
+};
\ No newline at end of file
diff --git a/sports-matcher/client/src/pages/Dashboard.js b/sports-matcher/client/src/pages/Dashboard.js
index 0d6b3a6..f3689ca 100644
--- a/sports-matcher/client/src/pages/Dashboard.js
+++ b/sports-matcher/client/src/pages/Dashboard.js
@@ -3,7 +3,8 @@ import { Button, InputGroup, FormControl } from "react-bootstrap";
import "../styles/Dashboard.css";
import { apiClient } from "../utils/httpClients.js";
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
-import { needUser } from "../utils/routing.js";
+import SportInfoCardDisplay from "../components/SportInfoCardDisplay";
+// import { needUser } from "../utils/routing.js";
export default class Dashboard extends React.Component {
constructor(props) {
super(props);
@@ -13,11 +14,16 @@ export default class Dashboard extends React.Component {
displayedEquipment: [],
user: null
};
- this.getFirstName();
+ // this.getFirstName();
}
+ // async componentDidMount() {
+ // this.setState({ user: await needUser() }); // needUser says this page needs a user, and therefore, if there isn't a user, get them to login first. It returns the authenticated user.
+ // this.setState({ displayedMatches: await this.latestMatches() });
+ // }
async componentDidMount() {
- this.setState({ user: await needUser() }); // needUser says this page needs a user, and therefore, if there isn't a user, get them to login first. It returns the authenticated user.
- this.setState({ displayedMatches: await this.latestMatches() });
+ await this.latestMatches();
+ await this.availableSports();
+ // await this.availableEquipment();
}
async latestMatches() {
let recentMatchesRes = await apiClient.get("/match/recent/15");
@@ -26,26 +32,26 @@ export default class Dashboard extends React.Component {
}
}
- async availableMatches() {
- let availableMatchesRes = await apiClient.get("/sports");
- if (availableMatchesRes.status === 200) {
- this.setState({ displayedSports: availableMatchesRes.data.recent });
+ async availableSports() {
+ let availableSportsRes = await apiClient.get("/sport");
+ if (availableSportsRes.status === 200) {
+ this.setState({ displayedSports: availableSportsRes.data.recent });
}
}
- async availableEquipment() {
- let availableEquipmentRes = await apiClient.get("/rentals");
- if (availableEquipmentRes.status === 200) {
- this.setState({ displayedEquipment: availableEquipmentRes.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;
- }
+ // 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 (
@@ -66,12 +72,13 @@ export default class Dashboard extends React.Component {
Available Sports
-
+
-
+ {/*
Available Equipment
-
+
*/}
+
);
}
diff --git a/sports-matcher/client/src/styles/MatchInfoCardDisplay.css b/sports-matcher/client/src/styles/MatchInfoCardDisplay.css
new file mode 100644
index 0000000..d6f7190
--- /dev/null
+++ b/sports-matcher/client/src/styles/MatchInfoCardDisplay.css
@@ -0,0 +1,4 @@
+.horizontal-scroller{
+ display: flex;
+ overflow-x: auto;
+}
\ No newline at end of file