+ const [channel, setChannel] = React.useState(null);
+
+ const { t } = useTranslation();
+
+ const join = React.useCallback(async () => {
+ try {
+ const rsp = await axios.post(`/api/channels/${channel.id}/join`);
+ setChannel(rsp.data);
+ toastr.success(t('twitchBot.joinSuccess'));
+ } catch (e) {
+ toastr.error(t('twitchBot.joinError'));
+ }
+ }, [channel, t]);
+
+ const part = React.useCallback(async () => {
+ try {
+ const rsp = await axios.post(`/api/channels/${channel.id}/part`);
+ setChannel(rsp.data);
+ toastr.success(t('twitchBot.partSuccess'));
+ } catch (e) {
+ toastr.error(t('twitchBot.partError'));
+ }
+ }, [channel, t]);
+
+ return <>
+ <Row className="mb-4">
+ <Form.Group as={Col} md={6}>
+ <Form.Label>{t('twitchBot.channel')}</Form.Label>
+ <Form.Control
+ as={ChannelSelect}
+ joinable
+ manageable
+ onChange={({ channel }) => { setChannel(channel); }}
+ value={channel ? channel.id : ''}
+ />
+ </Form.Group>
+ {channel ?
+ <Form.Group as={Col} md={6}>
+ <Form.Label>{t('twitchBot.join')}</Form.Label>
+ <div>
+ <Form.Control
+ as={ToggleSwitch}
+ onChange={({ target: { value } }) => {
+ if (value) {
+ join();
+ } else {
+ part();
+ }
+ }}
+ value={channel.join}
+ />
+ </div>
+ </Form.Group>
+ : null}
+ </Row>
+ {channel ?
+ <div />
+ :
+ <Alert variant="info">
+ {t('twitchBot.selectChannel')}
+ </Alert>
+ }
+ </>;