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';
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`);
: 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')}