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, Form, Modal } from 'react-bootstrap';
   5 import { useTranslation } from 'react-i18next';
   6
   7 import { getName } from '../../helpers/Crew';
   8 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
   9 import { withUser } from '../../helpers/UserContext';
  10
  11 const RestreamAddForm = ({
  12         episode,
  13         errors,
  14         handleBlur,
  15         handleChange,
  16         handleSubmit,
  17         onCancel,
  18         touched,
  19         user,
  20         values,
  21 }) => {
  22         const { t } = useTranslation();
  23
  24         return <Form noValidate onSubmit={handleSubmit}>
  25                 <Modal.Body>
  26                         {episode ? <>
  27                                 <div>
  28                                         {episode.event.title}
  29                                 </div>
  30                                 <div>
  31                                         {t('episodes.startTime', { date: new Date(episode.start) })}
  32                                 </div>
  33                                 <div>
  34                                         {episode.players.map(p => getName(p)).join(', ')}
  35                                 </div>
  36                         </> : null}
  37                         <Form.Group controlId="episodes.channel_id">
  38                                 <Form.Label>{t('episodes.channel')}</Form.Label>
  39                                 <Form.Select
  40                                         isInvalid={!!(touched.channel_id && errors.channel_id)}
  41                                         name="channel_id"
  42                                         onBlur={handleBlur}
  43                                         onChange={handleChange}
  44                                         value={values.channel_id || 0}
  45                                 >
  46                                         <option disabled value={0}>{t('general.pleaseSelect')}</option>
  47                                         {((user && user.channel_crews) || []).map(c =>
  48                                                 <option key={c.id} value={c.channel_id}>
  49                                                         {c.channel.title}
  50                                                 </option>
  51                                         )}
  52                                 </Form.Select>
  53                                 {touched.channel_id && errors.channel_id ?
  54                                         <Form.Control.Feedback type="invalid">
  55                                                 {t(errors.channel_id)}
  56                                         </Form.Control.Feedback>
  57                                 : null}
  58                         </Form.Group>
  59                 </Modal.Body>
  60                 <Modal.Footer>
  61                         {onCancel ?
  62                                 <Button onClick={onCancel} variant="secondary">
  63                                         {t('button.cancel')}
  64                                 </Button>
  65                         : null}
  66                         <Button type="submit" variant="primary">
  67                                 {t('button.save')}
  68                         </Button>
  69                 </Modal.Footer>
  70         </Form>;
  71 };
  72
  73 RestreamAddForm.propTypes = {
  74         episode: PropTypes.shape({
  75                 event: PropTypes.shape({
  76                         title: PropTypes.string,
  77                 }),
  78                 players: PropTypes.arrayOf(PropTypes.shape({
  79                 })),
  80                 start: PropTypes.string,
  81         }),
  82         errors: PropTypes.shape({
  83                 channel_id: PropTypes.string,
  84         }),
  85         handleBlur: PropTypes.func,
  86         handleChange: PropTypes.func,
  87         handleSubmit: PropTypes.func,
  88         onCancel: PropTypes.func,
  89         touched: PropTypes.shape({
  90                 channel_id: PropTypes.bool,
  91         }),
  92         user: PropTypes.shape({
  93                 channel_crews: PropTypes.arrayOf(PropTypes.shape({
  94                 })),
  95         }),
  96         values: PropTypes.shape({
  97                 channel_id: PropTypes.number,
  98         }),
  99 };
 100
 101 export default withUser(withFormik({
 102         displayName: 'RestreamAddForm',
 103         enableReinitialize: true,
 104         handleSubmit: async (values, actions) => {
 105                 const { setErrors } = actions;
 106                 const { onSubmit } = actions.props;
 107                 try {
 108                         await onSubmit(values);
 109                 } catch (e) {
 110                         if (e.response && e.response.data && e.response.data.errors) {
 111                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
 112                         }
 113                 }
 114         },
 115         mapPropsToValues: ({ episode, user }) => ({
 116                 channel_id: user && user.channel_crews && user.channel_crews.length
 117                         ? user.channel_crews[0].channel_id : 0,
 118                 episode_id: episode ? episode.id : 0,
 119         }),
 120 })(RestreamAddForm));