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