ducky/web

Paddy 2015-05-31 Parent:efdc78cbdac5

6:a641906b8267 Go to Latest

ducky/web/src/components/validation-error.jsx

Enable catch-all in our ValidationError component. We're doing this an ugly, hacky way. But it works, and right now, that's what counts. To match our params/fields/headers properties on the ValidationError component, we're going to add the notParams/notFields/notHeaders properties--they match any error _not_ targeting those params/fields/headers. Basically, "any error that wouldn't be caught by these filters". Which is an ugly, but workable, solution for a catch-all ValidationError--just tell it to catch anything but the params/fields/headers that are being handled by the other ValidationErrors. Our implementation of this in the RegisterPage component validates (ha!) that it's at least workable model, if not overly pretty. Also, I anticipate some human error bugs in the future, where one of the field-specific ValidationErrors gets updated and the catch-all ValidationError does not. But whatever. For now, this is Good Enough™.

Download raw file
View source Diff to previous Annotate
History
1 import React from 'react'
2
3 export default React.createClass({
4 displayName: 'ValidationError',
5
6 render () {
7 let fields = this.props.fields
8 if (this.props.field && !this.props.fields) {
9 fields = [this.props.field]
10 }
11 let notFields = this.props.notFields
12 if (this.props.notField && !this.props.notFields) {
13 notFields = [this.props.notField]
14 }
15 let params = this.props.params
16 if (this.props.param && !this.props.params) {
17 params = [this.props.param]
18 }
19 let notParams = this.props.notParams
20 if (this.props.notParam && !this.props.notParams) {
21 notParams = [this.props.notParam]
22 }
23 let headers = this.props.headers
24 if (this.props.header && !this.props.headers) {
25 headers = [this.props.header]
26 }
27 let notHeaders = this.props.notHeaders
28 if (this.props.notHeader && !this.props.notHeaders) {
29 notHeaders = [this.props.notHeader]
30 }
31 const outputs = this.props.outputs
32 const errors = this.props.errors
33
34 return (
35 <div className={errors.length ? '' : 'hidden' }>
36 {errors.map(error => {
37 let errorString = ''
38 if (!error.field && !notFields && !error.param && !notParams && !error.header && !notHeaders) {
39 return ''
40 }
41 if (fields && error.field && fields.indexOf(error.field) < 0) {
42 return ''
43 }
44 if (notFields && error.field && notFields.indexOf(error.field) >= 0) {
45 return ''
46 }
47 if (params && error.param && params.indexOf(error.param) < 0) {
48 return ''
49 }
50 if (notParams && error.param && notParams.indexOf(error.param) >= 0) {
51 return ''
52 }
53 if (headers && error.header && headers.indexOf(error.header) < 0) {
54 return ''
55 }
56 if (notHeaders && error.header && notHeaders.indexOf(error.header) >= 0) {
57 return ''
58 }
59 if (outputs[error.error] == undefined) {
60 errorString = 'An unknown error occurred. Please contact support. Sorry.'
61 } else {
62 errorString = outputs[error.error]
63 }
64 const id = [error.field, error.param, error.header, error.error].join("|")
65 return <div key={id} className="flash-error validation"><span>{errorString}</span></div>
66 })}
67 </div>
68 )
69 }
70 })