]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/users/Participation.js
show tournament participation in profile
[alttp.git] / resources / js / components / users / Participation.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Alert, Button } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
5 import { useNavigate } from 'react-router-dom';
6
7 import i18n from '../../i18n';
8
9 const Participation = ({ user }) => {
10         const navigate = useNavigate();
11
12         if (!user || !user.participation || !user.participation.length) {
13                 return <Alert variant="info">
14                         {i18n.t('users.participationEmpty')}
15                 </Alert>;
16         }
17         return <div className="participation">
18                 {user.participation.map(p => <div key={p.id}>
19                         <Button
20                                 onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
21                                 variant="link"
22                         >
23                                 {p.tournament.title}
24                         </Button>
25                 </div>)}
26         </div>;
27 };
28
29 Participation.propTypes = {
30         user: PropTypes.shape({
31                 participation: PropTypes.arrayOf(PropTypes.shape({
32                         id: PropTypes.number,
33                 })),
34         }),
35 };
36
37 export default withTranslation()(Participation);