1 import axios from 'axios';
2 import React from 'react';
3 import { Alert, Button, 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);
12 const [chatText, setChatText] = React.useState('');
14 const { t } = useTranslation();
16 const chat = React.useCallback(async text => {
18 await axios.post(`/api/channels/${channel.id}/chat`, {
21 toastr.success(t('twitchBot.chatSuccess'));
23 toastr.error(t('twitchBot.chatError'));
25 }, [channel, chatText, t]);
27 const join = React.useCallback(async () => {
29 const rsp = await axios.post(`/api/channels/${channel.id}/join`);
31 toastr.success(t('twitchBot.joinSuccess'));
33 toastr.error(t('twitchBot.joinError'));
37 const part = React.useCallback(async () => {
39 const rsp = await axios.post(`/api/channels/${channel.id}/part`);
41 toastr.success(t('twitchBot.partSuccess'));
43 toastr.error(t('twitchBot.partError'));
48 <Row className="mb-4">
49 <Form.Group as={Col} md={6}>
50 <Form.Label>{t('twitchBot.channel')}</Form.Label>
55 onChange={({ channel }) => { setChannel(channel); }}
56 value={channel ? channel.id : ''}
60 <Form.Group as={Col} md={6}>
61 <Form.Label>{t('twitchBot.join')}</Form.Label>
65 onChange={({ target: { value } }) => {
80 <Form.Group as={Col} md={6}>
81 <Form.Label>{t('twitchBot.chat')}</Form.Label>
84 onChange={({ target: { value } }) => {
93 if (chatText) chat(chatText);
102 <Alert variant="info">
103 {t('twitchBot.selectChannel')}
109 export default Controls;