Working delete shifts functionality

src/actions/cShift/saga.actions.js

@@ -2,7 +2,8 @@ import {
   CREATE_MULTIPLE_CSHIFT_REQUEST,
   GET_CSHIFTS_REQUEST,
   GET_CSHIFT_REQUEST,
-  EDIT_CSHIFT_REQUEST
+  EDIT_CSHIFT_REQUEST,
+  DELETE_CSHIFT_REQUEST
 } from "../../constants/cShift.constants";
 
 /**
@@ -36,3 +37,10 @@ export function editCShiftRequest(payload) {
     data: payload
   }
 }
+
+export function deleteCShiftRequest(uuid) {
+  return {
+    type: DELETE_CSHIFT_REQUEST,
+    data: uuid
+  }
+}

src/api/cShift.api.js

@@ -1,4 +1,4 @@
-import { get, put, post } from "./baseApi";
+import { get, put, post, del } from "./baseApi";
 
 export function createCShifts(postBodies) {
   return Promise.all(
@@ -23,3 +23,7 @@ export function getCShift(uuid, params) {
 export function editCShift(uuid, payload) {
   return put(`/cshift/${uuid}/`, payload).then(resp => Promise.resolve(resp));
 }
+
+export function deleteCShift(uuid) {
+  return del(`/cshift/${uuid}/`).then(resp => Promise.resolve(resp));
+}

src/components/User/Client/ClientAddShiftForm.jsx

@@ -162,7 +162,7 @@ class ClientAddShiftForm extends Component {
         priceUUID={priceUUID}
         startTime={startTime}
         duration={duration}
-        note={note}
+        note={note || ""}
         selectedShiftDates={selectedShiftDates}
         changeSelectedEmployee={this.changeSelectedEmployee}
         changeSelectedPrice={this.changeSelectedPrice}

src/components/User/Client/ClientEditShiftForm.jsx

@@ -111,7 +111,6 @@ class ClientEditShiftForm extends Component {
         description: note ? note : undefined
       });
     }
-    console.log({ ...postRequestBodies[0], uuid: cShiftUUID })
     this.props.dispatch(
       editCShiftRequest({ ...postRequestBodies[0], uuid: cShiftUUID })
     );
@@ -196,7 +195,7 @@ class ClientEditShiftForm extends Component {
         priceUUID={priceUUID}
         startTime={startTime}
         duration={duration}
-        note={note}
+        note={note || ""}
         selectedShiftDates={selectedShiftDates}
         changeSelectedEmployee={this.changeSelectedEmployee}
         changeSelectedPrice={this.changeSelectedPrice}

src/components/User/Client/ClientShiftFormView.jsx

@@ -72,6 +72,7 @@ export const ClientShiftFormView = ({
             selection
             fluid
             search
+            disabled={!!isEditing}
             noResultsMessage="No approved employees found."
             value={employeeUUID}
           />
@@ -85,7 +86,7 @@ export const ClientShiftFormView = ({
             selection
             fluid
             search
-            disabled={!employeeUUID}
+            disabled={!employeeUUID || !!isEditing}
             noResultsMessage="No prices for given employee."
             value={priceUUID}
           />
@@ -99,7 +100,7 @@ export const ClientShiftFormView = ({
             showTimeSelectOnly
             timeIntervals={30}
             dateFormat="LT Z"
-            timeFormat="hh:mm"
+            timeFormat="h:mm a"
             placeholderText="Select shift start time"
           />
         </Form.Field>

src/components/User/Client/ClientShiftShared.js

@@ -11,3 +11,29 @@ export const getEmployeeFromPrice = (priceUUID, selfUser) => {
   });
   return matchEmployee;
 };
+
+export const getWorkTypeFromPrice = (priceUUID, selfUser) => {
+  const employees = selfUser && selfUser.client && selfUser.client.employees;
+  let matchWorkType = null;
+  employees.forEach(employee => {
+    employee.prices.forEach(price => {
+      if (price.uuid === priceUUID) {
+        matchWorkType = price.work_type;
+      }
+    });
+  });
+  return matchWorkType;
+};
+
+export const getPriceFromPrice = (priceUUID, selfUser) => {
+  const employees = selfUser && selfUser.client && selfUser.client.employees;
+  let matchPrice = null;
+  employees.forEach(employee => {
+    employee.prices.forEach(price => {
+      if (price.uuid === priceUUID) {
+        matchPrice = price;
+      }
+    });
+  });
+  return matchPrice;
+};

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,12 +109,59 @@ const ClientShiftsView = ({
       {!isSendingCShiftRequest &&
         results.length > 0 && (
           <Item.Group divided>
-            {results.map(result => (
+            {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 content={result.uuid} />
+                    <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
@@ -111,12 +171,33 @@ const ClientShiftsView = ({
                       >
                         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" }}>

src/constants/cShift.constants.js

@@ -18,3 +18,4 @@ export const CREATE_MULTIPLE_CSHIFT_REQUEST = "CREATE_MULTIPLE_CSHIFT_REQUEST";
 export const GET_CSHIFTS_REQUEST = "GET_CSHIFTS_REQUEST";
 export const GET_CSHIFT_REQUEST = "GET_CSHIFT_REQUEST";
 export const EDIT_CSHIFT_REQUEST = "EDIT_CSHIFT_REQUEST";
+export const DELETE_CSHIFT_REQUEST = "DELETE_CSHIFT_REQUEST";

src/sagas/cShift.sagas.js

@@ -18,8 +18,10 @@ import {
   createCShifts,
   getCShifts,
   getCShift,
-  editCShift
+  editCShift,
+  deleteCShift
 } from "../api/cShift.api";
+import { getCShiftsRequest } from "../actions/cShift/saga.actions";
 
 function* createCShiftsCall(postBodies) {
   yield effects.put(isSendingCShiftRequest(true));
@@ -80,6 +82,18 @@ function* editCShiftCall(payload) {
   }
 }
 
+function* deleteCShiftCall(uuid) {
+  yield effects.put(isSendingCShiftRequest(true));
+  try {
+    return yield effects.call(deleteCShift, uuid);
+  } catch (exception) {
+    yield effects.put(setCShiftRequestError(exception));
+    return false;
+  } finally {
+    yield effects.put(isSendingCShiftRequest(false));
+  }
+}
+
 export function* createCShiftsFlow(request) {
   yield effects.put(clearCShiftRequestSuccess());
   yield effects.put(clearCShiftRequestError());
@@ -127,3 +141,9 @@ export function* editCShiftFlow(request) {
     yield effects.put(setCShiftRequestSuccess(wasSuccessful));
   }
 }
+
+export function* deleteCShiftFlow(request) {
+  yield effects.put(clearCShiftRequestError());
+  yield effects.call(deleteCShiftCall, request.data);
+  yield effects.put(getCShiftsRequest({ page: 1 }));
+}

src/sagas/index.js

@@ -73,13 +73,15 @@ import {
   CREATE_MULTIPLE_CSHIFT_REQUEST,
   GET_CSHIFTS_REQUEST,
   GET_CSHIFT_REQUEST,
-  EDIT_CSHIFT_REQUEST
+  EDIT_CSHIFT_REQUEST,
+  DELETE_CSHIFT_REQUEST
 } from "../constants/cShift.constants";
 import {
   createCShiftsFlow,
   getCShiftsFlow,
   getCShiftFlow,
-  editCShiftFlow
+  editCShiftFlow,
+  deleteCShiftFlow
 } from "./cShift.sagas";
 
 export default function* rootSaga() {
@@ -112,4 +114,5 @@ export default function* rootSaga() {
   yield takeLatest(GET_CSHIFTS_REQUEST, getCShiftsFlow);
   yield takeLatest(GET_CSHIFT_REQUEST, getCShiftFlow);
   yield takeLatest(EDIT_CSHIFT_REQUEST, editCShiftFlow);
+  yield takeLatest(DELETE_CSHIFT_REQUEST, deleteCShiftFlow);
 }