import axios from 'axios';
import PropTypes from 'prop-types';
import React from 'react';
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Col, Modal, Row } from 'react-bootstrap';
import { withTranslation } from 'react-i18next';
import toastr from 'toastr';
+import DiscordForm from './DiscordForm';
import DiscordSelect from '../common/DiscordSelect';
import Icon from '../common/Icon';
import ToggleSwitch from '../common/ToggleSwitch';
+import Tournament from '../../helpers/Tournament';
import i18n from '../../i18n';
const open = async tournament => {
}
};
+const inviteUrl = 'https://discordapp.com/oauth2/authorize?client_id=951113702839549982&scope=bot';
+
const SettingsDialog = ({
onHide,
show,
tournament,
}) =>
-<Modal className="settings-dialog" onHide={onHide} show={show}>
+<Modal
+ className="settings-dialog"
+ onHide={onHide}
+ show={show}
+ size={tournament.discord ? 'lg' : 'md'}
+>
<Modal.Header closeButton>
<Modal.Title>
{i18n.t('tournaments.settings')}
</Modal.Title>
</Modal.Header>
<Modal.Body>
- <div className="d-flex align-items-center justify-content-between mb-3">
- <span>{i18n.t('tournaments.open')}</span>
- <ToggleSwitch
- onChange={({ target: { value } }) => value ? open(tournament) : close(tournament)}
- value={tournament.accept_applications}
- />
- </div>
- <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>
+ <Row>
+ <Col sm={tournament.discord ? 6 : 12}>
+ {Tournament.hasSignup(tournament) ?
+ <div className="d-flex align-items-center justify-content-between mb-3">
+ <span>{i18n.t('tournaments.open')}</span>
+ <ToggleSwitch
+ onChange={({ target: { value } }) => value
+ ? open(tournament) : close(tournament)}
+ value={tournament.accept_applications}
+ />
+ </div>
+ : null}
+ <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>
+ {!tournament.discord ?
+ <div>
+ <Button
+ href={inviteUrl}
+ target="_blank"
+ variant="discord"
+ >
+ <Icon.DISCORD />
+ {' '}
+ {i18n.t('tournaments.inviteBot')}
+ </Button>
+ </div>
+ : null}
+ </div>
+ <DiscordSelect
+ onChange={({ target: { value } }) => setDiscord(tournament, value)}
+ value={tournament.discord}
+ />
</div>
- </div>
- <DiscordSelect
- onChange={({ target: { value } }) => setDiscord(tournament, value)}
- value={tournament.discord}
- />
- </div>
+ </Col>
+ {tournament.discord ?
+ <Col sm={6}>
+ <DiscordForm tournament={tournament} />
+ </Col>
+ : null}
+ </Row>
</Modal.Body>
<Modal.Footer>
<Button onClick={onHide} variant="secondary">