import PropTypes from 'prop-types';
import React from 'react';
-import { Alert, Button } from 'react-bootstrap';
+import { Alert, Button, Table } from 'react-bootstrap';
import { withTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
+import Icon from '../common/Icon';
+import { isRunner } from '../../helpers/Participant';
import i18n from '../../i18n';
+const getIcon = participant => {
+ if (!isRunner(participant)) {
+ return '—';
+ }
+ if (participant.placement === 1) {
+ return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
+ }
+ if (participant.placement === 2) {
+ return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
+ }
+ if (participant.placement === 3) {
+ return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
+ }
+ return participant.placement;
+};
+
const Participation = ({ user }) => {
const navigate = useNavigate();
{i18n.t('users.participationEmpty')}
</Alert>;
}
- return <div className="participation">
- {user.participation.map(p => <div key={p.id}>
- <Button
- onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
- variant="link"
- >
- {p.tournament.title}
- </Button>
- </div>)}
- </div>;
+ return <Table className="participation align-middle">
+ <thead>
+ <tr>
+ <th>{i18n.t('participants.tournament')}</th>
+ <th>{i18n.t('participants.placement')}</th>
+ <th>{i18n.t('participants.roles')}</th>
+ </tr>
+ </thead>
+ <tbody>
+ {user.participation.map(p => <tr key={p.id}>
+ <td>
+ <Button
+ onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
+ variant="link"
+ >
+ {p.tournament.title}
+ </Button>
+ </td>
+ <td>
+ {getIcon(p)}
+ {!p.tournament.locked && isRunner(p) ?
+ <span title={i18n.t('participants.placementSubjectToChange')}> *</span>
+ : null}
+ {p.tournament.no_record ?
+ <span title={i18n.t('tournaments.noRecord')}> †</span>
+ : null}
+ </td>
+ <td>
+ {p.roles ? p.roles.map((role, index) =>
+ <span key={role}>
+ {index === 0 ? '' : ', '}
+ {i18n.t(`participants.roleNames.${role}`)}
+ </span>
+ ) : null}
+ </td>
+ </tr>)}
+ </tbody>
+ </Table>;
};
Participation.propTypes = {