resources/js/components/users/Participation.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Alert, Button } 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 <div className="participation">
  18                 {user.participation.map(p => <div key={p.id}>
  19                         <Button
  20                                 onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
  21                                 variant="link"
  22                         >
  23                                 {p.tournament.title}
  24                         </Button>
  25                 </div>)}
  26         </div>;
  27 };
  28
  29 Participation.propTypes = {
  30         user: PropTypes.shape({
  31                 participation: PropTypes.arrayOf(PropTypes.shape({
  32                         id: PropTypes.number,
  33                 })),
  34         }),
  35 };
  36
  37 export default withTranslation()(Participation);