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