application admin UI

[alttp.git] / resources / js / components / applications / Button.js

diff --git a/resources/js/components/applications/Button.js b/resources/js/components/applications/Button.js
new file mode 100644 (file)
index 0000000..415042b
--- /dev/null
+++ b/resources/js/components/applications/Button.js
@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { Badge, Button } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
+
+import Dialog from './Dialog';
+import Icon from '../common/Icon';
+import { mayHandleApplications } from '../../helpers/permissions';
+import { getPendingApplications } from '../../helpers/Tournament';
+import { withUser } from '../../helpers/UserContext';
+import i18n from '../../i18n';
+
+const ApplicationsButton = ({ tournament, user }) => {
+       const [showDialog, setShowDialog] = useState(false);
+
+       if (!user || !tournament.accept_applications || !mayHandleApplications(user, tournament)) {
+               return null;
+       }
+
+       const pending = getPendingApplications(tournament);
+
+       return <>
+               <Button
+                       onClick={() => setShowDialog(true)}
+                       title={i18n.t('tournaments.applications')}
+                       variant="primary"
+               >
+                       <Icon.APPLICATIONS title="" />
+                       {pending.length ?
+                               <>
+                                       {' '}
+                                       <Badge>{pending.length}</Badge>
+                               </>
+                       : null}
+               </Button>
+               <Dialog
+                       onHide={() => setShowDialog(false)}
+                       show={showDialog}
+                       tournament={tournament}
+               />
+       </>;
+};
+
+ApplicationsButton.propTypes = {
+       tournament: PropTypes.shape({
+               accept_applications: PropTypes.bool,
+               id: PropTypes.number,
+       }),
+       user: PropTypes.shape({
+       }),
+};
+
+export default withTranslation()(withUser(ApplicationsButton));