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