resources/js/components/tournament/SettingsDialog.js

   1 import axios from 'axios';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import { Button, Col, Modal, Row } from 'react-bootstrap';
   5 import { withTranslation } from 'react-i18next';
   6 import toastr from 'toastr';
   7
   8 import DiscordForm from './DiscordForm';
   9 import DiscordSelect from '../common/DiscordSelect';
  10 import Icon from '../common/Icon';
  11 import ToggleSwitch from '../common/ToggleSwitch';
  12 import i18n from '../../i18n';
  13
  14 const open = async tournament => {
  15         try {
  16                 await axios.post(`/api/tournaments/${tournament.id}/open`);
  17                 toastr.success(i18n.t('tournaments.openSuccess'));
  18         } catch (e) {
  19                 toastr.error(i18n.t('tournaments.openError'));
  20         }
  21 };
  22
  23 const close = async tournament => {
  24         try {
  25                 await axios.post(`/api/tournaments/${tournament.id}/close`);
  26                 toastr.success(i18n.t('tournaments.closeSuccess'));
  27         } catch (e) {
  28                 toastr.error(i18n.t('tournaments.closeError'));
  29         }
  30 };
  31
  32 const lock = async tournament => {
  33         try {
  34                 await axios.post(`/api/tournaments/${tournament.id}/lock`);
  35                 toastr.success(i18n.t('tournaments.lockSuccess'));
  36         } catch (e) {
  37                 toastr.error(i18n.t('tournaments.lockError'));
  38         }
  39 };
  40
  41 const unlock = async tournament => {
  42         try {
  43                 await axios.post(`/api/tournaments/${tournament.id}/unlock`);
  44                 toastr.success(i18n.t('tournaments.unlockSuccess'));
  45         } catch (e) {
  46                 toastr.error(i18n.t('tournaments.unlockError'));
  47         }
  48 };
  49
  50 const setDiscord = async (tournament, guild_id) => {
  51         try {
  52                 await axios.post(`/api/tournaments/${tournament.id}/discord`, { guild_id });
  53                 toastr.success(i18n.t('tournaments.discordSuccess'));
  54         } catch (e) {
  55                 toastr.error(i18n.t('tournaments.discordError'));
  56         }
  57 };
  58
  59 const inviteUrl = 'https://discordapp.com/oauth2/authorize?client_id=951113702839549982&scope=bot';
  60
  61 const SettingsDialog = ({
  62         onHide,
  63         show,
  64         tournament,
  65 }) =>
  66 <Modal
  67         className="settings-dialog"
  68         onHide={onHide}
  69         show={show}
  70         size={tournament.discord ? 'lg' : 'md'}
  71 >
  72         <Modal.Header closeButton>
  73                 <Modal.Title>
  74                         {i18n.t('tournaments.settings')}
  75                 </Modal.Title>
  76         </Modal.Header>
  77         <Modal.Body>
  78                 <Row>
  79                         <Col sm={tournament.discord ? 6 : 12}>
  80                                 <div className="d-flex align-items-center justify-content-between mb-3">
  81                                         <span>{i18n.t('tournaments.open')}</span>
  82                                         <ToggleSwitch
  83                                                 onChange={({ target: { value } }) => value
  84                                                         ? open(tournament) : close(tournament)}
  85                                                 value={tournament.accept_applications}
  86                                         />
  87                                 </div>
  88                                 <div className="d-flex align-items-center justify-content-between mb-3">
  89                                         <span>{i18n.t('tournaments.locked')}</span>
  90                                         <ToggleSwitch
  91                                                 onChange={({ target: { value } }) => value
  92                                                         ? lock(tournament) : unlock(tournament)}
  93                                                 value={tournament.locked}
  94                                         />
  95                                 </div>
  96                                 <div className="d-flex align-items-center justify-content-between">
  97                                         <div>
  98                                                 <p>{i18n.t('tournaments.discord')}</p>
  99                                                 {!tournament.discord ?
 100                                                         <div>
 101                                                                 <Button
 102                                                                         href={inviteUrl}
 103                                                                         target="_blank"
 104                                                                         variant="discord"
 105                                                                 >
 106                                                                         <Icon.DISCORD />
 107                                                                         {' '}
 108                                                                         {i18n.t('tournaments.inviteBot')}
 109                                                                 </Button>
 110                                                         </div>
 111                                                 : null}
 112                                         </div>
 113                                         <DiscordSelect
 114                                                 onChange={({ target: { value } }) => setDiscord(tournament, value)}
 115                                                 value={tournament.discord}
 116                                         />
 117                                 </div>
 118                         </Col>
 119                         {tournament.discord ?
 120                                 <Col sm={6}>
 121                                         <DiscordForm tournament={tournament} />
 122                                 </Col>
 123                         : null}
 124                 </Row>
 125         </Modal.Body>
 126         <Modal.Footer>
 127                 <Button onClick={onHide} variant="secondary">
 128                         {i18n.t('button.close')}
 129                 </Button>
 130         </Modal.Footer>
 131 </Modal>;
 132
 133 SettingsDialog.propTypes = {
 134         onHide: PropTypes.func,
 135         show: PropTypes.bool,
 136         tournament: PropTypes.shape({
 137                 accept_applications: PropTypes.bool,
 138                 discord: PropTypes.string,
 139                 locked: PropTypes.bool,
 140         }),
 141 };
 142
 143 export default withTranslation()(SettingsDialog);