caremyway-client/src/components/User/Provider/ProviderShift.jsx

import { utc, duration, ISO_8601 } from "moment";
import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import {
  Button,
  Container,
  Header,
  Label,
  List,
  Loader,
  Message
} from "semantic-ui-react";
import { setClearPShiftState } from "../../../actions/pShift/reducer.actions";
import {
  getPShiftRequest,
  updatePShiftRequest
} from "../../../actions/pShift/saga.actions";
import Error from "../../Shared/Error";
import {
  getEmployerFromPrice,
  getWorkTypeFromPrice,
  getPriceFromPrice
} from "./ProviderShiftsShared";

class ProviderShift extends Component {
  handleChangePShiftApproval = (uuid, approved) => {
    return () => {
      this.props.dispatch(
        updatePShiftRequest({
          uuid,
          approved,
          action: "",
          chart: null,
          single: true
        })
      );
    };
  };

  render() {
    const {
      isSendingPShiftRequest,
      pShiftRequestError,
      pShiftRequestSuccess,
      selfUser
    } = this.props;

    if (!selfUser.provider) {
      return <Redirect to="/" />;
    }
    return (
      <ProviderShiftFormView
        isSendingPShiftRequest={isSendingPShiftRequest}
        pShiftRequestError={pShiftRequestError}
        shift={pShiftRequestSuccess}
        user={selfUser}
        handleChangePShiftApproval={this.handleChangePShiftApproval}
      />
    );
  }
}

const ProviderShiftFormView = ({
  isSendingPShiftRequest,
  pShiftRequestError,
  shift,
  user,
  handleChangePShiftApproval
}) => {
  const employer = getEmployerFromPrice(shift.price, user) || {};
  const client = employer.client || {};
  const workType = getWorkTypeFromPrice(shift.price, user) || {};
  const price = getPriceFromPrice(shift.price, user) || {};
  const min = duration(
    utc(shift.set_end, ISO_8601) - utc(shift.set_start, ISO_8601),
    "milliseconds"
  ).as("minutes");
  let displayDuration = duration(min, "minutes").humanize();
  if (min % 60) {
    displayDuration = duration(Math.floor(min / 60), "hours").humanize();
    displayDuration += ` and ${duration(min % 60, "minutes").humanize()}`;
  }
  const approved = !!shift.approved;
  const rejected = !shift.approved && shift.approved !== null;
  const pending = shift.approved === null;
  return (
    <Container>
      <Header>Shift Details</Header>
      <Loader active={isSendingPShiftRequest} />
      <Label color={approved ? "green" : rejected ? "red" : "grey"} tag size="small">
        {approved && "Approved"}
        {pending && "Approval Pending"}
        {rejected && "Rejected"}
      </Label>
      <Label
        circular
        empty
        style={{
          backgroundColor: workType.color,
          borderColor: workType.color
        }}
      />{" "}
      {workType.label}
      <List bulleted>
        <List.Item>
          {"Scheduled at " +
            utc(shift.set_start, ISO_8601)
              .local(false)
              .format("dddd, MMMM Do YYYY, h:mm a Z")}
        </List.Item>
        <List.Item>{displayDuration}</List.Item>
        <List.Item>{`Rate $${price.amount}/hour`}</List.Item>
        <List.Item>
          <strong>Employer/Client:</strong>{" "}
          {`${client.first_name} ${client.last_name}`.trim() || "No Name!"}{" "}
          <a href={"mailto:" + client.email}>{client.email}</a>
        </List.Item>
      </List>
      {shift.description && (
        <Message>
          <Message.Header>Description</Message.Header>
          <p>{shift.description}</p>
        </Message>
      )}
      <Button.Group>
        {!approved && (
          <Button
            color="green"
            onClick={handleChangePShiftApproval(shift.uuid, true)}
          >
            Approve
          </Button>
        )}
        {!rejected && (
          <Button
            color="red"
            onClick={handleChangePShiftApproval(shift.uuid, false)}
          >
            Reject
          </Button>
        )}
      </Button.Group>
      <Error error={pShiftRequestError}/>
    </Container>
  );
};

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

class ProviderShiftWrapper extends Component {
  constructor(props) {
    super(props);
    this.props.dispatch(setClearPShiftState());
    this.props.dispatch(
      getPShiftRequest({ uuid: this.props.match.params.shiftUUID })
    );
  }

  render() {
    const { pShiftRequestSuccess, pShiftRequestError } = this.props;
    if (pShiftRequestSuccess.uuid) {
      return <ProviderShift {...this.props} />;
    } else if (!pShiftRequestError) {
      return <Loader active />;
    } else {
      return <Error error={pShiftRequestError} />;
    }
  }
}

export default connect(mapStateToProps)(ProviderShiftWrapper);