X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;h=3093d90c04dd34e8b4f050367efa4c5c16f219b6;hb=4e24f36eb5d6907697c106ca15c2c405728d78a8;hp=158fb7c7ab5d8a58df9972e19f4162e1c8b5762b;hpb=3b545fa995c34c0ab8270ae495fedc24ddc2fe4d;p=alttp.git diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js index 158fb7c..3093d90 100644 --- a/resources/js/components/twitch-bot/Controls.js +++ b/resources/js/components/twitch-bot/Controls.js @@ -1,7 +1,276 @@ +import axios from 'axios'; import React from 'react'; +import { Alert, Button, Col, Form, Row } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; +import toastr from 'toastr'; + +import ChatSettingsForm from './ChatSettingsForm'; +import CommandDialog from './CommandDialog'; +import Commands from './Commands'; +import GuessingSettingsForm from './GuessingSettingsForm'; +import ChannelSelect from '../common/ChannelSelect'; +import Icon from '../common/Icon'; +import ToggleSwitch from '../common/ToggleSwitch'; const Controls = () => { - return
; + const [channel, setChannel] = React.useState(null); + const [chatText, setChatText] = React.useState(''); + const [editCommand, setEditCommand] = React.useState(''); + const [editCommandSettings, setEditCommandSettings] = React.useState({}); + const [showCommandDialog, setShowCommandDialog] = React.useState(false); + + const { t } = useTranslation(); + + const chat = React.useCallback(async (text, bot_nick) => { + try { + await axios.post(`/api/channels/${channel.id}/chat`, { + text, + bot_nick, + }); + toastr.success(t('twitchBot.chatSuccess')); + } catch (e) { + toastr.error(t('twitchBot.chatError')); + } + }, [channel, chatText, t]); + + const join = React.useCallback(async (bot_nick) => { + try { + const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick }); + setChannel(rsp.data); + toastr.success(t('twitchBot.joinSuccess')); + } catch (e) { + toastr.error(t('twitchBot.joinError')); + } + }, [channel, t]); + + const part = React.useCallback(async (bot_nick) => { + try { + const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick }); + setChannel(rsp.data); + toastr.success(t('twitchBot.partSuccess')); + } catch (e) { + toastr.error(t('twitchBot.partError')); + } + }, [channel, t]); + + const saveChatSettings = React.useCallback(async (values) => { + try { + const rsp = await axios.post(`/api/channels/${channel.id}/chat-settings`, values); + setChannel(rsp.data); + toastr.success(t('twitchBot.saveSuccess')); + } catch (e) { + toastr.error(t('twitchBot.saveError')); + } + }, [channel, t]); + + const onAddCommand = React.useCallback(() => { + setEditCommand(''); + setEditCommandSettings({}); + setShowCommandDialog(true); + }, [channel]); + + const onEditCommand = React.useCallback((name, settings) => { + setEditCommand(name); + setEditCommandSettings(settings); + setShowCommandDialog(true); + }, [channel]); + + const onRemoveCommand = React.useCallback(async (name) => { + try { + const rsp = await axios.delete(`/api/channels/${channel.id}/commands/${name}`); + setChannel(rsp.data); + toastr.success(t('twitchBot.saveSuccess')); + } catch (e) { + toastr.error(t('twitchBot.saveError')); + } + }, [channel]); + + const saveCommand = React.useCallback(async (values) => { + try { + const rsp = await axios.put( + `/api/channels/${channel.id}/commands/${values.name}`, + values, + ); + setChannel(rsp.data); + setShowCommandDialog(false); + setEditCommand(''); + setEditCommandSettings({}); + toastr.success(t('twitchBot.saveSuccess')); + } catch (e) { + toastr.error(t('twitchBot.saveError')); + throw e; + } + }, [channel]); + + const saveGuessingGame = React.useCallback(async (values) => { + try { + const rsp = await axios.put( + `/api/channels/${channel.id}/guessing-game/${values.name}`, + values, + ); + setChannel(rsp.data); + toastr.success(t('twitchBot.saveSuccess')); + } catch (e) { + toastr.error(t('twitchBot.saveError')); + throw e; + } + }, [channel]); + + return <> +