]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/episodes/RestreamAddForm.js
7cbb87d538e17b2102ebe95df68edfe9c78bba23
[alttp.git] / 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));