bukopin-redemption-client-react/src/common/pages/Register/index.js

import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Layout,
  Content,
  Row,
  Col,
  Card,
  message,
  Button,
  Spin,
  Icon, notification
} from 'antd';
import css from 'reactcss';
import RegisterForm from './Form';
import {Link} from 'react-router-dom';
import {LINKS} from '../../routes';
import QueueAnim from 'rc-queue-anim';
import './style.scss';

@inject('appstate')
@observer
export default class ComponentName extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      isSuccess: false,
      isLoading: false,
      registerFailedMessage: ""
    };
    this.defaultState = Object.assign({}, this.state);

    this.style = css({
      default: {
        container: {
          minHeight: '100vh'
        },
        loginForm: {
          paddingTop: '15%'
        }
      }
    })

    this.authStore = props.appstate.auth;

    this.query = this
      .props
      .location
      .search
      .substr(1)
      .split('&')
      .reduce((q, value) => {
        const [k, v] = value.split('=');
        q[k] = v;
        return q;
      }, {});
  }

  componentDidMount() {}

  submitFormAction(formInstance, value) {
    console.log(value);
    this.setState({isLoading: true})
    setTimeout(() => {
      this
        .authStore
        .register(value)
        .then(res => {
          // notification.open({
          //   message: 'Register Success',
          //   description: 'Please check your email to continue'
          // });
          this.props.history.push({
            pathname:LINKS.VOUCHERS
          });
          this.setState({isLoading: false, isSuccess: true})
          // this
        })
        .catch(err => {
          if (err && err.errors && err.errors[0] && err.errors[0].message) {
            message.error(err.errors[0].message.charAt(0).toUpperCase() + err.errors[0].message.slice(1));
          } else {
            message.error(err.message.charAt(0).toUpperCase() + err.errors[0].message.slice(1));
          }
          this.setState({isLoading: false, isSuccess: false, registerFailedMessage: err.message})
        });
    }, 1000);
  }

  render() {

    const RegisterFormObject = (
      <div className="register-box">
        <Spin spinning={this.state.isLoading}>
          <div>
            <div className="header">
              <div className="align-center">
                <img alt="logo" src="/assets/images/green.png"/>
              </div>
              <p>Register Now</p>
            </div>
            <RegisterForm
              username={this.query.email}
              footer={
                <Link
                  to={LINKS.LOGIN +"?"+ Object.keys(this.query).map(k => `${k}=${this.query[k]}`).join('&')}>
                  <span style={{fontSize: 12}}>Back to Login</span>
                </Link>
              }
              onSubmit={this.submitFormAction.bind(this)}/>
          </div>
        </Spin>
      </div>
    )

    const RegisterSuccessObject = (
      <div className="register-box">
        <div style={{textAlign: "center", marginTop: "20%"}}>
          <h1 style={{color: "green", fontSize: 40}}><Icon type="check" /></h1>
          <h2>Register Success</h2>
          <p>We have sent an email to your address, please confirm it to continue</p>
          <Link to={LINKS.LOGIN +"?"+ Object.keys(this.query).map(k => `${k}=${this.query[k]}`).join('&')}>
            <p style={{fontSize: 12, marginTop: 50}}>Back to Login</p>
          </Link>
        </div>
      </div>
    )

    const RegisterFailedObject = (
      <div className="register-box">
        <div style={{textAlign: "center", marginTop: "20%"}}>
          <h1 style={{color: "red", fontSize: 40}}><Icon type="close" /></h1>
          <h2>Register Failed</h2>
          <p>{this.state.registerFailedMessage}</p>
          <Link to={LINKS.REGISTER}>
            <p style={{fontSize: 12, marginTop: 50}}>Back to Register</p>
          </Link>
        </div>
      </div>
    )

    return (
      <div>
          <div className="register" style={this.style.container}>
            {this.state.isSuccess && !this.state.registerFailedMessage ? (RegisterSuccessObject) : ("")}
            {this.state.isSuccess && this.state.registerFailedMessage ? (RegisterFailedObject) : ("")}
            {!this.state.isSuccess ? (RegisterFormObject) : ("")}
          </div>
      </div>
    )
  }
}