caremyway-client/src/components/User/Client/ClientAddProviderForm.jsx

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

import {
  clearEmployeeRequestError,
  clearEmployeeRequestSuccess,
  setFormEmployeeEmail,
  setFormEmployeeNote
} from "../../../actions/employee/reducer.actions";
import { createEmployeeRequest } from "../../../actions/employee/saga.actions";
import Error from "../../Shared/Error";

class ClientAddProviderForm extends Component {
  componentWillMount = () => {
    this.props.dispatch(clearEmployeeRequestError());
    this.props.dispatch(clearEmployeeRequestSuccess());
    this.props.dispatch(setFormEmployeeEmail(""));
    this.props.dispatch(setFormEmployeeNote(""));
  };

  changeProviderEmail = event => {
    this.props.dispatch(setFormEmployeeEmail(event.target.value));
  };

  changeEmployeeNote = event => {
    this.props.dispatch(setFormEmployeeNote(event.target.value));
  };

  onSubmitEmployee = event => {
    event.preventDefault();
    const { email, note } = this.props;
    this.props.dispatch(createEmployeeRequest({ provider_email: email, note }));
  };

  render() {
    const {
      isSendingEmployeeRequest,
      employeeRequestError,
      employeeRequestSuccess,
      email,
      note,
      selfUser
    } = this.props;

    if (!selfUser.client) {
      return <Redirect to="/" />;
    }

    return (
      <ClientAddProviderFormView
        isSendingEmployeeRequest={isSendingEmployeeRequest}
        employeeRequestError={employeeRequestError}
        employeeRequestSuccess={employeeRequestSuccess}
        email={email}
        note={note}
        changeProviderEmail={this.changeProviderEmail}
        changeEmployeeNote={this.changeEmployeeNote}
        onSubmitEmployee={this.onSubmitEmployee}
      />
    );
  }
}

function mapStateToProps(state) {
  return { ...state.employee, selfUser: state.user.selfUser };
}

const ClientAddProviderFormView = ({
  isSendingEmployeeRequest,
  employeeRequestError,
  employeeRequestSuccess,
  email,
  note,
  changeProviderEmail,
  changeEmployeeNote,
  onSubmitEmployee
}) => (
  <Container>
    <Header>Add a Provider</Header>
    <Form
      loading={isSendingEmployeeRequest}
      onSubmit={onSubmitEmployee}
      error={!!employeeRequestError}
      success={!!employeeRequestSuccess}
    >
      <Form.Field>
        <label>Email Address</label>
        <Input
          placeholder="provider@caremyway.ca"
          type="email"
          value={email || ""}
          onChange={changeProviderEmail}
        />
      </Form.Field>
      <Form.Field>
        <label>Note</label>
        <TextArea
          placeholder="Employee notes"
          value={note}
          onChange={changeEmployeeNote}
        />
      </Form.Field>
      <Error header="Add Provider failed!" error={employeeRequestError} />
      <Message success>
        <Message.Header>Create Worktype successful!</Message.Header>
        <p>Worktype successfully created.</p>
        {!!employeeRequestSuccess && (
          <Redirect to="/user/profile/client/providers" />
        )}
      </Message>
      <Form.Button>Submit Worktype</Form.Button>
    </Form>
  </Container>
);

export default connect(mapStateToProps)(ClientAddProviderForm);