From 8f46ad77b8c5aab43228124c852da619f66e5867 Mon Sep 17 00:00:00 2001 From: Piyush Sharma Date: Tue, 5 Apr 2022 20:17:50 -0400 Subject: [PATCH] Added cards and scroll styling --- .../src/components/MatchInfoCardDisplay.js | 2 +- .../client/src/components/SportInfoCard.js | 26 +++++++++ .../src/components/SportInfoCardDisplay.js | 24 +++++++++ sports-matcher/client/src/pages/Dashboard.js | 53 +++++++++++-------- .../src/styles/MatchInfoCardDisplay.css | 4 ++ 5 files changed, 85 insertions(+), 24 deletions(-) create mode 100644 sports-matcher/client/src/components/SportInfoCard.js create mode 100644 sports-matcher/client/src/components/SportInfoCardDisplay.js create mode 100644 sports-matcher/client/src/styles/MatchInfoCardDisplay.css 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