Working delete shifts functionality

src/components/User/Client/ClientShifts.jsx

@@ -1,3 +1,4 @@
+import { utc, ISO_8601, duration } from "moment";
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { Redirect, Link } from "react-router-dom";
@@ -8,9 +9,15 @@ import {
   Item,
   Segment,
   Pagination,
-  Loader
+  Popup,
+  Loader,
+  Label
 } from "semantic-ui-react";
-import { getCShiftsRequest } from "../../../actions/cShift/saga.actions";
+import {
+  getCShiftsRequest,
+  deleteCShiftRequest
+} from "../../../actions/cShift/saga.actions";
+import { getEmployeeFromPrice, getPriceFromPrice } from "./ClientShiftShared";
 
 class ClientShifts extends Component {
   constructor(props) {
@@ -40,6 +47,10 @@ class ClientShifts extends Component {
     this.setState({ page: activePage });
   };
 
+  deleteCShift = uuid => {
+    this.props.dispatch(deleteCShiftRequest(uuid));
+  };
+
   render() {
     const {
       isSendingCShiftRequest,
@@ -56,6 +67,7 @@ class ClientShifts extends Component {
           pageSize={pageSize}
           user={selfUser}
           handlePaginationChange={this.handlePaginationChange}
+          deleteCShift={this.deleteCShift}
         />
       );
     } else {
@@ -74,7 +86,8 @@ const ClientShiftsView = ({
   user,
   page,
   pageSize,
-  handlePaginationChange
+  handlePaginationChange,
+  deleteCShift
 }) => {
   const { count = 0, results = [] } = cShiftRequestSuccess;
 
@@ -96,27 +109,95 @@ const ClientShiftsView = ({
       {!isSendingCShiftRequest &&
         results.length > 0 && (
           <Item.Group divided>
-            {results.map(result => (
-              <Item key={result.uuid}>
-                <Item.Content>
-                  <Item.Header content={result.uuid} />
-                  <code>{JSON.stringify(result, null, 2)}</code>
-                </Item.Content>
-                <Item.Extra>
-                  <Button
-                    primary
-                    floated="right"
-                    as={Link}
-                    to={`/user/profile/client/edit-shift/${result.uuid}`}
-                  >
-                    Edit
-                  </Button>
-                  <Button color="red" floated="right">
-                    Delete
-                  </Button>
-                </Item.Extra>
-              </Item>
-            ))}
+            {results.map(result => {
+              const employee = getEmployeeFromPrice(result.price, user);
+              const price = getPriceFromPrice(result.price, user);
+              const workType = price.work_type;
+              const min = duration(
+                utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
+                "milliseconds"
+              ).as("minutes");
+              let displayText = duration(min, "minutes").humanize();
+              if (min % 60) {
+                displayText = duration(
+                  Math.floor(min / 60),
+                  "hours"
+                ).humanize();
+                displayText += ` and ${duration(
+                  min % 60,
+                  "minutes"
+                ).humanize()}`;
+              }
+              return (
+                <Item key={result.uuid}>
+                  <Item.Content>
+                    <Item.Header>
+                      <Label
+                        circular
+                        empty
+                        style={{
+                          backgroundColor: workType.color,
+                          borderColor: workType.color
+                        }}
+                      />
+                      {workType.label}
+                    </Item.Header>
+                    <Item.Meta>
+                      {"At " +
+                        utc(result.set_start, ISO_8601)
+                          .local(false)
+                          .format("dddd, MMMM Do YYYY, h:mm a Z") +
+                        "; for " +
+                        displayText +
+                        "; rate $" +
+                        price.amount +
+                        "/hour"}
+                    </Item.Meta>
+                    <Item.Description>{result.description}</Item.Description>
+                    <code>{JSON.stringify(result, null, 2)}</code>
+                    <Item.Meta>
+                      <a href={"mailto:" + employee.provider.email}>
+                        {employee.provider.email}
+                      </a>
+                    </Item.Meta>
+                  </Item.Content>
+                  {result.actual_start === null && (
+                    <Item.Extra>
+                      <Button
+                        primary
+                        floated="right"
+                        as={Link}
+                        to={`/user/profile/client/edit-shift/${result.uuid}`}
+                      >
+                        Edit
+                      </Button>
+                      <Popup
+                        content={
+                          <div>
+                            Are you sure you want to delete this shift?<br />
+                            <Button
+                              basic
+                              color="red"
+                              size="small"
+                              onClick={() => deleteCShift(result.uuid)}
+                            >
+                              Confirm Deletion
+                            </Button>
+                          </div>
+                        }
+                        trigger={
+                          <Button color="red" floated="right">
+                            Delete
+                          </Button>
+                        }
+                        on="click"
+                        position="top right"
+                      />
+                    </Item.Extra>
+                  )}
+                </Item>
+              );
+            })}
           </Item.Group>
         )}
       <div style={{ textAlign: "center" }}>