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