Working provider check in & check out

src/components/User/Provider/ProviderShift.jsx

@@ -9,9 +9,14 @@ import {
   Label,
   List,
   Loader,
-  Message
+  Message,
+  TextArea,
+  Form
 } from "semantic-ui-react";
-import { setClearPShiftState } from "../../../actions/pShift/reducer.actions";
+import {
+  setClearPShiftState,
+  setFormShiftChart
+} from "../../../actions/pShift/reducer.actions";
 import {
   getPShiftRequest,
   updatePShiftRequest
@@ -38,12 +43,43 @@ class ProviderShift extends Component {
     };
   };
 
+  handleCheckInPShift = () => {
+    const { pShiftRequestSuccess } = this.props;
+    this.props.dispatch(
+      updatePShiftRequest({
+        uuid: pShiftRequestSuccess.uuid,
+        approved: true,
+        action: "checkin",
+        chart: null,
+        single: true
+      })
+    );
+  };
+
+  handleChangeChart = event => {
+    this.props.dispatch(setFormShiftChart(event.target.value));
+  };
+
+  handleCheckOutPShift = () => {
+    const { pShiftRequestSuccess, chart } = this.props;
+    this.props.dispatch(
+      updatePShiftRequest({
+        uuid: pShiftRequestSuccess.uuid,
+        approved: true,
+        action: "checkout",
+        chart,
+        single: true
+      })
+    );
+  };
+
   render() {
     const {
       isSendingPShiftRequest,
       pShiftRequestError,
       pShiftRequestSuccess,
-      selfUser
+      selfUser,
+      chart
     } = this.props;
 
     if (!selfUser.provider) {
@@ -54,8 +90,12 @@ class ProviderShift extends Component {
         isSendingPShiftRequest={isSendingPShiftRequest}
         pShiftRequestError={pShiftRequestError}
         shift={pShiftRequestSuccess}
+        chart={chart}
         user={selfUser}
         handleChangePShiftApproval={this.handleChangePShiftApproval}
+        handleChangeChart={this.handleChangeChart}
+        handleCheckInPShift={this.handleCheckInPShift}
+        handleCheckOutPShift={this.handleCheckOutPShift}
       />
     );
   }
@@ -65,13 +105,19 @@ const ProviderShiftFormView = ({
   isSendingPShiftRequest,
   pShiftRequestError,
   shift,
+  chart,
   user,
-  handleChangePShiftApproval
+  handleChangeChart,
+  handleChangePShiftApproval,
+  handleCheckInPShift,
+  handleCheckOutPShift
 }) => {
   const employer = getEmployerFromPrice(shift.price, user) || {};
   const client = employer.client || {};
   const workType = getWorkTypeFromPrice(shift.price, user) || {};
   const price = getPriceFromPrice(shift.price, user) || {};
+  const checkedIn = !!shift.actual_start && utc(shift.actual_start, ISO_8601);
+  const checkedOut = !!shift.actual_end && utc(shift.actual_end, ISO_8601);
   const min = duration(
     utc(shift.set_end, ISO_8601) - utc(shift.set_start, ISO_8601),
     "milliseconds"
@@ -88,7 +134,11 @@ const ProviderShiftFormView = ({
     <Container>
       <Header>Shift Details</Header>
       <Loader active={isSendingPShiftRequest} />
-      <Label color={approved ? "green" : rejected ? "red" : "grey"} tag size="small">
+      <Label
+        color={approved ? "green" : rejected ? "red" : "grey"}
+        tag
+        size="small"
+      >
         {approved && "Approved"}
         {pending && "Approval Pending"}
         {rejected && "Rejected"}
@@ -123,25 +173,61 @@ const ProviderShiftFormView = ({
           <p>{shift.description}</p>
         </Message>
       )}
-      <Button.Group>
-        {!approved && (
-          <Button
-            color="green"
-            onClick={handleChangePShiftApproval(shift.uuid, true)}
-          >
-            Approve
-          </Button>
+      {!checkedIn && (
+        <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>
+      )}
+      <List bulleted>
+        {!checkedIn && <List.Item>Pending Check In</List.Item>}{" "}
+        {checkedIn && (
+          <List.Item>
+            <strong>Checked In At:</strong>{" "}
+            {checkedIn.local(false).format("dddd, MMMM Do YYYY, h:mm a Z")}
+          </List.Item>
         )}
-        {!rejected && (
-          <Button
-            color="red"
-            onClick={handleChangePShiftApproval(shift.uuid, false)}
-          >
-            Reject
-          </Button>
+        {checkedOut && (
+          <List.Item>
+            <strong>Checked Out At:</strong>{" "}
+            {checkedOut.local(false).format("dddd, MMMM Do YYYY, h:mm a Z")}
+          </List.Item>
         )}
-      </Button.Group>
-      <Error error={pShiftRequestError}/>
+      </List>
+      {shift.chart && (
+        <Message>
+          <Message.Header>Chart</Message.Header>
+          {shift.chart}
+        </Message>
+      )}
+      {!checkedIn && <Button onClick={handleCheckInPShift}>Check In</Button>}
+      {checkedIn &&
+        !checkedOut && (
+          <Form onSubmit={handleCheckOutPShift}>
+            <label>Chart</label>
+            <TextArea
+              value={chart}
+              onChange={handleChangeChart}
+              placeholder="Chart"
+            />
+            <Button>Check Out</Button>
+          </Form>
+        )}
+      <Error error={pShiftRequestError} />
     </Container>
   );
 };