]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/users/Participation.js
adlib chat
[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 Icon from '../common/Icon';
8 import { isRunner } from '../../helpers/Participant';
9 import i18n from '../../i18n';
10
11 const getIcon = participant => {
12         if (!isRunner(participant)) {
13                 return '—';
14         }
15         if (participant.placement === 1) {
16                 return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
17         }
18         if (participant.placement === 2) {
19                 return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
20         }
21         if (participant.placement === 3) {
22                 return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
23         }
24         return participant.placement;
25 };
26
27 const Participation = ({ user }) => {
28         const navigate = useNavigate();
29
30         if (!user || !user.participation || !user.participation.length) {
31                 return <Alert variant="info">
32                         {i18n.t('users.participationEmpty')}
33                 </Alert>;
34         }
35         return <Table className="participation align-middle">
36                 <thead>
37                         <tr>
38                                 <th>{i18n.t('participants.tournament')}</th>
39                                 <th>{i18n.t('participants.placement')}</th>
40                                 <th>{i18n.t('participants.roles')}</th>
41                         </tr>
42                 </thead>
43                 <tbody>
44                 {user.participation.map(p => <tr key={p.id}>
45                         <td>
46                                 <Button
47                                         onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
48                                         variant="link"
49                                 >
50                                         {p.tournament.title}
51                                 </Button>
52                         </td>
53                         <td>
54                                 {getIcon(p)}
55                         {!p.tournament.locked && isRunner(p) ?
56                                 <span title={i18n.t('participants.placementSubjectToChange')}> *</span>
57                         : null}
58                         {p.tournament.no_record ?
59                                 <span title={i18n.t('tournaments.noRecord')}> †</span>
60                         : null}
61                         </td>
62                         <td>
63                                 {p.roles ? p.roles.map((role, index) =>
64                                         <span key={role}>
65                                                 {index === 0 ? '' : ', '}
66                                                 {i18n.t(`participants.roleNames.${role}`)}
67                                         </span>
68                                 ) : null}
69                         </td>
70                 </tr>)}
71                 </tbody>
72         </Table>;
73 };
74
75 Participation.propTypes = {
76         user: PropTypes.shape({
77                 participation: PropTypes.arrayOf(PropTypes.shape({
78                         id: PropTypes.number,
79                 })),
80         }),
81 };
82
83 export default withTranslation()(Participation);