]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/users/Participation.js
server calculated scoring
[alttp.git] / resources / js / components / users / Participation.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Alert, Button, Table } 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 <Table className="participation">
18                 <thead>
19                         <tr>
20                                 <th>{i18n.t('participants.tournament')}</th>
21                                 <th>{i18n.t('participants.roles')}</th>
22                         </tr>
23                 </thead>
24                 <tbody>
25                 {user.participation.map(p => <tr key={p.id}>
26                         <td>
27                                 <Button
28                                         onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
29                                         variant="link"
30                                 >
31                                         {p.tournament.title}
32                                 </Button>
33                         </td>
34                         <td>
35                                 {p.roles ? p.roles.map((role, index) =>
36                                         <span key={role}>
37                                                 {index === 0 ? '' : ', '}
38                                                 {i18n.t(`participants.roleNames.${role}`)}
39                                         </span>
40                                 ) : null}
41                         </td>
42                 </tr>)}
43                 </tbody>
44         </Table>;
45 };
46
47 Participation.propTypes = {
48         user: PropTypes.shape({
49                 participation: PropTypes.arrayOf(PropTypes.shape({
50                         id: PropTypes.number,
51                 })),
52         }),
53 };
54
55 export default withTranslation()(Participation);