resources/js/components/episodes/RestreamAddForm.js

   1 import { withFormik } from 'formik';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
   5 import { useTranslation } from 'react-i18next';
   6
   7 import DialogEpisode from './DialogEpisode';
   8 import ToggleSwitch from '../common/ToggleSwitch';
   9 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
  10 import { withUser } from '../../hooks/user';
  11
  12 const channelCompare = (a, b) => a.channel.title.localeCompare(b.channel.title);
  13
  14 const RestreamAddForm = ({
  15         episode,
  16         errors,
  17         handleBlur,
  18         handleChange,
  19         handleSubmit,
  20         onCancel,
  21         touched,
  22         user,
  23         values,
  24 }) => {
  25         const { t } = useTranslation();
  26
  27         return <Form noValidate onSubmit={handleSubmit}>
  28                 <Modal.Body>
  29                         <DialogEpisode episode={episode} />
  30                         <Form.Group controlId="episodes.channel_id">
  31                                 <Form.Label>{t('episodes.channel')}</Form.Label>
  32                                 <Form.Select
  33                                         isInvalid={!!(touched.channel_id && errors.channel_id)}
  34                                         name="channel_id"
  35                                         onBlur={handleBlur}
  36                                         onChange={handleChange}
  37                                         value={values.channel_id || 0}
  38                                 >
  39                                         <option disabled value={0}>{t('general.pleaseSelect')}</option>
  40                                         {((user && user.channel_crews) || []).sort(channelCompare).map(c =>
  41                                                 <option key={c.id} value={c.channel_id}>
  42                                                         {c.channel.title}
  43                                                 </option>
  44                                         )}
  45                                 </Form.Select>
  46                                 {touched.channel_id && errors.channel_id ?
  47                                         <Form.Control.Feedback type="invalid">
  48                                                 {t(errors.channel_id)}
  49                                         </Form.Control.Feedback>
  50                                 : null}
  51                         </Form.Group>
  52                         <Row>
  53                                 <Form.Group as={Col} sm={6} controlId="episodes.accept_comms">
  54                                         <Form.Label className="d-block">
  55                                                 {t('episodes.restreamDialog.acceptComms')}
  56                                         </Form.Label>
  57                                         <Form.Control
  58                                                 as={ToggleSwitch}
  59                                                 isInvalid={!!(touched.accept_comms && errors.accept_comms)}
  60                                                 name="accept_comms"
  61                                                 onBlur={handleBlur}
  62                                                 onChange={handleChange}
  63                                                 value={!!values.accept_comms}
  64                                         />
  65                                         {touched.accept_comms && errors.accept_comms ?
  66                                                 <Form.Control.Feedback type="invalid">
  67                                                         {t(errors.accept_comms)}
  68                                                 </Form.Control.Feedback>
  69                                         : null}
  70                                 </Form.Group>
  71                                 <Form.Group as={Col} sm={6} controlId="episodes.accept_tracker">
  72                                         <Form.Label className="d-block">
  73                                                 {t('episodes.restreamDialog.acceptTracker')}
  74                                         </Form.Label>
  75                                         <Form.Control
  76                                                 as={ToggleSwitch}
  77                                                 isInvalid={!!(touched.accept_tracker && errors.accept_tracker)}
  78                                                 name="accept_tracker"
  79                                                 onBlur={handleBlur}
  80                                                 onChange={handleChange}
  81                                                 value={!!values.accept_tracker}
  82                                         />
  83                                         {touched.accept_tracker && errors.accept_tracker ?
  84                                                 <Form.Control.Feedback type="invalid">
  85                                                         {t(errors.accept_tracker)}
  86                                                 </Form.Control.Feedback>
  87                                         : null}
  88                                 </Form.Group>
  89                         </Row>
  90                 </Modal.Body>
  91                 <Modal.Footer>
  92                         {onCancel ?
  93                                 <Button onClick={onCancel} variant="secondary">
  94                                         {t('button.cancel')}
  95                                 </Button>
  96                         : null}
  97                         <Button type="submit" variant="primary">
  98                                 {t('button.save')}
  99                         </Button>
 100                 </Modal.Footer>
 101         </Form>;
 102 };
 103
 104 RestreamAddForm.propTypes = {
 105         episode: PropTypes.shape({
 106                 event: PropTypes.shape({
 107                         title: PropTypes.string,
 108                 }),
 109                 players: PropTypes.arrayOf(PropTypes.shape({
 110                 })),
 111                 start: PropTypes.string,
 112         }),
 113         errors: PropTypes.shape({
 114                 accept_comms: PropTypes.string,
 115                 accept_tracker: PropTypes.string,
 116                 channel_id: PropTypes.string,
 117         }),
 118         handleBlur: PropTypes.func,
 119         handleChange: PropTypes.func,
 120         handleSubmit: PropTypes.func,
 121         onCancel: PropTypes.func,
 122         touched: PropTypes.shape({
 123                 accept_comms: PropTypes.bool,
 124                 accept_tracker: PropTypes.bool,
 125                 channel_id: PropTypes.bool,
 126         }),
 127         user: PropTypes.shape({
 128                 channel_crews: PropTypes.arrayOf(PropTypes.shape({
 129                 })),
 130         }),
 131         values: PropTypes.shape({
 132                 accept_comms: PropTypes.bool,
 133                 accept_tracker: PropTypes.bool,
 134                 channel_id: PropTypes.number,
 135         }),
 136 };
 137
 138 export default withUser(withFormik({
 139         displayName: 'RestreamAddForm',
 140         enableReinitialize: true,
 141         handleSubmit: async (values, actions) => {
 142                 const { setErrors } = actions;
 143                 const { onSubmit } = actions.props;
 144                 try {
 145                         await onSubmit(values);
 146                 } catch (e) {
 147                         if (e.response && e.response.data && e.response.data.errors) {
 148                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
 149                         }
 150                 }
 151         },
 152         mapPropsToValues: ({ episode, user }) => ({
 153                 accept_comms: false,
 154                 accept_tracker: false,
 155                 channel_id: user && user.channel_crews && user.channel_crews.length
 156                         ? user.channel_crews[0].channel_id : 0,
 157                 episode_id: episode ? episode.id : 0,
 158         }),
 159 })(RestreamAddForm));