Use helper to handle API errors

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -6,6 +6,10 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { ensureCurrentUser } from '../../util/data';
+import {
+  isSignupEmailTakenError,
+  isTooManyEmailVerificationRequestsError,
+} from '../../util/errors';
 import {
   PageLayout,
   NamedLink,
@@ -23,26 +27,6 @@ import { sendVerificationEmail } from '../../ducks/user.duck';
 
 import css from './AuthenticationPage.css';
 
-const ERROR_CODE_EMAIL_TAKEN = 'email-taken';
-const ERROR_CODE_TOO_MANY_VERIFICATION_REQUESTS = 'too-many-verification-requests';
-
-const firstApiError = error => {
-  if (error && error.data && error.data.errors && error.data.errors.length > 0) {
-    return error.data.errors[0];
-  }
-  return null;
-};
-
-const isEmailTakenApiError = error => {
-  const apiError = firstApiError(error);
-  return apiError && apiError.code === ERROR_CODE_EMAIL_TAKEN;
-};
-
-const isTooManyVerificationRequestsApiError = error => {
-  const apiError = firstApiError(error);
-  return apiError && apiError.code === ERROR_CODE_TOO_MANY_VERIFICATION_REQUESTS;
-};
-
 export const AuthenticationPageComponent = props => {
   const {
     authInfoError,
@@ -108,7 +92,7 @@ export const AuthenticationPageComponent = props => {
 
   const signupErrorMessage = (
     <div className={css.error}>
-      {isEmailTakenApiError(signupError)
+      {isSignupEmailTakenError(signupError)
         ? <FormattedMessage id="AuthenticationPage.signupFailedEmailAlreadyTaken" />
         : <FormattedMessage id="AuthenticationPage.signupFailed" />}
     </div>
@@ -167,7 +151,9 @@ export const AuthenticationPageComponent = props => {
     </NamedLink>
   );
 
-  const resendErrorTranslationId = isTooManyVerificationRequestsApiError(sendVerificationEmailError)
+  const resendErrorTranslationId = isTooManyEmailVerificationRequestsError(
+    sendVerificationEmailError
+  )
     ? 'AuthenticationPage.resendFailedTooManyRequests'
     : 'AuthenticationPage.resendFailed';
   const resendErrorMessage = sendVerificationEmailError

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -6,18 +6,12 @@ import { isEqual } from 'lodash';
 import { arrayMove } from 'react-sortable-hoc';
 import classNames from 'classnames';
 import { noEmptyArray } from '../../util/validators';
+import { isUploadListingImageOverLimitError } from '../../util/errors';
 import { AddImages, Button, ValidationError } from '../../components';
 
 import css from './EditListingPhotosForm.css';
 
 const ACCEPT_IMAGES = 'image/*';
-const UPLOAD_OVER_LIMIT_ERROR_CODE = 'upload-over-limit';
-
-// Detect if the given error has the upload-over-limit error code
-const isUploadOverLimit = error => {
-  const hasErrors = error && error.data && error.data.errors && error.data.errors.length > 0;
-  return hasErrors && error.data.errors.some(e => e.code === UPLOAD_OVER_LIMIT_ERROR_CODE);
-};
 
 // Add image wrapper. Label is the only visible element, file input is hidden.
 const RenderAddImage = props => {
@@ -115,7 +109,7 @@ export class EditListingPhotosFormComponent extends Component {
     const imageRequiredMessage = intl.formatMessage({ id: 'EditListingPhotosForm.imageRequired' });
 
     const { createListingsError, showListingsError, uploadImageError } = errors;
-    const uploadOverLimit = isUploadOverLimit(uploadImageError);
+    const uploadOverLimit = isUploadListingImageOverLimitError(uploadImageError);
 
     let uploadImageFailed = null;
 

src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js

@@ -5,11 +5,10 @@ import { reduxForm, propTypes as formPropTypes } from 'redux-form';
 import classNames from 'classnames';
 import { PrimaryButton, TextInputField, NamedLink } from '../../components';
 import * as validators from '../../util/validators';
+import { isPasswordRecoveryEmailNotFoundError } from '../../util/errors';
 
 import css from './PasswordRecoveryForm.css';
 
-const isNotFoundError = error => error && error.status === 404;
-
 const PasswordRecoveryFormComponent = props => {
   const {
     rootClassName,
@@ -40,7 +39,9 @@ const PasswordRecoveryFormComponent = props => {
   const emailRequired = validators.required(emailRequiredMessage);
   // In case a given email is not found, pass a custom error message
   // to be rendered with the input component
-  const customErrorText = isNotFoundError(recoveryError) ? emailNotFoundMessage : null;
+  const customErrorText = isPasswordRecoveryEmailNotFoundError(recoveryError)
+    ? emailNotFoundMessage
+    : null;
   const initialEmail = initialValues ? initialValues.email : null;
   const buttonDisabled = (pristine && !initialEmail) || submitting;
   const classes = classNames(rootClassName || css.root, className);

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js

@@ -4,6 +4,10 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import * as propTypes from '../../util/propTypes';
+import {
+  isPasswordRecoveryEmailNotFoundError,
+  isPasswordRecoveryEmailNotVerifiedError,
+} from '../../util/errors';
 import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
@@ -144,9 +148,9 @@ export const PasswordRecoveryPageComponent = props => {
   );
 
   let content;
-  if (recoveryError && recoveryError.status === 409) {
+  if (isPasswordRecoveryEmailNotVerifiedError(recoveryError)) {
     content = emailNotVerifiedContent;
-  } else if (recoveryError && recoveryError.status === 404) {
+  } else if (isPasswordRecoveryEmailNotFoundError(recoveryError)) {
     content = submitEmailContent;
   } else if (recoveryError) {
     content = genericErrorContent;