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

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

import {
  setFormEmployeeUUID,
  setFormPriceUUID,
  setFormShiftStartTime,
  setFormShiftDuration,
  setClearCshiftState
} from "../../../actions/cShift/reducer.actions";

import "react-datepicker/dist/react-datepicker.css";
import "./shiftStartTimeOverrides.css";

const CShiftDurationOptions = [];
for (let min = 60; min <= 480; min += 30) {
  let displayText = duration(min, "minutes").humanize();
  if (min % 60) {
    displayText = duration(Math.floor(min / 60), "hours").humanize();
    displayText += ", " + duration(min % 60, "minutes").humanize();
  }
  CShiftDurationOptions.push({
    key: min,
    value: min,
    text: displayText
  });
}

class ClientAddShiftForm extends Component {
  componentWillMount = () => {
    this.props.dispatch(setClearCshiftState());
  };

  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));
  };

  /**
   * change handler for shift start time selector.
   * @param date - instance of moment
   */
  changeShiftStartTime = date => {
    this.props.dispatch(setFormShiftStartTime(date));
  };

  changeShiftDuration = (e, { value }) => {
    this.props.dispatch(setFormShiftDuration(value));
  };

  render() {
    const {
      selfUser,
      employeeUUID,
      priceUUID,
      startTime,
      duration
    } = 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}
        startTime={startTime}
        duration={duration}
        changeSelectedEmployee={this.changeSelectedEmployee}
        changeSelectedPrice={this.changeSelectedPrice}
        changeShiftStartTime={this.changeShiftStartTime}
        changeShiftDuration={this.changeShiftDuration}
      />
    );
  }
}

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

const ClientAddShiftFormView = ({
  user,
  employeeChoices,
  priceChoices,
  employeeUUID,
  priceUUID,
  startTime,
  duration,
  changeSelectedEmployee,
  changeSelectedPrice,
  changeShiftStartTime,
  changeShiftDuration
}) => (
  <Container>
    <Header>Schedule a Shift</Header>
    <Form>
      <Form.Group widths="equal">
        <Form.Field>
          <label>Employee</label>
          <Dropdown
            onChange={changeSelectedEmployee}
            options={employeeChoices}
            placeholder="Select employee"
            selection
            fluid
            search
            noResultsMessage="No approved employees found."
            value={employeeUUID}
          />
        </Form.Field>
        <Form.Field>
          <label>Price</label>
          <Dropdown
            onChange={changeSelectedPrice}
            options={priceChoices}
            placeholder="Select price"
            selection
            fluid
            search
            noResultsMessage="No prices for given employee."
            value={priceUUID}
          />
        </Form.Field>
        <Form.Field>
          <label>Shift Start Time</label>
          <DatePicker
            selected={startTime}
            onChange={changeShiftStartTime}
            showTimeSelect
            showTimeSelectOnly
            timeIntervals={30}
            dateFormat="LT Z"
            timeFormat="hh:mm"
            placeholderText="Select shift start time"
          />
        </Form.Field>
        <Form.Field>
          <label>Shift Duration</label>
          <Dropdown
            onChange={changeShiftDuration}
            options={CShiftDurationOptions}
            placeholder="Select duration"
            selection
            fluid
            value={duration}
          />
        </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);