accounts-frontend/src/pages/profile/ChangeEmailPage.js

// @flow
import type { RouterHistory, Match } from 'react-router-dom';
import type FormModel from 'components/ui/form/FormModel';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import ChangeEmail from 'components/profile/changeEmail/ChangeEmail';
import {
  requestEmailChange,
  setNewEmail,
  confirmNewEmail,
} from 'services/api/accounts';

type OwnProps = {|
  history: RouterHistory,
  match: {
    ...Match,
    params: {
      step: 'step1' | 'step2' | 'step3',
      code: string,
    },
  },
|};

type Props = {
  ...OwnProps,
  lang: string,
  email: string,
};

class ChangeEmailPage extends Component<Props> {
  static displayName = 'ChangeEmailPage';

  static contextTypes = {
    userId: PropTypes.number.isRequired,
    onSubmit: PropTypes.func.isRequired,
    goToProfile: PropTypes.func.isRequired,
  };

  componentWillMount() {
    const { step } = this.props.match.params;

    if (step && !/^step[123]$/.test(step)) {
      // wrong param value
      this.props.history.push('/404');
    }
  }

  render() {
    const { step = 'step1', code } = this.props.match.params;

    return (
      <ChangeEmail
        onSubmit={this.onSubmit}
        email={this.props.email}
        lang={this.props.lang}
        step={((step.slice(-1): any): number) * 1 - 1}
        onChangeStep={this.onChangeStep}
        code={code}
      />
    );
  }

  onChangeStep = (step: number) => {
    this.props.history.push(`/profile/change-email/step${++step}`);
  };

  onSubmit = (step: number, form: FormModel) => {
    return this.context
      .onSubmit({
        form,
        sendData: () => {
          const { userId } = this.context;
          const data = form.serialize();

          switch (step) {
            case 0:
              return requestEmailChange(userId, data.password).catch(
                handleErrors(),
              );
            case 1:
              return setNewEmail(userId, data.email, data.key).catch(
                handleErrors('/profile/change-email'),
              );
            case 2:
              return confirmNewEmail(userId, data.key).catch(
                handleErrors('/profile/change-email'),
              );
            default:
              throw new Error(`Unsupported step ${step}`);
          }
        },
      })
      .then(() => {
        step > 1 && this.context.goToProfile();
      });
  };
}

function handleErrors(repeatUrl) {
  return resp => {
    if (resp.errors) {
      if (resp.errors.key) {
        resp.errors.key = {
          type: resp.errors.key,
          payload: {},
        };

        if (
          ['error.key_not_exists', 'error.key_expire'].includes(
            resp.errors.key.type,
          ) &&
          repeatUrl
        ) {
          Object.assign(resp.errors.key.payload, {
            repeatUrl,
          });
        }
      }
    }

    return Promise.reject(resp);
  };
}

export default connect<Props, OwnProps, _, _, _, _>(state => ({
  email: state.user.email,
  lang: state.user.lang,
}))(ChangeEmailPage);