Skip to content

Instantly share code, notes, and snippets.

@jeffkole
Created January 20, 2016 00:17
Show Gist options
  • Save jeffkole/fdd5fbb897e7d145057f to your computer and use it in GitHub Desktop.
Save jeffkole/fdd5fbb897e7d145057f to your computer and use it in GitHub Desktop.
21 lines of explanation for a change that amounted to swapping the arguments to a `||`.
const errorMessage = this.state.errorMessage || (this.props.error && this.props.error.message);
const errorMessage = (this.props.error && this.props.error.message) || this.state.errorMessage;
// Show our internal error message before showing any error that may have
// come from the outside, because the internal error message is generated
// before any external one could have been. When we prioritize the external
// error message, the following flow results in the wrong message being
// displayed:
// 1. User enters a card that will be declined by the server
// (try "4000000000000002")
// 2. "Your card has been declined" error is displayed (external)
// 3. The user then enters a card that will be declined by the client,
// which is an internal error generated by the Stripe.js client in the
// call to createToken.
// (try "4242424242424241" or try using only a 2 digit CVC)
// 4. The same "Your card has been declined" error is still displayed even
// though it is no longer valid.
// This happens because the external error is not cleared when the form is
// resubmitted, because the first acts internal to this
// component, instead of being externalized in a Flux action.
//
// With this fix in, there is still an annoying flash of the prior error
// message, but it is at least better to have the most accurate error
// message displayed when the action is completed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment