+import { withFormik } from 'formik';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import { getName } from '../../helpers/Crew';
+import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
+import { withUser } from '../../helpers/UserContext';
+
+const RestreamAddForm = ({
+ episode,
+ errors,
+ handleBlur,
+ handleChange,
+ handleSubmit,
+ onCancel,
+ touched,
+ user,
+ values,
+}) => {
+ const { t } = useTranslation();
+
+ return <Form noValidate onSubmit={handleSubmit}>
+ <Modal.Body>
+ {episode ? <>
+ <div>
+ {episode.event.title}
+ </div>
+ <div>
+ {t('episodes.startTime', { date: new Date(episode.start) })}
+ </div>
+ <div>
+ {episode.players.map(p => getName(p)).join(', ')}
+ </div>
+ </> : null}
+ <Form.Group controlId="episodes.channel_id">
+ <Form.Label>{t('episodes.channel')}</Form.Label>
+ <Form.Select
+ isInvalid={!!(touched.channel_id && errors.channel_id)}
+ name="channel_id"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ value={values.channel_id || 0}
+ >
+ <option disabled value={0}>{t('general.pleaseSelect')}</option>
+ {((user && user.channel_crews) || []).map(c =>
+ <option key={c.id} value={c.channel_id}>
+ {c.channel.title}
+ </option>
+ )}
+ </Form.Select>
+ {touched.channel_id && errors.channel_id ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.channel_id)}
+ </Form.Control.Feedback>
+ : null}
+ </Form.Group>
+ </Modal.Body>
+ <Modal.Footer>
+ {onCancel ?
+ <Button onClick={onCancel} variant="secondary">
+ {t('button.cancel')}
+ </Button>
+ : null}
+ <Button type="submit" variant="primary">
+ {t('button.save')}
+ </Button>
+ </Modal.Footer>
+ </Form>;
+};
+
+RestreamAddForm.propTypes = {
+ episode: PropTypes.shape({
+ event: PropTypes.shape({
+ title: PropTypes.string,
+ }),
+ players: PropTypes.arrayOf(PropTypes.shape({
+ })),
+ start: PropTypes.string,
+ }),
+ errors: PropTypes.shape({
+ channel_id: PropTypes.string,
+ }),
+ handleBlur: PropTypes.func,
+ handleChange: PropTypes.func,
+ handleSubmit: PropTypes.func,
+ onCancel: PropTypes.func,
+ touched: PropTypes.shape({
+ channel_id: PropTypes.bool,
+ }),
+ user: PropTypes.shape({
+ channel_crews: PropTypes.arrayOf(PropTypes.shape({
+ })),
+ }),
+ values: PropTypes.shape({
+ channel_id: PropTypes.number,
+ }),
+};
+
+export default withUser(withFormik({
+ displayName: 'RestreamAddForm',
+ enableReinitialize: true,
+ handleSubmit: async (values, actions) => {
+ const { setErrors } = actions;
+ const { onSubmit } = actions.props;
+ try {
+ await onSubmit(values);
+ } catch (e) {
+ if (e.response && e.response.data && e.response.data.errors) {
+ setErrors(laravelErrorsToFormik(e.response.data.errors));
+ }
+ }
+ },
+ mapPropsToValues: ({ episode, user }) => ({
+ channel_id: user && user.channel_crews && user.channel_crews.length
+ ? user.channel_crews[0].channel_id : 0,
+ episode_id: episode ? episode.id : 0,
+ }),
+})(RestreamAddForm));