]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/episodes/RestreamAddForm.js
remove some useless svg groups
[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 '../../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));