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

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

import {
  clearEmailVerificationError,
  clearEmailVerificationSuccess,
  setFormEmailVerification
} from "../../actions/auth/reducer.actions";
import { sendEmailVerificationRequest } from "../../actions/auth/saga.actions";
import Error from "../Shared/Error";

class VerifyEmail extends Component {
  componentWillMount() {
    const emailKey = this.props.match.params.emailKey;
    this.props.dispatch(clearEmailVerificationError());
    this.props.dispatch(clearEmailVerificationSuccess());
    this.props.dispatch(setFormEmailVerification(emailKey));
  }

  changeEmailKey = event => {
    this.props.dispatch(setFormEmailVerification(event.target.value));
  };

  onSubmitEmailVerification = event => {
    event.preventDefault();
    const { dispatch, emailVerificationString } = this.props;
    dispatch(
      sendEmailVerificationRequest({ emailKey: emailVerificationString })
    );
  };

  render() {
    const {
      isSendingAuthRequest,
      emailVerificationRequestError,
      emailVerificationRequestSuccess,
      emailVerificationString
    } = this.props;
    return (
      <VerifyEmailView
        isSendingAuthRequest={isSendingAuthRequest}
        emailVerificationRequestError={emailVerificationRequestError}
        emailVerificationRequestSuccess={emailVerificationRequestSuccess}
        emailVerificationString={emailVerificationString}
        changeEmailKey={this.changeEmailKey}
        onSubmitEmailVerification={this.onSubmitEmailVerification}
      />
    );
  }
}

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

const VerifyEmailView = ({
  isSendingAuthRequest,
  emailVerificationRequestError,
  emailVerificationRequestSuccess,
  emailVerificationString,
  changeEmailKey,
  onSubmitEmailVerification
}) => (
  <Container>
    <Header>Verify Email</Header>
    <Form
      loading={isSendingAuthRequest}
      onSubmit={onSubmitEmailVerification}
      error={!!emailVerificationRequestError}
      success={!!emailVerificationRequestSuccess}
    >
      <Form.Field>
        <label>Email Verification Key</label>
        <input
          placeholder=""
          type="text"
          value={emailVerificationString}
          onChange={changeEmailKey}
        />
      </Form.Field>
      <Error
        header="Email Verification failed!"
        error={emailVerificationRequestError}
      />
      <Message success>
        <Message.Header>Email Verified!</Message.Header>
        <p>Please proceed to <Link to="/auth/login">log in</Link>.</p>
      </Message>
      <Form.Button primary>Verify Email</Form.Button>
    </Form>
  </Container>
);

export default connect(mapStateToProps)(VerifyEmail);