Fully functional widgets for adding shifts

- todo: wait for React Datepicker PR 1380
- batch api call and saga handlers
- view/edit

src/actions/cShift/reducer.actions.js

@@ -6,9 +6,11 @@ import {
   CLEAR_CSHIFT_REQUEST_SUCCESS,
   SET_FORM_EMPLOYEE_UUID,
   SET_FORM_PRICE_UUID,
-  SET_CLEAR_CSHIFT_STATE,
   SET_FORM_SHIFT_START_TIME,
-  SET_FORM_SHIFT_DURATION
+  SET_FORM_SHIFT_DURATION,
+  SET_FORM_SHIFT_NOTE,
+  SET_FORM_SHIFT_DATES,
+  SET_CLEAR_CSHIFT_STATE
 } from "../../constants/cShift.constants";
 import { parseError } from "../common.actions";
 
@@ -74,6 +76,20 @@ export function setFormShiftDuration(duration) {
   };
 }
 
+export function setFormShiftNote(note) {
+  return {
+    type: SET_FORM_SHIFT_NOTE,
+    data: note
+  };
+}
+
+export function setFormShiftDates(dates) {
+  return {
+    type: SET_FORM_SHIFT_DATES,
+    data: dates
+  };
+}
+
 export function setClearCshiftState() {
   return {
     type: SET_CLEAR_CSHIFT_STATE

src/components/User/Client/ClientAddShiftForm.jsx

@@ -1,4 +1,4 @@
-import { duration } from "moment";
+import { duration, utc } from "moment";
 import React, { Component } from "react";
 import DatePicker from "react-datepicker";
 import { connect } from "react-redux";
@@ -17,7 +17,9 @@ import {
   setFormPriceUUID,
   setFormShiftStartTime,
   setFormShiftDuration,
-  setClearCshiftState
+  setFormShiftNote,
+  setClearCshiftState,
+  setFormShiftDates
 } from "../../../actions/cShift/reducer.actions";
 
 import "react-datepicker/dist/react-datepicker.css";
@@ -28,7 +30,7 @@ for (let min = 60; min <= 480; min += 30) {
   let displayText = duration(min, "minutes").humanize();
   if (min % 60) {
     displayText = duration(Math.floor(min / 60), "hours").humanize();
-    displayText += ", " + duration(min % 60, "minutes").humanize();
+    displayText += ` and ${duration(min % 60, "minutes").humanize()}`;
   }
   CShiftDurationOptions.push({
     key: min,
@@ -55,23 +57,44 @@ class ClientAddShiftForm extends Component {
 
   /**
    * change handler for shift start time selector.
-   * @param date - instance of moment
+   * @param momentTime - instance of moment (but we only care about the time)
    */
-  changeShiftStartTime = date => {
+  changeShiftStartTime = momentTime => {
-    this.props.dispatch(setFormShiftStartTime(date));
+    this.props.dispatch(setFormShiftStartTime(momentTime));
   };
 
   changeShiftDuration = (e, { value }) => {
     this.props.dispatch(setFormShiftDuration(value));
   };
 
+  changeShiftNote = event => {
+    this.props.dispatch(setFormShiftNote(event.target.value));
+  };
+
+  /**
+   * change handler for shift date selector
+   * @param momentDate - instance of moment (but we only care about the day)
+   */
+  handleSelectDate = momentDate => {
+    const shiftDatesCopy = { ...this.props.shiftDates };
+    const key = momentDate.format("YYYY-MM-DD");
+    if (shiftDatesCopy.hasOwnProperty(key)) {
+      delete shiftDatesCopy[key];
+    } else {
+      shiftDatesCopy[key] = momentDate;
+    }
+    this.props.dispatch(setFormShiftDates(shiftDatesCopy));
+  };
+
   render() {
     const {
       selfUser,
       employeeUUID,
       priceUUID,
       startTime,
-      duration
+      duration,
+      note,
+      shiftDates
     } = this.props;
 
     if (!selfUser.client) {
@@ -118,6 +141,10 @@ class ClientAddShiftForm extends Component {
           }))
       );
     }
+
+    const selectedShiftDates = Object.keys(shiftDates).map(
+      key => shiftDates[key]
+    );
     return (
       <ClientAddShiftFormView
         user={selfUser}
@@ -127,10 +154,14 @@ class ClientAddShiftForm extends Component {
         priceUUID={priceUUID}
         startTime={startTime}
         duration={duration}
+        note={note}
+        selectedShiftDates={selectedShiftDates}
         changeSelectedEmployee={this.changeSelectedEmployee}
         changeSelectedPrice={this.changeSelectedPrice}
         changeShiftStartTime={this.changeShiftStartTime}
         changeShiftDuration={this.changeShiftDuration}
+        changeShiftNote={this.changeShiftNote}
+        handleSelectDate={this.handleSelectDate}
       />
     );
   }
@@ -148,13 +179,17 @@ const ClientAddShiftFormView = ({
   priceUUID,
   startTime,
   duration,
+  note,
+  selectedShiftDates,
   changeSelectedEmployee,
   changeSelectedPrice,
   changeShiftStartTime,
-  changeShiftDuration
+  changeShiftDuration,
+  changeShiftNote,
+  handleSelectDate
 }) => (
   <Container>
-    <Header>Schedule a Shift</Header>
+    <Header>Schedule Shifts</Header>
     <Form>
       <Form.Group widths="equal">
         <Form.Field>
@@ -210,11 +245,26 @@ const ClientAddShiftFormView = ({
       </Form.Group>
       <Form.Field>
         <label>Note</label>
-        <TextArea placeholder="Employee notes" />
+        <TextArea
+          placeholder="Employee notes"
+          value={note}
+          onChange={changeShiftNote}
+        />
       </Form.Field>
-      <Form.Field>
+      <Form.Field style={{ textAlign: "center" }}>
-        <label>Days</label>
+        <label>Dates</label>
-        <TextArea placeholder="Date Picker" />
+        <DatePicker
+          inline
+          onSelect={handleSelectDate}
+          highlightDates={selectedShiftDates}
+          monthsShown={2}
+          // https://github.com/Hacker0x01/react-datepicker/pull/1360
+          peekNextMonth={false} // this is broken? Fixed in PR 1360
+          minDate={utc(new Date()).add(1, "day")}
+          maxDate={utc(new Date())
+            .add(1, "month")
+            .endOf("month")}
+        />
       </Form.Field>
       <Form.Button>Schedule Shift</Form.Button>
     </Form>

src/components/User/Client/shiftStartTimeOverrides.css

@@ -19,7 +19,7 @@
   padding-right: 0;
 }
 
-/* next two required because datepicker ignores fluid anyways */
+/* next two required because datepicker input ignores fluid anyways */
 #root
   > div
   > div:nth-child(2)
@@ -46,3 +46,17 @@
   > div {
   width: 100%;
 }
+
+/* required so the inline two months view still looks decent on mobile */
+@media only screen and (max-width: 470px) {
+  #root
+    > div
+    > div:nth-child(2)
+    > div:nth-child(1)
+    > div
+    > form
+    > div:nth-child(3)
+    > div {
+    width: min-content;
+  }
+}

src/constants/cShift.constants.js

@@ -6,9 +6,10 @@ export const SET_CSHIFT_REQUEST_SUCCESS = "SET_CSHIFT_REQUEST_SUCCESS";
 export const CLEAR_CSHIFT_REQUEST_SUCCESS = "CLEAR_CSHIFT_REQUEST_SUCCESS";
 export const SET_FORM_EMPLOYEE_UUID = "SET_FORM_EMPLOYEE_UUID";
 export const SET_FORM_PRICE_UUID = "SET_FORM_PRICE_UUID";
-export const SET_FORM_SHIFT_START_TIME = "SET_FORM_SHIFT_START_TIME"
+export const SET_FORM_SHIFT_START_TIME = "SET_FORM_SHIFT_START_TIME";
 export const SET_FORM_SHIFT_DURATION = "SET_FORM_SHIFT_DURATION";
-
+export const SET_FORM_SHIFT_NOTE = "SET_FORM_SHIFT_NOTE";
+export const SET_FORM_SHIFT_DATES = "SET_FORM_SHIFT_DATES";
 export const SET_CLEAR_CSHIFT_STATE = "SET_CLEAR_CSHIFT_STATE";
 
 // Saga CShift Action Constants

src/reducers/cShiftReducer.js

@@ -8,6 +8,8 @@ import {
   SET_FORM_PRICE_UUID,
   SET_FORM_SHIFT_START_TIME,
   SET_FORM_SHIFT_DURATION,
+  SET_FORM_SHIFT_NOTE,
+  SET_FORM_SHIFT_DATES,
   SET_CLEAR_CSHIFT_STATE
 } from "../constants/cShift.constants";
 
@@ -15,10 +17,12 @@ const initialState = {
   isSendingCShiftRequest: false,
   cShiftRequestError: "",
   cShiftRequestSuccess: "",
-  employeeUUID: "",
+  employeeUUID: "", // Which employee
-  priceUUID: "",
+  priceUUID: "", // Which price
-  startTime: null,
+  startTime: null, // When does the shift begin? moment instance
-  duration: 60
+  duration: "", // Duration of shift in minutes
+  note: "", // Optional note
+  shiftDates: {} // Dates, map of "YYYY-MM-DD" > moment instance
 };
 
 function cShiftReducer(state = initialState, action) {
@@ -68,6 +72,16 @@ function cShiftReducer(state = initialState, action) {
         ...state,
         duration: action.data
       };
+    case SET_FORM_SHIFT_NOTE:
+      return {
+        ...state,
+        note: action.data
+      };
+    case SET_FORM_SHIFT_DATES:
+      return {
+        ...state,
+        shiftDates: action.data
+      };
     case SET_CLEAR_CSHIFT_STATE:
       return {
         ...initialState