resources/js/components/applications/Button.js

   1 import PropTypes from 'prop-types';
   2 import React, { useState } from 'react';
   3 import { Badge, Button } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import Dialog from './Dialog';
   7 import Icon from '../common/Icon';
   8 import { mayHandleApplications } from '../../helpers/permissions';
   9 import { getPendingApplications } from '../../helpers/Tournament';
  10 import { withUser } from '../../helpers/UserContext';
  11 import i18n from '../../i18n';
  12
  13 const ApplicationsButton = ({ tournament, user }) => {
  14         const [showDialog, setShowDialog] = useState(false);
  15
  16         if (!user || !tournament.accept_applications || !mayHandleApplications(user, tournament)) {
  17                 return null;
  18         }
  19
  20         const pending = getPendingApplications(tournament);
  21
  22         return <>
  23                 <Button
  24                         onClick={() => setShowDialog(true)}
  25                         title={i18n.t('tournaments.applications')}
  26                         variant="primary"
  27                 >
  28                         <Icon.APPLICATIONS title="" />
  29                         {pending.length ?
  30                                 <>
  31                                         {' '}
  32                                         <Badge>{pending.length}</Badge>
  33                                 </>
  34                         : null}
  35                 </Button>
  36                 <Dialog
  37                         onHide={() => setShowDialog(false)}
  38                         show={showDialog}
  39                         tournament={tournament}
  40                 />
  41         </>;
  42 };
  43
  44 ApplicationsButton.propTypes = {
  45         tournament: PropTypes.shape({
  46                 accept_applications: PropTypes.bool,
  47                 id: PropTypes.number,
  48         }),
  49         user: PropTypes.shape({
  50         }),
  51 };
  52
  53 export default withTranslation()(withUser(ApplicationsButton));