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);