tournament/guild connection

[alttp.git] / resources / js / components / tournament / SettingsDialog.js

diff --git a/resources/js/components/tournament/SettingsDialog.js b/resources/js/components/tournament/SettingsDialog.js
index 9cecb14a70dcfcfcdcb2c62798457fc052288968..995c07b8250ee4388a267b26bac67c0b0880ad62 100644 (file)
--- a/resources/js/components/tournament/SettingsDialog.js
+++ b/resources/js/components/tournament/SettingsDialog.js
@@ -5,6 +5,8 @@ import { Button, Modal } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import toastr from 'toastr';
 
+import DiscordSelect from '../common/DiscordSelect';
+import Icon from '../common/Icon';
 import ToggleSwitch from '../common/ToggleSwitch';
 import i18n from '../../i18n';
 
@@ -44,6 +46,15 @@ const unlock = async tournament => {
        }
 };
 
+const setDiscord = async (tournament, guild_id) => {
+       try {
+               await axios.post(`/api/tournaments/${tournament.id}/discord`, { guild_id });
+               toastr.success(i18n.t('tournaments.discordSuccess'));
+       } catch (e) {
+               toastr.error(i18n.t('tournaments.discordError'));
+       }
+};
+
 const SettingsDialog = ({
        onHide,
        show,
@@ -63,13 +74,33 @@ const SettingsDialog = ({
                                value={tournament.accept_applications}
                        />
                </div>
-               <div className="d-flex align-items-center justify-content-between">
+               <div className="d-flex align-items-center justify-content-between mb-3">
                        <span>{i18n.t('tournaments.locked')}</span>
                        <ToggleSwitch
                                onChange={({ target: { value } }) => value ? lock(tournament) : unlock(tournament)}
                                value={tournament.locked}
                        />
                </div>
+               <div className="d-flex align-items-center justify-content-between">
+                       <div>
+                               <p>{i18n.t('tournaments.discord')}</p>
+                               <div>
+                                       <Button
+                                               href="https://discordapp.com/oauth2/authorize?client_id=951113702839549982&scope=bot"
+                                               target="_blank"
+                                               variant="discord"
+                                       >
+                                               <Icon.DISCORD />
+                                               {' '}
+                                               {i18n.t('tournaments.inviteBot')}
+                                       </Button>
+                               </div>
+                       </div>
+                       <DiscordSelect
+                               onChange={({ target: { value } }) => setDiscord(tournament, value)}
+                               value={tournament.discord}
+                       />
+               </div>
        </Modal.Body>
        <Modal.Footer>
                <Button onClick={onHide} variant="secondary">
@@ -83,6 +114,7 @@ SettingsDialog.propTypes = {
        show: PropTypes.bool,
        tournament: PropTypes.shape({
                accept_applications: PropTypes.bool,
+               discord: PropTypes.string,
                locked: PropTypes.bool,
        }),
 };