sign-up.js

import React, { Component } from 'react';
import { intlShape } from 'react-intl';
import PropTypes from 'prop-types';

import { SettingsPropType } from 'common/propTypes';

import compose from './composition';
import Render from './render';
import ErrorNotification from './render/error-notification';

export class SignUp extends Component {
  static propTypes = {
    intl: intlShape.isRequired,
    settings: SettingsPropType.isRequired,
    isSubmitting: PropTypes.bool.isRequired,
    signUpSuccess: PropTypes.bool,
    changeRoute: PropTypes.func,
    signUpError: PropTypes.string,
    notifications: PropTypes.node,
    notify: PropTypes.func.isRequired,
  };

  static defaultProps = {
    changeRoute: undefined,
    signUpSuccess: false,
    signUpError: undefined,
    notifications: undefined,
  };

  state = {
    values: undefined,
  };

  fail = reason => {
    const { props: { intl, notify } } = this;

    return notify(<ErrorNotification intl={intl} reason={reason} />);
  };

  submit = values => {
    const { props: { settings: { DB: { signUp } } }, fail } = this;

    return signUp(values).catch(fail);
  };

  persist = values => this.setState({ values });

  getTabs = () => this.props.settings.UI.tabs(this.props);

  getForm = () => {
    const { props, persist, submit } = this;
    const { props: { settings: { UI: { form } } } } = props;

    return {
      ...form(props),
      onChange: persist,
      onSubmit: submit,
    };
  };

  getProps = () => {
    const {
      props: { intl, isSubmitting, changeRoute, signUpSuccess, notifications },
      getTabs,
      getForm,
    } = props;

    return {
      tabs: getTabs(),
      form: getForm(),
      navigate: changeRoute,
      intl,
      isSubmitting,
      signUpSuccess,
      notifications,
    };
  };

  render() {
    const props = this.getProps();

    return <Render {...props} />;
  }
}

export default compose(SignUp);