resources/js/components/users/Profile.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Alert, Button, Col, Container, Row } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import Box from './Box';
   7 import Records from './Records';
   8 import EditNicknameButton from './EditNicknameButton';
   9 import EditStreamLinkButton from './EditStreamLinkButton';
  10 import Participation from './Participation';
  11 import Icon from '../common/Icon';
  12 import i18n from '../../i18n';
  13
  14 const Profile = ({ user }) => <Container>
  15         <h1>
  16                 {user.nickname || user.username}
  17                 {' '}
  18                 <EditNicknameButton user={user} />
  19         </h1>
  20         {user.random_quote && user.random_quote.comment ?
  21                 <Alert className="quote-alert" variant="dark">
  22                         <blockquote className="blockquote mb-0">
  23                                 {user.random_quote.comment}
  24                         </blockquote>
  25                 </Alert>
  26         : null}
  27         <Row>
  28                 <Col md={6} className="mb-5">
  29                         <h2>{i18n.t('users.discordTag')}</h2>
  30                         <Box discriminator user={user} />
  31                 </Col>
  32                 <Col md={6} className="mb-5">
  33                         <h2>{i18n.t('users.streamLink')}</h2>
  34                         <p>
  35                                 {user.stream_link ?
  36                                         <Button
  37                                                 href={user.stream_link}
  38                                                 target="_blank"
  39                                                 variant="outline-twitch"
  40                                         >
  41                                                 <Icon.STREAM />
  42                                                 {' '}
  43                                                 {user.stream_link}
  44                                         </Button>
  45                                 :
  46                                         i18n.t('users.noStream')
  47                                 }
  48                                 {' '}
  49                                 <EditStreamLinkButton user={user} />
  50                         </p>
  51                 </Col>
  52                 <Col md={6} className="mb-5">
  53                         <h2>{i18n.t('users.tournamentRecords')}</h2>
  54                         <Records
  55                                 first={user.tournament_first_count}
  56                                 second={user.tournament_second_count}
  57                                 third={user.tournament_third_count}
  58                         />
  59                 </Col>
  60                 <Col md={6} className="mb-5">
  61                         <h2>{i18n.t('users.roundRecords')}</h2>
  62                         <Records
  63                                 first={user.round_first_count}
  64                                 second={user.round_second_count}
  65                                 third={user.round_third_count}
  66                         />
  67                 </Col>
  68                 <Col md={12} className="mb-5">
  69                         <h2>{i18n.t('users.tournaments')}</h2>
  70                         <Participation user={user} />
  71                 </Col>
  72         </Row>
  73 </Container>;
  74
  75 Profile.propTypes = {
  76         user: PropTypes.shape({
  77                 nickname: PropTypes.string,
  78                 participation: PropTypes.arrayOf(PropTypes.shape({
  79                 })),
  80                 random_quote: PropTypes.shape({
  81                         comment: PropTypes.string,
  82                 }),
  83                 round_first_count: PropTypes.number,
  84                 round_second_count: PropTypes.number,
  85                 round_third_count: PropTypes.number,
  86                 stream_link: PropTypes.string,
  87                 tournament_first_count: PropTypes.number,
  88                 tournament_second_count: PropTypes.number,
  89                 tournament_third_count: PropTypes.number,
  90                 username: PropTypes.string,
  91         }),
  92 };
  93
  94 export default withTranslation()(Profile);