show placements on user profile

[alttp.git] / resources / js / components / users / Profile.js

diff --git a/resources/js/components/users/Profile.js b/resources/js/components/users/Profile.js
index 10c70dbf92bb4037a8ae2dbc96ab2fae22829c6d..e2fe2e790be5e3739a52da8e266d0212b8937ac8 100644 (file)
--- a/resources/js/components/users/Profile.js
+++ b/resources/js/components/users/Profile.js
@@ -4,6 +4,7 @@ import { Button, Col, Container, Row } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
 import Box from './Box';
+import Records from './Records';
 import EditStreamLinkButton from './EditStreamLinkButton';
 import Participation from './Participation';
 import Icon from '../common/Icon';
@@ -12,11 +13,11 @@ import i18n from '../../i18n';
 const Profile = ({ user }) => <Container>
        <h1>{user.username}</h1>
        <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 ?
@@ -36,7 +37,23 @@ const Profile = ({ user }) => <Container>
                                <EditStreamLinkButton user={user} />
                        </p>
                </Col>
-               <Col md={12}>
+               <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>
@@ -47,7 +64,13 @@ Profile.propTypes = {
        user: PropTypes.shape({
                participation: PropTypes.arrayOf(PropTypes.shape({
                })),
+               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,
        }),
 };