caremyway-client/src/components/Auth/Register.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { Container, Form, Header, Message  } from "semantic-ui-react";

import {
  clearAuthRequestError,
  setFormEmail,
  setFormPassword,
  setFormPasswordConfirmation
} from "../../actions/auth/reducer.actions";
import { sendRegisterRequest } from "../../actions/auth/saga.actions";
import Error from "../Shared/Error";

class Register extends Component {
  constructor(props) {
    super(props);
    this.props.dispatch(clearAuthRequestError());
  }

  changeEmail = event => {
    this.props.dispatch(setFormEmail(event.target.value));
  };

  changePassword = event => {
    this.props.dispatch(setFormPassword(event.target.value));
  };

  changePasswordConfirmation = event => {
    this.props.dispatch(setFormPasswordConfirmation(event.target.value));
  };

  onSubmitRegistration = event => {
    event.preventDefault();
    const { dispatch, email, password, passwordConfirmation } = this.props;
    dispatch(
      sendRegisterRequest({
        email,
        password1: password,
        password2: passwordConfirmation
      })
    );
  };

  render() {
    const {
      isSendingAuthRequest,
      authRequestError,
      authRequestSuccess,
      email,
      password,
      passwordConfirmation
    } = this.props;
    return (
      <RegisterView
        isSendingAuthRequest={isSendingAuthRequest}
        authRequestError={authRequestError}
        authRequestSuccess={authRequestSuccess}
        email={email}
        password={password}
        passwordConfirmation={passwordConfirmation}
        changeEmail={this.changeEmail}
        changePassword={this.changePassword}
        changePasswordConfirmation={this.changePasswordConfirmation}
        onSubmitRegistration={this.onSubmitRegistration}
      />
    );
  }
}

function mapStateToProps(state) {
  return { ...state.auth };
}

/**
 * Functional view component for Register logic
 */
const RegisterView = ({
  isSendingAuthRequest,
  authRequestError,
  authRequestSuccess,
  email,
  password,
  passwordConfirmation,
  changeEmail,
  changePassword,
  changePasswordConfirmation,
  onSubmitRegistration
}) => (
  <Container>
    <Header>Register</Header>
    <Form
      loading={isSendingAuthRequest}
      onSubmit={onSubmitRegistration}
      error={!!authRequestError}
      success={!!authRequestSuccess}
    >
      <Form.Field>
        <label>Email</label>
        <input
          placeholder="bob@gmail.com"
          type="email"
          value={email}
          onChange={changeEmail}
        />
      </Form.Field>
      <Form.Field>
        <label>Password</label>
        <input
          placeholder="••••••••"
          type="password"
          value={password}
          onChange={changePassword}
        />
      </Form.Field>
      <Form.Field>
        <label>Password Confirmation</label>
        <input
          placeholder="••••••••"
          type="password"
          value={passwordConfirmation}
          onChange={changePasswordConfirmation}
        />
      </Form.Field>
      <Error header="Register failed!" error={authRequestError} />
      <Message
        success
        header="Registration Sent"
        content="A confirmation email has been sent to confirm your registration."
      />
      <Form.Button>Submit</Form.Button>
    </Form>
  </Container>
);

export default connect(mapStateToProps)(Register);