sign-up.render.js

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

import { forEach } from 'utils/rendering';
import Public from 'components/pages/public';
import Tab from 'components/Tab';
import Form from 'components/Form';
import GenericMessages from 'messages/generic';
import Spinner from 'components/Progress/Circular';

import styles from './styles.css';
import messages from './messages';

export default class SignUp extends Component {
  static propTypes = {
    intl: intlShape.isRequired,
    form: PropTypes.object.isRequired,
    tabs: PropTypes.arrayOf(
      PropTypes.shape({
        label: PropTypes.string.isRequired,
        url: PropTypes.string.isRequired,
        active: PropTypes.bool.isRequired,
      }),
    ),
    navigate: PropTypes.func,
    isSubmitting: PropTypes.bool.isRequired,
    signUpSuccess: PropTypes.bool.isRequired,
    notifications: PropTypes.node.isRequired,
  };

  static defaultProps = {
    tabs: [],
    navigate: noop,
  };

  onTabClick = ({ url }) => this.props.navigate(url);

  renderTabs = () => {
    const { props: { tabs }, onTabClick: onClick } = this;
    const className = {
      tab: styles.tab,
      button: styles.tabButton,
    };

    return (
      <div className={styles.tabs}>
        {forEach(tabs).render(Tab, {
          className,
          onClick,
        })}
      </div>
    );
  };

  renderForm = () => {
    const { props: { form } } = this;

    return (
      <div>
        <Form {...form} />
      </div>
    );
  };

  renderLoading = () => <Spinner centered={true} />;

  renderSuccess = () => {
    const { props: { intl: { formatMessage } } } = this;

    return (
      <div>
        <p className={styles.successTitle}>
          {formatMessage(GenericMessages.success)}
        </p>
        <p className={styles.text}>
          {formatMessage(messages.successBody)}
        </p>
      </div>
    );
  };

  renderContent = () => {
    const {
      props: { isSubmitting, signUpSuccess },
      renderLoading,
      renderSuccess,
      renderForm,
    } = this;

    switch (true) {
      case isSubmitting:
        return renderLoading();
      case signUpSuccess:
        return renderSuccess();
      default:
        return renderForm();
    }
  };

  render() {
    const {
      props: { notifications, intl: { formatMessage } },
      renderTabs,
      renderContent,
    } = this;
    const tabs = renderTabs();
    const content = renderContent();

    return (
      <Public title={formatMessage(GenericMessages['sign-up'])}>
        <div className={styles.container}>
          {tabs}
          <div className={styles.content}>
            {content}
          </div>
          {notifications}
        </div>
      </Public>
    );
  }
}