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} className="mb-5">
<h2>{i18n.t('users.discordTag')}</h2>
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,