add result VoD links

[alttp.git] / resources / js / components / results / ReportForm.js

diff --git a/resources/js/components/results/ReportForm.js b/resources/js/components/results/ReportForm.js
index 9940171f344f676edf3ce1d89388e4f789be5be7..35b7e0fddab94a55d5773c1c15b5cbc0371f4d8d 100644 (file)
--- a/resources/js/components/results/ReportForm.js
+++ b/resources/js/components/results/ReportForm.js
@@ -66,19 +66,39 @@ const ReportForm = ({
                                </Form.Group>
                        </Row>
                : null}
-               <Row>
-                       <Form.Group as={Col} sm={12} controlId="report.comment">
-                               <Form.Label>{i18n.t('results.comment')}</Form.Label>
-                               <Form.Control
-                                       as="textarea"
-                                       isInvalid={!!(touched.comment && errors.comment)}
-                                       name="comment"
-                                       onBlur={handleBlur}
-                                       onChange={handleChange}
-                                       value={values.comment || ''}
-                               />
-                       </Form.Group>
-               </Row>
+               <Form.Group controlId="report.vod">
+                       <Form.Label>{i18n.t('results.vod')}</Form.Label>
+                       <Form.Control
+                               isInvalid={!!(touched.vod && errors.vod)}
+                               name="vod"
+                               onBlur={handleBlur}
+                               onChange={handleChange}
+                               placeholder="https://twitch.tv/youtube"
+                               type="text"
+                               value={values.vod || ''}
+                       />
+                       {touched.vod && errors.vod ?
+                               <Form.Control.Feedback type="invalid">
+                                       {i18n.t(errors.vod)}
+                               </Form.Control.Feedback>
+                       :
+                               <Form.Text muted>
+                                       {i18n.t('results.vodNote')}
+                               </Form.Text>
+                       }
+               </Form.Group>
+               <Form.Group controlId="report.comment">
+                       <Form.Label>{i18n.t('results.comment')}</Form.Label>
+                       <Form.Control
+                               as="textarea"
+                               isInvalid={!!(touched.comment && errors.comment)}
+                               name="comment"
+                               onBlur={handleBlur}
+                               onChange={handleChange}
+                               rows="6"
+                               value={values.comment || ''}
+                       />
+               </Form.Group>
        </Modal.Body>
        <Modal.Footer>
                {onCancel ?
@@ -97,6 +117,7 @@ ReportForm.propTypes = {
                comment: PropTypes.string,
                forfeit: PropTypes.string,
                time: PropTypes.string,
+               vod: PropTypes.string,
        }),
        handleBlur: PropTypes.func,
        handleChange: PropTypes.func,
@@ -109,11 +130,13 @@ ReportForm.propTypes = {
                comment: PropTypes.bool,
                forfeit: PropTypes.bool,
                time: PropTypes.bool,
+               vod: PropTypes.bool,
        }),
        values: PropTypes.shape({
                comment: PropTypes.string,
                forfeit: PropTypes.bool,
                time: PropTypes.string,
+               vod: PropTypes.string,
        }),
 };
 
@@ -121,7 +144,7 @@ export default withFormik({
        displayName: 'ReportForm',
        enableReinitialize: true,
        handleSubmit: async (values, actions) => {
-               const { comment, forfeit, round_id, time, user_id } = values;
+               const { comment, forfeit, round_id, time, user_id, vod } = values;
                const { setErrors } = actions;
                const { onCancel } = actions.props;
                try {
@@ -131,6 +154,7 @@ export default withFormik({
                                round_id,
                                time: parseTime(time) || 0,
                                user_id,
+                               vod,
                        });
                        toastr.success(i18n.t('results.reportSuccess'));
                        if (onCancel) {
@@ -151,6 +175,7 @@ export default withFormik({
                        round_id: round.id,
                        time: result && result.time ? formatTime(result) : '',
                        user_id: user.id,
+                       vod: result && result.vod ? result.vod : '',
                };
        },
        validationSchema: yup.object().shape({
@@ -160,5 +185,6 @@ export default withFormik({
                        is: false,
                        then: yup.string().required().time(),
                }),
+               vod: yup.string().url(),
        }),
 })(withTranslation()(ReportForm));