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

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

import Error from "../../Shared/Error";
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 += ` and ${duration(min % 60, "minutes").humanize()}`;
  }
  CShiftDurationOptions.push({
    key: min,
    value: min,
    text: displayText
  });
}

export const ClientShiftFormView = ({
  isSendingCShiftRequest,
  cShiftRequestErrors,
  cShiftRequestSuccess,
  user,
  employeeChoices,
  priceChoices,
  employeeUUID,
  priceUUID,
  startTime,
  duration,
  note,
  selectedShiftDates,
  changeSelectedEmployee,
  changeSelectedPrice,
  changeShiftStartTime,
  changeShiftDuration,
  changeShiftNote,
  handleSelectDate,
  onSubmitShifts,
  isEditing = false,
  isProviderCheckedIn = false
}) => (
  <Container>
    <Header>
      {!isEditing && "Schedule Shifts"}
      {isEditing && !isProviderCheckedIn && "Edit Shift"}
      {isEditing && isProviderCheckedIn && "Adjust and Approve Hours"}
    </Header>
    <Form
      loading={isSendingCShiftRequest}
      onSubmit={onSubmitShifts}
      error={!!cShiftRequestErrors.length}
      success={!!cShiftRequestSuccess}
    >
      <Form.Group widths="equal">
        <Form.Field>
          <label>Employee</label>
          <Dropdown
            onChange={changeSelectedEmployee}
            options={employeeChoices}
            placeholder="Select employee"
            selection
            fluid
            search
            disabled={!!isEditing}
            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
            disabled={!employeeUUID || !!isEditing}
            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"
            timeFormat="h:mm a"
            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"
          value={note}
          onChange={changeShiftNote}
        />
      </Form.Field>
      <Form.Field style={{ textAlign: "center" }}>
        <label>Dates</label>
        <DatePicker
          inline
          onSelect={handleSelectDate}
          highlightDates={selectedShiftDates}
          monthsShown={2}
          // https://github.com/Hacker0x01/react-datepicker/pull/1360
          peekNextMonth={false} // this is broken? Fixed in PR 1360
          minDate={utc(new Date()).add(1, "day")}
          maxDate={utc(new Date())
            .add(1, "month")
            .endOf("month")}
        />
      </Form.Field>
      {!!cShiftRequestErrors.length && (
        <Error header="" error={cShiftRequestErrors[0]} />
      )}
      <Message success>
        <Message.Header>Add Shift successful!</Message.Header>
        <p>Shifts successfully scheduled.</p>
        {!!cShiftRequestSuccess && (
          <Redirect to="/user/profile/client/shifts" />
        )}
      </Message>
      <Form.Button>
        {!isEditing && "Schedule Shifts"}
        {isEditing && !isProviderCheckedIn && "Edit Shift"}
        {isEditing && isProviderCheckedIn && "Adjust and Approve Hours"}
      </Form.Button>
    </Form>
  </Container>
);

export default ClientShiftFormView;