1 import axios from 'axios';
2 import React from 'react';
3 import { Alert, Col, Form, Row } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5 import toastr from 'toastr';
7 import ChannelSelect from '../common/ChannelSelect';
8 import ToggleSwitch from '../common/ToggleSwitch';
10 const Controls = () => {
11 const [channel, setChannel] = React.useState(null);
13 const { t } = useTranslation();
15 const join = React.useCallback(async () => {
17 const rsp = await axios.post(`/api/channels/${channel.id}/join`);
19 toastr.success(t('twitchBot.joinSuccess'));
21 toastr.error(t('twitchBot.joinError'));
25 const part = React.useCallback(async () => {
27 const rsp = await axios.post(`/api/channels/${channel.id}/part`);
29 toastr.success(t('twitchBot.partSuccess'));
31 toastr.error(t('twitchBot.partError'));
36 <Row className="mb-4">
37 <Form.Group as={Col} md={6}>
38 <Form.Label>{t('twitchBot.channel')}</Form.Label>
43 onChange={({ channel }) => { setChannel(channel); }}
44 value={channel ? channel.id : ''}
48 <Form.Group as={Col} md={6}>
49 <Form.Label>{t('twitchBot.join')}</Form.Label>
53 onChange={({ target: { value } }) => {
69 <Alert variant="info">
70 {t('twitchBot.selectChannel')}
76 export default Controls;