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

   1 import axios from 'axios';
   2 import React from 'react';
   3 import { Alert, 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
  13         const { t } = useTranslation();
  14
  15         const join = React.useCallback(async () => {
  16                 try {
  17                         const rsp = await axios.post(`/api/channels/${channel.id}/join`);
  18                         setChannel(rsp.data);
  19                         toastr.success(t('twitchBot.joinSuccess'));
  20                 } catch (e) {
  21                         toastr.error(t('twitchBot.joinError'));
  22                 }
  23         }, [channel, t]);
  24
  25         const part = React.useCallback(async () => {
  26                 try {
  27                         const rsp = await axios.post(`/api/channels/${channel.id}/part`);
  28                         setChannel(rsp.data);
  29                         toastr.success(t('twitchBot.partSuccess'));
  30                 } catch (e) {
  31                         toastr.error(t('twitchBot.partError'));
  32                 }
  33         }, [channel, t]);
  34
  35         return <>
  36                 <Row className="mb-4">
  37                         <Form.Group as={Col} md={6}>
  38                                 <Form.Label>{t('twitchBot.channel')}</Form.Label>
  39                                 <Form.Control
  40                                         as={ChannelSelect}
  41                                         joinable
  42                                         manageable
  43                                         onChange={({ channel }) => { setChannel(channel); }}
  44                                         value={channel ? channel.id : ''}
  45                                 />
  46                         </Form.Group>
  47                         {channel ?
  48                                 <Form.Group as={Col} md={6}>
  49                                         <Form.Label>{t('twitchBot.join')}</Form.Label>
  50                                         <div>
  51                                                 <Form.Control
  52                                                         as={ToggleSwitch}
  53                                                         onChange={({ target: { value } }) => {
  54                                                                 if (value) {
  55                                                                         join();
  56                                                                 } else {
  57                                                                         part();
  58                                                                 }
  59                                                         }}
  60                                                         value={channel.join}
  61                                                 />
  62                                         </div>
  63                                 </Form.Group>
  64                         : null}
  65                 </Row>
  66                 {channel ?
  67                         <div />
  68                 :
  69                         <Alert variant="info">
  70                                 {t('twitchBot.selectChannel')}
  71                         </Alert>
  72                 }
  73         </>;
  74 };
  75
  76 export default Controls;