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, bot_nick) => {
  17                 try {
  18                         await axios.post(`/api/channels/${channel.id}/chat`, {
  19                                 text,
  20                                 bot_nick,
  21                         });
  22                         toastr.success(t('twitchBot.chatSuccess'));
  23                 } catch (e) {
  24                         toastr.error(t('twitchBot.chatError'));
  25                 }
  26         }, [channel, chatText, t]);
  27
  28         const join = React.useCallback(async (bot_nick) => {
  29                 try {
  30                         const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick });
  31                         setChannel(rsp.data);
  32                         toastr.success(t('twitchBot.joinSuccess'));
  33                 } catch (e) {
  34                         toastr.error(t('twitchBot.joinError'));
  35                 }
  36         }, [channel, t]);
  37
  38         const part = React.useCallback(async (bot_nick) => {
  39                 try {
  40                         const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick });
  41                         setChannel(rsp.data);
  42                         toastr.success(t('twitchBot.partSuccess'));
  43                 } catch (e) {
  44                         toastr.error(t('twitchBot.partError'));
  45                 }
  46         }, [channel, t]);
  47
  48         return <>
  49                 <Row className="mb-4">
  50                         <Form.Group as={Col} md={6}>
  51                                 <Form.Label>{t('twitchBot.channel')}</Form.Label>
  52                                 <Form.Control
  53                                         as={ChannelSelect}
  54                                         joinable
  55                                         manageable
  56                                         onChange={({ channel }) => { setChannel(channel); }}
  57                                         value={channel ? channel.id : ''}
  58                                 />
  59                         </Form.Group>
  60                         {channel ? <>
  61                                 <Form.Group as={Col} md={3}>
  62                                         <Form.Label>{t('twitchBot.joinApp')}</Form.Label>
  63                                         <div>
  64                                                 <Form.Control
  65                                                         as={ToggleSwitch}
  66                                                         onChange={({ target: { value } }) => {
  67                                                                 if (value) {
  68                                                                         join('localhorsttv');
  69                                                                 } else {
  70                                                                         part('localhorsttv');
  71                                                                 }
  72                                                         }}
  73                                                         value={channel.join}
  74                                                 />
  75                                         </div>
  76                                 </Form.Group>
  77                                 <Form.Group as={Col} md={3}>
  78                                         <Form.Label>{t('twitchBot.joinChat')}</Form.Label>
  79                                         <div>
  80                                                 <Form.Control
  81                                                         as={ToggleSwitch}
  82                                                         onChange={({ target: { value } }) => {
  83                                                                 if (value) {
  84                                                                         join('horstiebot');
  85                                                                 } else {
  86                                                                         part('horstiebot');
  87                                                                 }
  88                                                         }}
  89                                                         value={channel.chat}
  90                                                 />
  91                                         </div>
  92                                 </Form.Group>
  93                         </> : null}
  94                 </Row>
  95                 {channel ?
  96                         <Row>
  97                                 <Form.Group as={Col} md={6}>
  98                                         <Form.Label>{t('twitchBot.chat')}</Form.Label>
  99                                         <Form.Control
 100                                                 as="textarea"
 101                                                 onChange={({ target: { value } }) => {
 102                                                         setChatText(value);
 103                                                 }}
 104                                                 value={chatText}
 105                                         />
 106                                         <div className="button-bar">
 107                                                 <Button
 108                                                         className="mt-2"
 109                                                         disabled={!chatText || !channel.join}
 110                                                         onClick={() => {
 111                                                                 if (chatText) chat(chatText, 'localhorsttv');
 112                                                         }}
 113                                                         variant="twitch"
 114                                                 >
 115                                                         {t('twitchBot.sendApp')}
 116                                                 </Button>
 117                                                 <Button
 118                                                         className="mt-2"
 119                                                         disabled={!chatText || !channel.chat}
 120                                                         onClick={() => {
 121                                                                 if (chatText) chat(chatText, 'horstiebot');
 122                                                         }}
 123                                                         variant="twitch"
 124                                                 >
 125                                                         {t('twitchBot.sendChat')}
 126                                                 </Button>
 127                                         </div>
 128                                 </Form.Group>
 129                         </Row>
 130                 :
 131                         <Alert variant="info">
 132                                 {t('twitchBot.selectChannel')}
 133                         </Alert>
 134                 }
 135         </>;
 136 };
 137
 138 export default Controls;