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