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 CommandDialog from './CommandDialog';
   9 import Commands from './Commands';
  10 import GuessingSettingsForm from './GuessingSettingsForm';
  11 import ChannelSelect from '../common/ChannelSelect';
  12 import ToggleSwitch from '../common/ToggleSwitch';
  13
  14 const Controls = () => {
  15         const [channel, setChannel] = React.useState(null);
  16         const [chatText, setChatText] = React.useState('');
  17         const [editCommand, setEditCommand] = React.useState('');
  18         const [editCommandSettings, setEditCommandSettings] = React.useState({});
  19         const [showCommandDialog, setShowCommandDialog] = React.useState(false);
  20
  21         const { t } = useTranslation();
  22
  23         const chat = React.useCallback(async (text, bot_nick) => {
  24                 try {
  25                         await axios.post(`/api/channels/${channel.id}/chat`, {
  26                                 text,
  27                                 bot_nick,
  28                         });
  29                         toastr.success(t('twitchBot.chatSuccess'));
  30                 } catch (e) {
  31                         toastr.error(t('twitchBot.chatError'));
  32                 }
  33         }, [channel, chatText, t]);
  34
  35         const join = React.useCallback(async (bot_nick) => {
  36                 try {
  37                         const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick });
  38                         setChannel(rsp.data);
  39                         toastr.success(t('twitchBot.joinSuccess'));
  40                 } catch (e) {
  41                         toastr.error(t('twitchBot.joinError'));
  42                 }
  43         }, [channel, t]);
  44
  45         const part = React.useCallback(async (bot_nick) => {
  46                 try {
  47                         const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick });
  48                         setChannel(rsp.data);
  49                         toastr.success(t('twitchBot.partSuccess'));
  50                 } catch (e) {
  51                         toastr.error(t('twitchBot.partError'));
  52                 }
  53         }, [channel, t]);
  54
  55         const saveChatSettings = React.useCallback(async (values) => {
  56                 try {
  57                         const rsp = await axios.post(`/api/channels/${channel.id}/chat-settings`, values);
  58                         setChannel(rsp.data);
  59                         toastr.success(t('twitchBot.saveSuccess'));
  60                 } catch (e) {
  61                         toastr.error(t('twitchBot.saveError'));
  62                 }
  63         }, [channel, t]);
  64
  65         const onAddCommand = React.useCallback(() => {
  66                 setEditCommand('');
  67                 setEditCommandSettings({});
  68                 setShowCommandDialog(true);
  69         }, [channel]);
  70
  71         const onEditCommand = React.useCallback((name, settings) => {
  72                 setEditCommand(name);
  73                 setEditCommandSettings(settings);
  74                 setShowCommandDialog(true);
  75         }, [channel]);
  76
  77         const onRemoveCommand = React.useCallback(async (name) => {
  78                 try {
  79                         const rsp = await axios.delete(`/api/channels/${channel.id}/commands/${name}`);
  80                         setChannel(rsp.data);
  81                         toastr.success(t('twitchBot.saveSuccess'));
  82                 } catch (e) {
  83                         toastr.error(t('twitchBot.saveError'));
  84                 }
  85         }, [channel]);
  86
  87         const saveCommand = React.useCallback(async (values) => {
  88                 try {
  89                         const rsp = await axios.put(
  90                                 `/api/channels/${channel.id}/commands/${values.name}`,
  91                                 values,
  92                         );
  93                         setChannel(rsp.data);
  94                         setShowCommandDialog(false);
  95                         setEditCommand('');
  96                         setEditCommandSettings({});
  97                         toastr.success(t('twitchBot.saveSuccess'));
  98                 } catch (e) {
  99                         toastr.error(t('twitchBot.saveError'));
 100                         throw e;
 101                 }
 102         }, [channel]);
 103
 104         const saveGuessingGame = React.useCallback(async (values) => {
 105                 try {
 106                         const rsp = await axios.put(
 107                                 `/api/channels/${channel.id}/guessing-game/${values.name}`,
 108                                 values,
 109                         );
 110                         setChannel(rsp.data);
 111                         toastr.success(t('twitchBot.saveSuccess'));
 112                 } catch (e) {
 113                         toastr.error(t('twitchBot.saveError'));
 114                         throw e;
 115                 }
 116         }, [channel]);
 117
 118         return <>
 119                 <Row className="mb-4">
 120                         <Form.Group as={Col} md={6}>
 121                                 <Form.Label>{t('twitchBot.channel')}</Form.Label>
 122                                 <Form.Control
 123                                         as={ChannelSelect}
 124                                         joinable
 125                                         manageable
 126                                         onChange={({ channel }) => { setChannel(channel); }}
 127                                         value={channel ? channel.id : ''}
 128                                 />
 129                         </Form.Group>
 130                         {channel ? <>
 131                                 <Form.Group as={Col} md={3}>
 132                                         <Form.Label>{t('twitchBot.joinApp')}</Form.Label>
 133                                         <div>
 134                                                 <Form.Control
 135                                                         as={ToggleSwitch}
 136                                                         onChange={({ target: { value } }) => {
 137                                                                 if (value) {
 138                                                                         join('localhorsttv');
 139                                                                 } else {
 140                                                                         part('localhorsttv');
 141                                                                 }
 142                                                         }}
 143                                                         value={channel.join}
 144                                                 />
 145                                         </div>
 146                                 </Form.Group>
 147                                 <Form.Group as={Col} md={3}>
 148                                         <Form.Label>{t('twitchBot.joinChat')}</Form.Label>
 149                                         <div>
 150                                                 <Form.Control
 151                                                         as={ToggleSwitch}
 152                                                         onChange={({ target: { value } }) => {
 153                                                                 if (value) {
 154                                                                         join('horstiebot');
 155                                                                 } else {
 156                                                                         part('horstiebot');
 157                                                                 }
 158                                                         }}
 159                                                         value={channel.chat}
 160                                                 />
 161                                         </div>
 162                                 </Form.Group>
 163                         </> : null}
 164                 </Row>
 165                 {channel ?
 166                         <Row>
 167                                 <Col className="mt-5" md={6}>
 168                                         <h3>{t('twitchBot.chat')}</h3>
 169                                         <Form.Group>
 170                                                 <Form.Label>{t('twitchBot.chat')}</Form.Label>
 171                                                 <Form.Control
 172                                                         as="textarea"
 173                                                         onChange={({ target: { value } }) => {
 174                                                                 setChatText(value);
 175                                                         }}
 176                                                         value={chatText}
 177                                                 />
 178                                                 <div className="button-bar">
 179                                                         <Button
 180                                                                 className="mt-2"
 181                                                                 disabled={!chatText || !channel.join}
 182                                                                 onClick={() => {
 183                                                                         if (chatText) chat(chatText, 'localhorsttv');
 184                                                                 }}
 185                                                                 variant="twitch"
 186                                                         >
 187                                                                 {t('twitchBot.sendApp')}
 188                                                         </Button>
 189                                                         <Button
 190                                                                 className="mt-2"
 191                                                                 disabled={!chatText || !channel.chat}
 192                                                                 onClick={() => {
 193                                                                         if (chatText) chat(chatText, 'horstiebot');
 194                                                                 }}
 195                                                                 variant="twitch"
 196                                                         >
 197                                                                 {t('twitchBot.sendChat')}
 198                                                         </Button>
 199                                                 </div>
 200                                         </Form.Group>
 201                                 </Col>
 202                                 <Col className="mt-5" md={6}>
 203                                         <h3>{t('twitchBot.chatSettings')}</h3>
 204                                         <ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
 205                                 </Col>
 206                                 <Col className="mt-5" md={12}>
 207                                         <h3>{t('twitchBot.commands')}</h3>
 208                                         <Commands
 209                                                 channel={channel}
 210                                                 onEditCommand={onEditCommand}
 211                                                 onRemoveCommand={onRemoveCommand}
 212                                         />
 213                                         <CommandDialog
 214                                                 name={editCommand}
 215                                                 onHide={() => {
 216                                                         setShowCommandDialog(false);
 217                                                         setEditCommand('');
 218                                                         setEditCommandSettings({});
 219                                                 }}
 220                                                 onSubmit={saveCommand}
 221                                                 settings={editCommandSettings}
 222                                                 show={showCommandDialog}
 223                                         />
 224                                         <div>
 225                                                 <Button onClick={onAddCommand} variant="primary">
 226                                                         {t('twitchBot.addCommand')}
 227                                                 </Button>
 228                                         </div>
 229                                 </Col>
 230                                 <Col className="mt-5" md={12}>
 231                                         <h3>{t('twitchBot.guessingGame.settings')}</h3>
 232                                         <GuessingSettingsForm
 233                                                 name="gtbk"
 234                                                 onSubmit={saveGuessingGame}
 235                                                 settings={channel.guessing_settings?.gtbk || {}}
 236                                         />
 237                                 </Col>
 238                         </Row>
 239                 :
 240                         <Alert variant="info">
 241                                 {t('twitchBot.selectChannel')}
 242                         </Alert>
 243                 }
 244         </>;
 245 };
 246
 247 export default Controls;