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

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link, Redirect } from "react-router-dom";
import {
  Container,
  Dropdown,
  Form,
  Header,
  Input,
  Label,
  Message
} from "semantic-ui-react";
import {
  clearPriceRequestError,
  clearPriceRequestSuccess,
  setGetEmployeeUUID,
  setFormPriceAmount,
  setGetWorktypeUUID
} from "../../../actions/price/reducer.actions";
import { createPriceRequest } from "../../../actions/price/saga.actions";
import Error from "../../Shared/Error";

class CreatePriceForm extends Component {
  constructor(props) {
    super(props);

    // Get valid worktype options
    const { selfUser } = props;
    const workTypes = ((selfUser || {}).client || {}).work_types || [];
    const workTypeOptions = workTypes
      .filter(worktype => !worktype.deleted)
      .map(worktype => ({
        key: worktype.uuid,
        text: worktype.label,
        color: worktype.color,
        value: worktype.uuid,
        content: (
          <span>
            <Label
              circular
              empty
              style={{
                backgroundColor: worktype.color,
                borderColor: worktype.color
              }}
            />{" "}
            {worktype.label}
          </span>
        )
      }));

    // Get referenced employee
    const employeeUUID = this.props.match.params.providerUUID;
    const employees = ((selfUser || {}).client || {}).employees || [];
    const employee =
      employees.filter(employee => employee.uuid === employeeUUID)[0] || null;
    this.props.dispatch(setGetEmployeeUUID((employee || {}).uuid || ""));
    this.state = {
      workTypeOptions,
      employee
    };
  }

  componentWillMount = () => {
    this.props.dispatch(clearPriceRequestError());
    this.props.dispatch(clearPriceRequestSuccess());
  };

  changeWorkType = (e, data) => {
    this.props.dispatch(setGetWorktypeUUID(data.value));
  };

  changeAmount = event => {
    this.props.dispatch(setFormPriceAmount(event.target.value));
  };

  onSubmitPrice = event => {
    event.preventDefault();
    const { getEmployeeUUID, getWorktypeUUID, amount } = this.props;
    this.props.dispatch(
      createPriceRequest({
        get_employee_uuid: getEmployeeUUID,
        get_work_type_uuid: getWorktypeUUID,
        amount
      })
    );
  };

  render() {
    const {
      isSendingPriceRequest,
      priceRequestError,
      priceRequestSuccess,
      getEmployeeUUID,
      getWorktypeUUID,
      amount,
      selfUser
    } = this.props;
    const { employee, workTypeOptions } = this.state;

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

    return (
      <CreatePriceFormView
        isSendingPriceRequest={isSendingPriceRequest}
        priceRequestError={priceRequestError}
        priceRequestSuccess={priceRequestSuccess}
        employee={employee}
        workTypeOptions={workTypeOptions}
        getEmployeeUUID={getEmployeeUUID}
        getWorktypeUUID={getWorktypeUUID}
        amout={amount}
        changeWorkType={this.changeWorkType}
        changeAmount={this.changeAmount}
        onSubmitPrice={this.onSubmitPrice}
      />
    );
  }
}

const CreatePriceFormView = ({
  isSendingPriceRequest,
  priceRequestError,
  priceRequestSuccess,
  employee,
  workTypeOptions,
  getEmployeeUUID,
  getWorktypeUUID,
  amount,
  changeWorkType,
  changeAmount,
  onSubmitPrice
}) => (
  <Container>
    <Header>Assign Work</Header>
    {employee && (
      <Message info>
        <Message.Header>Employee Information</Message.Header>
        <Message.List>
          <Message.Item>UUID: {employee.uuid}</Message.Item>
          <Message.Item>
            Provider Email: {(employee.provider || {}).email || "No Email!"}
          </Message.Item>
          <Message.Item>
            Provider Name:{" "}
            {`${(employee.provider || {}).first_name} ${
              (employee.provider || {}).last_name
            }`.trim() || "No Name!"}
          </Message.Item>
          <Message.Item>
            Provider Phone Number:{" "}
            {`${((employee.provider || {}).userinfo || {}).phone_number ||
              "No Number!"}`}
          </Message.Item>
          <Message.Item>Approved: {"" + employee.approved}</Message.Item>
          <Message.Item>Deleted: {"" + employee.deleted}</Message.Item>
        </Message.List>
      </Message>
    )}
    {!employee && (
      <Message warning>
        <Message.Header>Invalid Employee</Message.Header>
        <p>No accessable employee exists for given UUID.</p>
      </Message>
    )}
    {!workTypeOptions.length && (
      <Message warning>
        <Message.Header>No Work Types</Message.Header>
        <p>
          No worktypes exists. Please{" "}
          <Link to="/user/profile/client/worktypes">
            create some work types
          </Link>.
        </p>
      </Message>
    )}
    <Form
      loading={isSendingPriceRequest}
      onSubmit={onSubmitPrice}
      error={!!priceRequestError}
      success={!!priceRequestSuccess}
    >
      <Form.Field>
        <label>Work Type</label>
        <Dropdown
          placeholder="Select Work Type"
          fluid
          selection
          search
          options={workTypeOptions}
          onChange={changeWorkType}
          value={getWorktypeUUID}
        />
      </Form.Field>
      <Form.Field>
        <label>Hourly Rate</label>
        <Input
          labelPosition="left"
          type=""
          placeholder="Amount"
          onChange={changeAmount}
          value={amount}
        >
          <Label basic>$</Label>
          <input />
        </Input>
      </Form.Field>
      <Error header="Create Price failed!" error={priceRequestError} />
      <Message success>
        <Message.Header>Create Price successful!</Message.Header>
        <p>Price successfully created.</p>
        {!!priceRequestSuccess && (
          <Redirect to="/user/profile/client/providers" />
        )}
      </Message>
      <Form.Button>Submit Price</Form.Button>
    </Form>
  </Container>
);

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

export default connect(mapStateToProps)(CreatePriceForm);