improved user context

[alttp.git] / resources / js / components / episodes / RestreamAddForm.js

diff --git a/resources/js/components/episodes/RestreamAddForm.js b/resources/js/components/episodes/RestreamAddForm.js
index 747b47e656b7107e2920dfb4c779ac3b0ffd884c..c09b92b8d817125369f79dc2b386492becdc8d62 100644 (file)
--- a/resources/js/components/episodes/RestreamAddForm.js
+++ b/resources/js/components/episodes/RestreamAddForm.js
@@ -1,12 +1,15 @@
 import { withFormik } from 'formik';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Button, Form, Modal } from 'react-bootstrap';
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-import { getName } from '../../helpers/Crew';
+import DialogEpisode from './DialogEpisode';
+import ToggleSwitch from '../common/ToggleSwitch';
 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
-import { withUser } from '../../helpers/UserContext';
+import { withUser } from '../../hooks/user';
+
+const channelCompare = (a, b) => a.channel.title.localeCompare(b.channel.title);
 
 const RestreamAddForm = ({
        episode,
@@ -23,17 +26,7 @@ const RestreamAddForm = ({
 
        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}
+                       <DialogEpisode episode={episode} />
                        <Form.Group controlId="episodes.channel_id">
                                <Form.Label>{t('episodes.channel')}</Form.Label>
                                <Form.Select
@@ -44,7 +37,7 @@ const RestreamAddForm = ({
                                        value={values.channel_id || 0}
                                >
                                        <option disabled value={0}>{t('general.pleaseSelect')}</option>
-                                       {((user && user.channel_crews) || []).map(c =>
+                                       {((user && user.channel_crews) || []).sort(channelCompare).map(c =>
                                                <option key={c.id} value={c.channel_id}>
                                                        {c.channel.title}
                                                </option>
@@ -56,6 +49,44 @@ const RestreamAddForm = ({
                                        </Form.Control.Feedback>
                                : null}
                        </Form.Group>
+                       <Row>
+                               <Form.Group as={Col} sm={6} controlId="episodes.accept_comms">
+                                       <Form.Label className="d-block">
+                                               {t('episodes.restreamDialog.acceptComms')}
+                                       </Form.Label>
+                                       <Form.Control
+                                               as={ToggleSwitch}
+                                               isInvalid={!!(touched.accept_comms && errors.accept_comms)}
+                                               name="accept_comms"
+                                               onBlur={handleBlur}
+                                               onChange={handleChange}
+                                               value={!!values.accept_comms}
+                                       />
+                                       {touched.accept_comms && errors.accept_comms ?
+                                               <Form.Control.Feedback type="invalid">
+                                                       {t(errors.accept_comms)}
+                                               </Form.Control.Feedback>
+                                       : null}
+                               </Form.Group>
+                               <Form.Group as={Col} sm={6} controlId="episodes.accept_tracker">
+                                       <Form.Label className="d-block">
+                                               {t('episodes.restreamDialog.acceptTracker')}
+                                       </Form.Label>
+                                       <Form.Control
+                                               as={ToggleSwitch}
+                                               isInvalid={!!(touched.accept_tracker && errors.accept_tracker)}
+                                               name="accept_tracker"
+                                               onBlur={handleBlur}
+                                               onChange={handleChange}
+                                               value={!!values.accept_tracker}
+                                       />
+                                       {touched.accept_tracker && errors.accept_tracker ?
+                                               <Form.Control.Feedback type="invalid">
+                                                       {t(errors.accept_tracker)}
+                                               </Form.Control.Feedback>
+                                       : null}
+                               </Form.Group>
+                       </Row>
                </Modal.Body>
                <Modal.Footer>
                        {onCancel ?
@@ -80,6 +111,8 @@ RestreamAddForm.propTypes = {
                start: PropTypes.string,
        }),
        errors: PropTypes.shape({
+               accept_comms: PropTypes.string,
+               accept_tracker: PropTypes.string,
                channel_id: PropTypes.string,
        }),
        handleBlur: PropTypes.func,
@@ -87,6 +120,8 @@ RestreamAddForm.propTypes = {
        handleSubmit: PropTypes.func,
        onCancel: PropTypes.func,
        touched: PropTypes.shape({
+               accept_comms: PropTypes.bool,
+               accept_tracker: PropTypes.bool,
                channel_id: PropTypes.bool,
        }),
        user: PropTypes.shape({
@@ -94,6 +129,8 @@ RestreamAddForm.propTypes = {
                })),
        }),
        values: PropTypes.shape({
+               accept_comms: PropTypes.bool,
+               accept_tracker: PropTypes.bool,
                channel_id: PropTypes.number,
        }),
 };
@@ -113,6 +150,8 @@ export default withUser(withFormik({
                }
        },
        mapPropsToValues: ({ episode, user }) => ({
+               accept_comms: false,
+               accept_tracker: false,
                channel_id: user && user.channel_crews && user.channel_crews.length
                        ? user.channel_crews[0].channel_id : 0,
                episode_id: episode ? episode.id : 0,