rudamentary mutli-post err handling

src/components/User/Client/ClientAddShiftForm.jsx

@@ -9,6 +9,7 @@ import {
   Form,
   Header,
   Label,
+  Message,
   TextArea
 } from "semantic-ui-react";
 
@@ -18,9 +19,11 @@ import {
   setFormShiftStartTime,
   setFormShiftDuration,
   setFormShiftNote,
-  setClearCshiftState,
+  setClearCShiftState,
   setFormShiftDates
 } from "../../../actions/cShift/reducer.actions";
+import { createMultipleCShiftRequest } from "../../../actions/cShift/saga.actions";
+import Error from "../../Shared/Error";
 
 import "react-datepicker/dist/react-datepicker.css";
 import "./shiftStartTimeOverrides.css";
@@ -41,7 +44,7 @@ for (let min = 60; min <= 480; min += 30) {
 
 class ClientAddShiftForm extends Component {
   componentWillMount = () => {
-    this.props.dispatch(setClearCshiftState());
+    this.props.dispatch(setClearCShiftState());
   };
 
   changeSelectedEmployee = (e, { value }) => {
@@ -86,8 +89,36 @@ class ClientAddShiftForm extends Component {
     this.props.dispatch(setFormShiftDates(shiftDatesCopy));
   };
 
+  onSubmitShifts = event => {
+    event.preventDefault();
+    // change this into interable cshift post request bodies
+    const { priceUUID, startTime, duration, note, shiftDates } = this.props;
+    const postRequestBodies = [];
+    for (let shiftDateString in shiftDates) {
+      const dynamicStartTime = utc(startTime);
+      const startDate = shiftDates[shiftDateString];
+      dynamicStartTime.set({
+        year: startDate.get("year"),
+        month: startDate.get("month"),
+        date: startDate.get("date")
+      });
+      const dynamicEndTime = utc(dynamicStartTime);
+      dynamicEndTime.add(duration, "minutes");
+      postRequestBodies.push({
+        get_price_uuid: priceUUID,
+        set_start: dynamicStartTime.format(),
+        set_end: dynamicEndTime.format(),
+        description: note ? note : undefined
+      });
+    }
+    this.props.dispatch(createMultipleCShiftRequest(postRequestBodies));
+  };
+
   render() {
     const {
+      isSendingCShiftRequest,
+      cShiftRequestErrors,
+      cShiftRequestSuccess,
       selfUser,
       employeeUUID,
       priceUUID,
@@ -101,6 +132,10 @@ class ClientAddShiftForm extends Component {
       return <Redirect to="/" />;
     }
 
+    if (cShiftRequestSuccess) {
+      console.log(cShiftRequestSuccess);
+    }
+
     const employeeChoices = selfUser.client.employees
       .filter(employee => !employee.deleted && !!employee.approved)
       .map(({ uuid, provider }) => ({
@@ -120,7 +155,7 @@ class ClientAddShiftForm extends Component {
           .map(({ amount, uuid, work_type }) => ({
             key: uuid,
             value: uuid,
-            text: work_type.label,
+            text: `${work_type.label} ($${amount}/hr)`,
             content: (
               <Header>
                 <Label
@@ -147,6 +182,9 @@ class ClientAddShiftForm extends Component {
     );
     return (
       <ClientAddShiftFormView
+        isSendingCShiftRequest={isSendingCShiftRequest}
+        cShiftRequestErrors={cShiftRequestErrors}
+        cShiftRequestSuccess={!!cShiftRequestSuccess.length}
         user={selfUser}
         employeeChoices={employeeChoices}
         priceChoices={priceChoices}
@@ -162,6 +200,7 @@ class ClientAddShiftForm extends Component {
         changeShiftDuration={this.changeShiftDuration}
         changeShiftNote={this.changeShiftNote}
         handleSelectDate={this.handleSelectDate}
+        onSubmitShifts={this.onSubmitShifts}
       />
     );
   }
@@ -172,6 +211,9 @@ function mapStateToProps(state) {
 }
 
 const ClientAddShiftFormView = ({
+  isSendingCShiftRequest,
+  cShiftRequestErrors,
+  cShiftRequestSuccess,
   user,
   employeeChoices,
   priceChoices,
@@ -186,11 +228,17 @@ const ClientAddShiftFormView = ({
   changeShiftStartTime,
   changeShiftDuration,
   changeShiftNote,
-  handleSelectDate
+  handleSelectDate,
+  onSubmitShifts
 }) => (
   <Container>
     <Header>Schedule Shifts</Header>
-    <Form>
+    <Form
+      loading={isSendingCShiftRequest}
+      onSubmit={onSubmitShifts}
+      error={!!cShiftRequestErrors.length}
+      success={!!cShiftRequestSuccess}
+    >
       <Form.Group widths="equal">
         <Form.Field>
           <label>Employee</label>
@@ -214,6 +262,7 @@ const ClientAddShiftFormView = ({
             selection
             fluid
             search
+            disabled={!employeeUUID}
             noResultsMessage="No prices for given employee."
             value={priceUUID}
           />
@@ -266,6 +315,16 @@ const ClientAddShiftFormView = ({
             .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>Schedule Shift</Form.Button>
     </Form>
   </Container>