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