resources/js/components/users/Profile.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { 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         <Row>
  21                 <Col md={6} className="mb-5">
  22                         <h2>{i18n.t('users.discordTag')}</h2>
  23                         <Box discriminator user={user} />
  24                 </Col>
  25                 <Col md={6} className="mb-5">
  26                         <h2>{i18n.t('users.streamLink')}</h2>
  27                         <p>
  28                                 {user.stream_link ?
  29                                         <Button
  30                                                 href={user.stream_link}
  31                                                 target="_blank"
  32                                                 variant="outline-twitch"
  33                                         >
  34                                                 <Icon.STREAM />
  35                                                 {' '}
  36                                                 {user.stream_link}
  37                                         </Button>
  38                                 :
  39                                         i18n.t('users.noStream')
  40                                 }
  41                                 {' '}
  42                                 <EditStreamLinkButton user={user} />
  43                         </p>
  44                 </Col>
  45                 <Col md={6} className="mb-5">
  46                         <h2>{i18n.t('users.tournamentRecords')}</h2>
  47                         <Records
  48                                 first={user.tournament_first_count}
  49                                 second={user.tournament_second_count}
  50                                 third={user.tournament_third_count}
  51                         />
  52                 </Col>
  53                 <Col md={6} className="mb-5">
  54                         <h2>{i18n.t('users.roundRecords')}</h2>
  55                         <Records
  56                                 first={user.round_first_count}
  57                                 second={user.round_second_count}
  58                                 third={user.round_third_count}
  59                         />
  60                 </Col>
  61                 <Col md={12} className="mb-5">
  62                         <h2>{i18n.t('users.tournaments')}</h2>
  63                         <Participation user={user} />
  64                 </Col>
  65         </Row>
  66 </Container>;
  67
  68 Profile.propTypes = {
  69         user: PropTypes.shape({
  70                 nickname: PropTypes.string,
  71                 participation: PropTypes.arrayOf(PropTypes.shape({
  72                 })),
  73                 round_first_count: PropTypes.number,
  74                 round_second_count: PropTypes.number,
  75                 round_third_count: PropTypes.number,
  76                 stream_link: PropTypes.string,
  77                 tournament_first_count: PropTypes.number,
  78                 tournament_second_count: PropTypes.number,
  79                 tournament_third_count: PropTypes.number,
  80                 username: PropTypes.string,
  81         }),
  82 };
  83
  84 export default withTranslation()(Profile);