Display errors to user, don't just console.error them

[cheshire137]

In

overwatch-team-comps/app/assets/javascripts/components/composition-form.jsx

Line 7 in c4cf612

console.error('failed to load maps', error)

and other error handlers, we're just logging the error message in the JavaScript console. As mentioned in #46 (comment), we should also render a friendly message to the user that something went wrong. I think a new ErrorMessage component is the way to go. Here's how I imagine the flow working:

• Some JSON response fails and one of our error handlers in ComponentForm is called. Besides console.error'ing, they should also this.setState({ error: 'description of the problem' }).
• In the render for ComponentForm, we render <ErrorMessage error={this.state.error} />.
• The ErrorMessage component is smart enough to render null when the error it is given is undefined/blank/null. Otherwise, it renders a <p className="text-attack">{this.props.error}</p>.
• We could also include an 'X' button in the <p> tag of ErrorMessage that, onClick, will call some function given to it, like onDismiss. ComponentForm should pass this onDismiss prop to ErrorMessage. When it's called, ComponentForm should this.setState({ error: null }) which will result in ErrorMessage re-rendering to be empty.

[cheshire137]

@justbarreto and I are going to pair on this one!

[justbarreto]

Something like this? I didn't do the inline example of an input. Will work with Steph for that.

[cheshire137]

Yeah! That's what I had in mind. 👍

[cheshire137]

Do you have Screenhero, @justbarreto? I can hook you up with an invitation if not.

[justbarreto]

I do believe I have screenhero. Haven't logged on in a while. @cheshire137 PM'ed you the email.

[RobThePM]

omg that screenshot looks amazing. i've been checking my email for 'updates', but havent seen anything. i'm glad i checked here! :)

[cheshire137]

Noooo Rob, don't believe it! That's a sample from another site, not our app.

[RobThePM]

Damn, rookie mistake

[RobThePM]

I'm okay with pushing this to version 2 if you guys want. Up to you. :)