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 CommandDialog from './CommandDialog';
9 import Commands from './Commands';
10 import GuessingSettingsForm from './GuessingSettingsForm';
11 import ChannelSelect from '../common/ChannelSelect';
12 import ToggleSwitch from '../common/ToggleSwitch';
14 const Controls = () => {
15 const [channel, setChannel] = React.useState(null);
16 const [chatText, setChatText] = React.useState('');
17 const [editCommand, setEditCommand] = React.useState('');
18 const [editCommandSettings, setEditCommandSettings] = React.useState({});
19 const [showCommandDialog, setShowCommandDialog] = React.useState(false);
21 const { t } = useTranslation();
23 const chat = React.useCallback(async (text, bot_nick) => {
25 await axios.post(`/api/channels/${channel.id}/chat`, {
29 toastr.success(t('twitchBot.chatSuccess'));
31 toastr.error(t('twitchBot.chatError'));
33 }, [channel, chatText, t]);
35 const join = React.useCallback(async (bot_nick) => {
37 const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick });
39 toastr.success(t('twitchBot.joinSuccess'));
41 toastr.error(t('twitchBot.joinError'));
45 const part = React.useCallback(async (bot_nick) => {
47 const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick });
49 toastr.success(t('twitchBot.partSuccess'));
51 toastr.error(t('twitchBot.partError'));
55 const saveChatSettings = React.useCallback(async (values) => {
57 const rsp = await axios.post(`/api/channels/${channel.id}/chat-settings`, values);
59 toastr.success(t('twitchBot.saveSuccess'));
61 toastr.error(t('twitchBot.saveError'));
65 const onAddCommand = React.useCallback(() => {
67 setEditCommandSettings({});
68 setShowCommandDialog(true);
71 const onEditCommand = React.useCallback((name, settings) => {
73 setEditCommandSettings(settings);
74 setShowCommandDialog(true);
77 const onRemoveCommand = React.useCallback(async (name) => {
79 const rsp = await axios.delete(`/api/channels/${channel.id}/commands/${name}`);
81 toastr.success(t('twitchBot.saveSuccess'));
83 toastr.error(t('twitchBot.saveError'));
87 const saveCommand = React.useCallback(async (values) => {
89 const rsp = await axios.put(
90 `/api/channels/${channel.id}/commands/${values.name}`,
94 setShowCommandDialog(false);
96 setEditCommandSettings({});
97 toastr.success(t('twitchBot.saveSuccess'));
99 toastr.error(t('twitchBot.saveError'));
104 const saveGuessingGame = React.useCallback(async (values) => {
106 const rsp = await axios.put(
107 `/api/channels/${channel.id}/guessing-game/${values.name}`,
110 setChannel(rsp.data);
111 toastr.success(t('twitchBot.saveSuccess'));
113 toastr.error(t('twitchBot.saveError'));
119 <Row className="mb-4">
120 <Form.Group as={Col} md={6}>
121 <Form.Label>{t('twitchBot.channel')}</Form.Label>
126 onChange={({ channel }) => { setChannel(channel); }}
127 value={channel ? channel.id : ''}
131 <Form.Group as={Col} md={3}>
132 <Form.Label>{t('twitchBot.joinApp')}</Form.Label>
136 onChange={({ target: { value } }) => {
138 join('localhorsttv');
140 part('localhorsttv');
147 <Form.Group as={Col} md={3}>
148 <Form.Label>{t('twitchBot.joinChat')}</Form.Label>
152 onChange={({ target: { value } }) => {
167 <Col className="mt-5" md={6}>
168 <h3>{t('twitchBot.chat')}</h3>
170 <Form.Label>{t('twitchBot.chat')}</Form.Label>
173 onChange={({ target: { value } }) => {
178 <div className="button-bar">
181 disabled={!chatText || !channel.join}
183 if (chatText) chat(chatText, 'localhorsttv');
187 {t('twitchBot.sendApp')}
191 disabled={!chatText || !channel.chat}
193 if (chatText) chat(chatText, 'horstiebot');
197 {t('twitchBot.sendChat')}
202 <Col className="mt-5" md={6}>
203 <h3>{t('twitchBot.chatSettings')}</h3>
204 <ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
206 <Col className="mt-5" md={12}>
207 <h3>{t('twitchBot.commands')}</h3>
210 onEditCommand={onEditCommand}
211 onRemoveCommand={onRemoveCommand}
216 setShowCommandDialog(false);
218 setEditCommandSettings({});
220 onSubmit={saveCommand}
221 settings={editCommandSettings}
222 show={showCommandDialog}
225 <Button onClick={onAddCommand} variant="primary">
226 {t('twitchBot.addCommand')}
230 <Col className="mt-5" md={12}>
231 <h3>{t('twitchBot.guessingGame.settings')}</h3>
232 <GuessingSettingsForm
234 onSubmit={saveGuessingGame}
235 settings={channel.guessing_settings?.gtbk || {}}
240 <Alert variant="info">
241 {t('twitchBot.selectChannel')}
247 export default Controls;