import PropTypes from 'prop-types';
import React from 'react';
-import { Button, Col, Container, Row } from 'react-bootstrap';
+import { Alert, Button, Col, Container, Row } from 'react-bootstrap';
import { withTranslation } from 'react-i18next';
import Box from './Box';
+import Records from './Records';
+import EditNicknameButton from './EditNicknameButton';
import EditStreamLinkButton from './EditStreamLinkButton';
+import Participation from './Participation';
import Icon from '../common/Icon';
import i18n from '../../i18n';
const Profile = ({ user }) => <Container>
- <h1>{user.username}</h1>
+ <h1>
+ {user.nickname || user.username}
+ {' '}
+ <EditNicknameButton user={user} />
+ </h1>
+ {user.random_quote && user.random_quote.comment ?
+ <Alert className="quote-alert" variant="dark">
+ <blockquote className="blockquote mb-0">
+ {user.random_quote.comment}
+ </blockquote>
+ </Alert>
+ : null}
<Row>
- <Col md={6}>
+ <Col md={6} className="mb-5">
<h2>{i18n.t('users.discordTag')}</h2>
<Box discriminator user={user} />
</Col>
- <Col md={6}>
+ <Col md={6} className="mb-5">
<h2>{i18n.t('users.streamLink')}</h2>
<p>
{user.stream_link ?
<EditStreamLinkButton user={user} />
</p>
</Col>
+ <Col md={6} className="mb-5">
+ <h2>{i18n.t('users.tournamentRecords')}</h2>
+ <Records
+ first={user.tournament_first_count}
+ second={user.tournament_second_count}
+ third={user.tournament_third_count}
+ />
+ </Col>
+ <Col md={6} className="mb-5">
+ <h2>{i18n.t('users.roundRecords')}</h2>
+ <Records
+ first={user.round_first_count}
+ second={user.round_second_count}
+ third={user.round_third_count}
+ />
+ </Col>
+ <Col md={12} className="mb-5">
+ <h2>{i18n.t('users.tournaments')}</h2>
+ <Participation user={user} />
+ </Col>
</Row>
</Container>;
Profile.propTypes = {
user: PropTypes.shape({
+ nickname: PropTypes.string,
+ participation: PropTypes.arrayOf(PropTypes.shape({
+ })),
+ random_quote: PropTypes.shape({
+ comment: PropTypes.string,
+ }),
+ round_first_count: PropTypes.number,
+ round_second_count: PropTypes.number,
+ round_third_count: PropTypes.number,
stream_link: PropTypes.string,
+ tournament_first_count: PropTypes.number,
+ tournament_second_count: PropTypes.number,
+ tournament_third_count: PropTypes.number,
username: PropTypes.string,
}),
};