import toastr from 'toastr';
import LargeCheck from '../common/LargeCheck';
-import i18n from '../../i18n';
import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
-import { findResult } from '../../helpers/Participant';
+import { findResult } from '../../helpers/User';
import { formatTime, parseTime } from '../../helpers/Result';
+import i18n from '../../i18n';
import yup from '../../schema/yup';
const ReportForm = ({
handleChange,
handleSubmit,
onCancel,
+ round,
touched,
values,
}) =>
<Form noValidate onSubmit={handleSubmit}>
<Modal.Body>
- <Row>
- <Form.Group as={Col} sm={9} controlId="report.time">
- <Form.Label>{i18n.t('results.reportTime')}</Form.Label>
- <Form.Control
- isInvalid={!!(touched.time && errors.time)}
- name="time"
- onBlur={handleBlur}
- onChange={handleChange}
- placeholder={values.forfeit ? 'DNF' : '1:22:59'}
- type="text"
- value={values.time || ''}
- />
- {touched.time && errors.time ?
- <Form.Control.Feedback type="invalid">
- {i18n.t(errors.time)}
- </Form.Control.Feedback>
- :
- <Form.Text muted>
- {parseTime(values.time) ?
- i18n.t(
- 'results.reportPreview',
- { time: formatTime({ time: parseTime(values.time) })},
- )
- : null}
- </Form.Text>
- }
- </Form.Group>
- <Form.Group as={Col} sm={3} controlId="report.forfeit">
- <Form.Label>{i18n.t('results.forfeit')}</Form.Label>
- <Form.Control
- as={LargeCheck}
- isInvalid={!!(touched.forfeit && errors.forfeit)}
- name="forfeit"
- onBlur={handleBlur}
- onChange={handleChange}
- value={!!values.forfeit}
- />
- </Form.Group>
- </Row>
+ {!round.locked ?
+ <Row>
+ <Form.Group as={Col} sm={9} controlId="report.time">
+ <Form.Label>{i18n.t('results.reportTime')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.time && errors.time)}
+ name="time"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ placeholder={values.forfeit ? 'DNF' : '1:22:59'}
+ type="text"
+ value={values.time || ''}
+ />
+ {touched.time && errors.time ?
+ <Form.Control.Feedback type="invalid">
+ {i18n.t(errors.time)}
+ </Form.Control.Feedback>
+ :
+ <Form.Text muted>
+ {parseTime(values.time) ?
+ i18n.t(
+ 'results.reportPreview',
+ { time: formatTime({ time: parseTime(values.time) })},
+ )
+ : null}
+ </Form.Text>
+ }
+ </Form.Group>
+ <Form.Group as={Col} sm={3} controlId="report.forfeit">
+ <Form.Label>{i18n.t('results.forfeit')}</Form.Label>
+ <Form.Control
+ as={LargeCheck}
+ isInvalid={!!(touched.forfeit && errors.forfeit)}
+ name="forfeit"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ value={!!values.forfeit}
+ />
+ </Form.Group>
+ </Row>
+ : null}
+ <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 ?
ReportForm.propTypes = {
errors: PropTypes.shape({
+ comment: PropTypes.string,
forfeit: PropTypes.string,
time: PropTypes.string,
+ vod: PropTypes.string,
}),
handleBlur: PropTypes.func,
handleChange: PropTypes.func,
handleSubmit: PropTypes.func,
onCancel: PropTypes.func,
+ round: PropTypes.shape({
+ locked: PropTypes.bool,
+ }),
touched: PropTypes.shape({
+ 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,
}),
};
displayName: 'ReportForm',
enableReinitialize: true,
handleSubmit: async (values, actions) => {
- const { forfeit, participant_id, round_id, time } = values;
+ const { comment, forfeit, round_id, time, user_id, vod } = values;
const { setErrors } = actions;
const { onCancel } = actions.props;
try {
await axios.post('/api/results', {
+ comment,
forfeit,
- participant_id,
round_id,
time: parseTime(time) || 0,
+ user_id,
+ vod,
});
toastr.success(i18n.t('results.reportSuccess'));
if (onCancel) {
onCancel();
}
} catch (e) {
- toastr.success(i18n.t('results.reportError'));
+ toastr.error(i18n.t('results.reportError'));
if (e.response && e.response.data && e.response.data.errors) {
setErrors(laravelErrorsToFormik(e.response.data.errors));
}
}
},
- mapPropsToValues: ({ participant, round }) => {
- const result = findResult(participant, round);
- console.log(result);
+ mapPropsToValues: ({ round, user }) => {
+ const result = findResult(user, round);
return {
+ comment: result && result.comment ? result.comment : '',
forfeit: result ? !!result.forfeit : false,
- participant_id: participant.id,
round_id: round.id,
time: result && result.time ? formatTime(result) : '',
+ user_id: user.id,
+ vod: result && result.vod ? result.vod : '',
};
},
validationSchema: yup.object().shape({
+ comment: yup.string(),
forfeit: yup.boolean().required(),
time: yup.string().time().when('forfeit', {
is: false,
- then: yup.string().required().time(),
+ then: () => yup.string().required().time(),
}),
+ vod: yup.string().url(),
}),
})(withTranslation()(ReportForm));