resources/js/components/twitch-bot/Controls.js

   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';
   6
   7 import ChannelSelect from '../common/ChannelSelect';
   8 import ToggleSwitch from '../common/ToggleSwitch';
   9
  10 const Controls = () => {
  11         const [channel, setChannel] = React.useState(null);
  12         const [chatText, setChatText] = React.useState('');
  13
  14         const { t } = useTranslation();
  15
  16         const chat = React.useCallback(async text => {
  17                 try {
  18                         await axios.post(`/api/channels/${channel.id}/chat`, {
  19                                 text,
  20                         });
  21                         toastr.success(t('twitchBot.chatSuccess'));
  22                 } catch (e) {
  23                         toastr.error(t('twitchBot.chatError'));
  24                 }
  25         }, [channel, chatText, t]);
  26
  27         const join = React.useCallback(async () => {
  28                 try {
  29                         const rsp = await axios.post(`/api/channels/${channel.id}/join`);
  30                         setChannel(rsp.data);
  31                         toastr.success(t('twitchBot.joinSuccess'));
  32                 } catch (e) {
  33                         toastr.error(t('twitchBot.joinError'));
  34                 }
  35         }, [channel, t]);
  36
  37         const part = React.useCallback(async () => {
  38                 try {
  39                         const rsp = await axios.post(`/api/channels/${channel.id}/part`);
  40                         setChannel(rsp.data);
  41                         toastr.success(t('twitchBot.partSuccess'));
  42                 } catch (e) {
  43                         toastr.error(t('twitchBot.partError'));
  44                 }
  45         }, [channel, t]);
  46
  47         return <>
  48                 <Row className="mb-4">
  49                         <Form.Group as={Col} md={6}>
  50                                 <Form.Label>{t('twitchBot.channel')}</Form.Label>
  51                                 <Form.Control
  52                                         as={ChannelSelect}
  53                                         joinable
  54                                         manageable
  55                                         onChange={({ channel }) => { setChannel(channel); }}
  56                                         value={channel ? channel.id : ''}
  57                                 />
  58                         </Form.Group>
  59                         {channel ?
  60                                 <Form.Group as={Col} md={6}>
  61                                         <Form.Label>{t('twitchBot.join')}</Form.Label>
  62                                         <div>
  63                                                 <Form.Control
  64                                                         as={ToggleSwitch}
  65                                                         onChange={({ target: { value } }) => {
  66                                                                 if (value) {
  67                                                                         join();
  68                                                                 } else {
  69                                                                         part();
  70                                                                 }
  71                                                         }}
  72                                                         value={channel.join}
  73                                                 />
  74                                         </div>
  75                                 </Form.Group>
  76                         : null}
  77                 </Row>
  78                 {channel ?
  79                         <Row>
  80                                 <Form.Group as={Col} md={6}>
  81                                         <Form.Label>{t('twitchBot.chat')}</Form.Label>
  82                                         <Form.Control
  83                                                 as="textarea"
  84                                                 onChange={({ target: { value } }) => {
  85                                                         setChatText(value);
  86                                                 }}
  87                                                 value={chatText}
  88                                         />
  89                                         <Button
  90                                                 className="mt-2"
  91                                                 disabled={!chatText}
  92                                                 onClick={() => {
  93                                                         if (chatText) chat(chatText);
  94                                                 }}
  95                                                 variant="twitch"
  96                                         >
  97                                                 {t('button.send')}
  98                                         </Button>
  99                                 </Form.Group>
 100                         </Row>
 101                 :
 102                         <Alert variant="info">
 103                                 {t('twitchBot.selectChannel')}
 104                         </Alert>
 105                 }
 106         </>;
 107 };
 108
 109 export default Controls;