From fae7b5a03282b1e1586f5483a1f2717ed22c8cef Mon Sep 17 00:00:00 2001 From: SachaG <358832+SachaG@users.noreply.github.com> Date: Sat, 21 Apr 2018 17:57:53 +0900 Subject: [PATCH] Improve error handling --- packages/vulcan-forms/lib/components/Form.jsx | 36 +++++++++---------- .../lib/components/FormErrors.jsx | 2 +- .../vulcan-forms/lib/components/FormGroup.jsx | 12 +++---- packages/vulcan-lib/lib/modules/validation.js | 2 +- 4 files changed, 25 insertions(+), 27 deletions(-) diff --git a/packages/vulcan-forms/lib/components/Form.jsx b/packages/vulcan-forms/lib/components/Form.jsx index 41c697a38..e9264ee29 100644 --- a/packages/vulcan-forms/lib/components/Form.jsx +++ b/packages/vulcan-forms/lib/components/Form.jsx @@ -143,16 +143,7 @@ class Form extends Component { return data; }; - - /* - - - - */ - getDefaultValues = () => { - - } - + // --------------------------------------------------------------------- // // -------------------------------- Fields ----------------------------- // // --------------------------------------------------------------------- // @@ -209,7 +200,6 @@ class Form extends Component { */ getFieldNames = (args = {}) => { - const { schema = this.schema, excludeHiddenFields = true } = args; const { fields, hideFields } = this.props; @@ -293,10 +283,7 @@ class Form extends Component { if (inputProperties) { for (const prop in inputProperties) { const property = inputProperties[prop]; - field[prop] = - typeof property === 'function' - ? property.call(fieldSchema, this.props) - : property; + field[prop] = typeof property === 'function' ? property.call(fieldSchema, this.props) : property; } } @@ -342,9 +329,9 @@ class Form extends Component { Errors can have the following properties: - id: used as an internationalization key, for example `errors.required` - path: for field-specific errors, the path of the field with the issue - - data: additional data. Will be passed to vulcan-i18n as values + - properties: additional data. Will be passed to vulcan-i18n as values - message: if id cannot be used as i81n key, message will be used - + */ throwError = error => { let formErrors = [error]; @@ -352,7 +339,18 @@ class Form extends Component { if (error.graphQLErrors) { // get graphQL error (see https://github.com/thebigredgeek/apollo-errors/issues/12) const graphQLError = error.graphQLErrors[0]; - formErrors = graphQLError.data && graphQLError.data.errors; + if (graphQLError.data) { + if (graphQLError.data.errors) { + // there are multiple errors on the data.errors object + formErrors = graphQLError.data && graphQLError.data.errors; + } else { + // there is only one error + formErrors = [graphQLError.data]; + } + } else { + // there is no data object, just use raw error + formErrors = [graphQLError]; + } } // eslint-disable-next-line no-console @@ -372,7 +370,7 @@ class Form extends Component { clearFieldErrors = path => { const errors = this.state.errors.filter(error => error.path !== path); this.setState({ errors }); - } + }; // --------------------------------------------------------------------- // // ------------------------------- Context ----------------------------- // diff --git a/packages/vulcan-forms/lib/components/FormErrors.jsx b/packages/vulcan-forms/lib/components/FormErrors.jsx index 024c14483..87935be41 100644 --- a/packages/vulcan-forms/lib/components/FormErrors.jsx +++ b/packages/vulcan-forms/lib/components/FormErrors.jsx @@ -14,7 +14,7 @@ const FormErrors = ({ errors }) => ( {error.message || ( )} diff --git a/packages/vulcan-forms/lib/components/FormGroup.jsx b/packages/vulcan-forms/lib/components/FormGroup.jsx index 2a0b9c336..ef5757925 100644 --- a/packages/vulcan-forms/lib/components/FormGroup.jsx +++ b/packages/vulcan-forms/lib/components/FormGroup.jsx @@ -31,17 +31,17 @@ class FormGroup extends PureComponent { ); } - render() { + // if at least one of the fields in the group has an error, the group as a whole has an error + hasErrors = () => _.some(this.props.fields, field => { + return !!this.props.errors.filter(error => error.path === field.path).length + }); - // if at least one of the fields in the group has an error, the group as a whole has an error - const hasErrors = _.some(this.props.fields, field => { - return !!this.props.errors.filter(error => error.data && error.data.name && error.data.name === field.path).length - }); + render() { return (
{this.props.name === 'default' ? null : this.renderHeading()} -
+
{this.props.fields.map(field => ( { validationErrors.push({ id: `errors.${error.type}`, path: error.name, - data: error, + properties: error, }); }); }