X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;fp=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;h=1faa912fa0c95525dcc7bf1983fac4113f0243f1;hb=51a752c7cce2465043dfb3d63a0152b64765b167;hp=0aea916cf04d698a879bc6bed886a88ebb426e08;hpb=4b0f87a8b0683579c53c68f35b18e5d08c30b3b9;p=alttp.git

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index 0aea916..1faa912 100644
--- 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')}