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 ChatSettingsForm from './ChatSettingsForm';
8 import ChannelSelect from '../common/ChannelSelect';
9 import ToggleSwitch from '../common/ToggleSwitch';
11 const Controls = () => {
12 const [channel, setChannel] = React.useState(null);
13 const [chatText, setChatText] = React.useState('');
15 const { t } = useTranslation();
17 const chat = React.useCallback(async (text, bot_nick) => {
19 await axios.post(`/api/channels/${channel.id}/chat`, {
23 toastr.success(t('twitchBot.chatSuccess'));
25 toastr.error(t('twitchBot.chatError'));
27 }, [channel, chatText, t]);
29 const join = React.useCallback(async (bot_nick) => {
31 const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick });
33 toastr.success(t('twitchBot.joinSuccess'));
35 toastr.error(t('twitchBot.joinError'));
39 const part = React.useCallback(async (bot_nick) => {
41 const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick });
43 toastr.success(t('twitchBot.partSuccess'));
45 toastr.error(t('twitchBot.partError'));
49 const saveChatSettings = React.useCallback(async (values) => {
51 const rsp = await axios.post(`/api/channels/${channel.id}/chat-settings`, values);
53 toastr.success(t('twitchBot.saveSuccess'));
55 toastr.error(t('twitchBot.saveError'));
60 <Row className="mb-4">
61 <Form.Group as={Col} md={6}>
62 <Form.Label>{t('twitchBot.channel')}</Form.Label>
67 onChange={({ channel }) => { setChannel(channel); }}
68 value={channel ? channel.id : ''}
72 <Form.Group as={Col} md={3}>
73 <Form.Label>{t('twitchBot.joinApp')}</Form.Label>
77 onChange={({ target: { value } }) => {
88 <Form.Group as={Col} md={3}>
89 <Form.Label>{t('twitchBot.joinChat')}</Form.Label>
93 onChange={({ target: { value } }) => {
108 <Form.Group as={Col} md={6}>
109 <Form.Label>{t('twitchBot.chat')}</Form.Label>
112 onChange={({ target: { value } }) => {
117 <div className="button-bar">
120 disabled={!chatText || !channel.join}
122 if (chatText) chat(chatText, 'localhorsttv');
126 {t('twitchBot.sendApp')}
130 disabled={!chatText || !channel.chat}
132 if (chatText) chat(chatText, 'horstiebot');
136 {t('twitchBot.sendChat')}
141 <h3>{t('twitchBot.chatSettings')}</h3>
142 <ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
146 <Alert variant="info">
147 {t('twitchBot.selectChannel')}
153 export default Controls;