add twitch chat comand

[alttp.git] / resources / js / components / twitch-bot / Controls.js

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index 0aea916cf04d698a879bc6bed886a88ebb426e08..1faa912fa0c95525dcc7bf1983fac4113f0243f1 100644 (file)
--- a/resources/js/components/twitch-bot/Controls.js
+++ b/resources/js/components/twitch-bot/Controls.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
 import React from 'react';
-import { Alert, Col, Form, Row } from 'react-bootstrap';
+import { Alert, Button, Col, Form, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import toastr from 'toastr';
 
@@ -9,9 +9,21 @@ import ToggleSwitch from '../common/ToggleSwitch';
 
 const Controls = () => {
        const [channel, setChannel] = React.useState(null);
+       const [chatText, setChatText] = React.useState('');
 
        const { t } = useTranslation();
 
+       const chat = React.useCallback(async text => {
+               try {
+                       await axios.post(`/api/channels/${channel.id}/chat`, {
+                               text,
+                       });
+                       toastr.success(t('twitchBot.chatSuccess'));
+               } catch (e) {
+                       toastr.error(t('twitchBot.chatError'));
+               }
+       }, [channel, chatText, t]);
+
        const join = React.useCallback(async () => {
                try {
                        const rsp = await axios.post(`/api/channels/${channel.id}/join`);
@@ -64,7 +76,28 @@ const Controls = () => {
                        : null}
                </Row>
                {channel ?
-                       <div />
+                       <Row>
+                               <Form.Group as={Col} md={6}>
+                                       <Form.Label>{t('twitchBot.chat')}</Form.Label>
+                                       <Form.Control
+                                               as="textarea"
+                                               onChange={({ target: { value } }) => {
+                                                       setChatText(value);
+                                               }}
+                                               value={chatText}
+                                       />
+                                       <Button
+                                               className="mt-2"
+                                               disabled={!chatText}
+                                               onClick={() => {
+                                                       if (chatText) chat(chatText);
+                                               }}
+                                               variant="twitch"
+                                       >
+                                               {t('button.send')}
+                                       </Button>
+                               </Form.Group>
+                       </Row>
                :
                        <Alert variant="info">
                                {t('twitchBot.selectChannel')}