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

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

import {
  clearCShiftRequestError,
  clearCShiftRequestSuccess,
  setFormEmployeeUUID,
  setFormPriceUUID
} from "../../../actions/cShift/reducer.actions";

class ClientAddShiftForm extends Component {
  componentWillMount = () => {
    this.props.dispatch(clearCShiftRequestError());
    this.props.dispatch(clearCShiftRequestSuccess());
    this.props.dispatch(setFormEmployeeUUID(""));
    this.props.dispatch(setFormPriceUUID(""));
  };

  changeSelectedEmployee = (e, { value }) => {
    if (value !== this.props.employeeUUID) {
      this.props.dispatch(setFormPriceUUID(""));
    }
    this.props.dispatch(setFormEmployeeUUID(value));
  };

  changeSelectedPrice = (e, { value }) => {
    this.props.dispatch(setFormPriceUUID(value));
  };

  render() {
    const { selfUser, employeeUUID, priceUUID } = this.props;

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

    const employeeChoices = selfUser.client.employees
      .filter(employee => !employee.deleted && !!employee.approved)
      .map(({ uuid, provider }) => ({
        key: uuid,
        value: uuid,
        text: provider.email
      }));
    const priceChoices = [];
    if (employeeUUID) {
      const employee = selfUser.client.employees.find(emp => {
        return emp && emp.uuid === employeeUUID;
      });
      priceChoices.push(
        ...employee.prices
          .filter(price => !price.deleted)
          .map(({ amount, uuid, work_type }) => ({
            key: uuid,
            value: uuid,
            text: work_type.label,
            content: (
              <Header>
                <Label
                  circular
                  empty
                  style={{
                    backgroundColor: work_type.color,
                    borderColor: work_type.color
                  }}
                />
                {work_type.label}
                <Header.Subheader
                  style={{ paddingLeft: "2em" }}
                  content={`Hourly Rate: ${amount}`}
                />
              </Header>
            )
          }))
      );
    }
    return (
      <ClientAddShiftFormView
        user={selfUser}
        employeeChoices={employeeChoices}
        priceChoices={priceChoices}
        employeeUUID={employeeUUID}
        priceUUID={priceUUID}
        changeSelectedEmployee={this.changeSelectedEmployee}
        changeSelectedPrice={this.changeSelectedPrice}
      />
    );
  }
}

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

const ClientAddShiftFormView = ({
  user,
  employeeChoices,
  priceChoices,
  employeeUUID,
  priceUUID,
  changeSelectedEmployee,
  changeSelectedPrice
}) => (
  <Container>
    <Header>Schedule a Shift</Header>
    <Form>
      <Form.Group widths="equal">
        <Form.Field>
          <label>Employee</label>
          <Dropdown
            placeholder="Select employee"
            openOnFocus
            closeOnBlur
            selection
            fluid
            search
            options={employeeChoices}
            noResultsMessage="No approved employees found."
            onChange={changeSelectedEmployee}
            value={employeeUUID}
          />
        </Form.Field>
        <Form.Field>
          <label>Price</label>
          <Dropdown
            placeholder="Select price"
            openOnFocus
            closeOnBlur
            selection
            fluid
            search
            options={priceChoices}
            noResultsMessage="No prices for given employee."
            onChange={changeSelectedPrice}
            value={priceUUID}
          />
        </Form.Field>
        <Form.Field>
          <label>Time</label>
          <Input placeholder="Time" type="text" />
        </Form.Field>
        <Form.Field>
          <label>Duration</label>
          <Input placeholder="Duration" type="text" />
        </Form.Field>
      </Form.Group>
      <Form.Field>
        <label>Note</label>
        <TextArea placeholder="Employee notes" />
      </Form.Field>
      <Form.Field>
        <label>Days</label>
        <TextArea placeholder="Date Picker" />
      </Form.Field>
      <Form.Button>Schedule Shift</Form.Button>
    </Form>
  </Container>
);

export default connect(mapStateToProps)(ClientAddShiftForm);