36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
import React from "react";
|
|
import { Button, Card } from "react-bootstrap";
|
|
import propTypes from "prop-types";
|
|
import { grammaticalListString } from "../utils/strings";
|
|
export default class GameInfoCard extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
getParticipants() {
|
|
let participants = [];
|
|
this.props.match.registeredUsers.array.forEach(user => {
|
|
participants.push(user.firstName);
|
|
});
|
|
return participants;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Card style={{ width: "20rem" }}>
|
|
<Card.Body>
|
|
<Card.Title>{this.props.match.sport}</Card.Title>
|
|
<Card.Subtitle className="mb-2 text-muted">{this.props.match.sport}</Card.Subtitle>
|
|
<Card.Text>
|
|
Join <strong>{grammaticalListString(this.getParticipants(), 4)}</strong> to play a few matches of <strong>{this.props.match.sport}</strong> at <strong>{this.props.match.location}</strong> on <strong>{this.props.match.dateTime.toLocaleDateString("en-US")}</strong>!
|
|
</Card.Text>
|
|
<Button variant="primary">Join!</Button>
|
|
</Card.Body>
|
|
</Card>
|
|
);
|
|
}
|
|
}
|
|
|
|
GameInfoCard.propTypes = {
|
|
match: propTypes.object,
|
|
}; |