added functional duration/time selector

src/components/User/Client/ClientAddShiftForm.jsx

@@ -1,4 +1,6 @@
+import { duration } from "moment";
 import React, { Component } from "react";
+import DatePicker from "react-datepicker";
 import { connect } from "react-redux";
 import { Redirect } from "react-router-dom";
 import {
@@ -6,24 +8,38 @@ import {
   Dropdown,
   Form,
   Header,
-  Input,
   Label,
   TextArea
 } from "semantic-ui-react";
 
 import {
-  clearCShiftRequestError,
-  clearCShiftRequestSuccess,
   setFormEmployeeUUID,
-  setFormPriceUUID
+  setFormPriceUUID,
+  setFormShiftStartTime,
+  setFormShiftDuration,
+  setClearCshiftState
 } from "../../../actions/cShift/reducer.actions";
 
+import "react-datepicker/dist/react-datepicker.css";
+import "./shiftStartTimeOverrides.css";
+
+const CShiftDurationOptions = [];
+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();
+  }
+  CShiftDurationOptions.push({
+    key: min,
+    value: min,
+    text: displayText
+  });
+}
+
 class ClientAddShiftForm extends Component {
   componentWillMount = () => {
-    this.props.dispatch(clearCShiftRequestError());
-    this.props.dispatch(clearCShiftRequestSuccess());
-    this.props.dispatch(setFormEmployeeUUID(""));
-    this.props.dispatch(setFormPriceUUID(""));
+    this.props.dispatch(setClearCshiftState());
   };
 
   changeSelectedEmployee = (e, { value }) => {
@@ -37,8 +53,26 @@ class ClientAddShiftForm extends Component {
     this.props.dispatch(setFormPriceUUID(value));
   };
 
+  /**
+   * change handler for shift start time selector.
+   * @param date - instance of moment
+   */
+  changeShiftStartTime = date => {
+    this.props.dispatch(setFormShiftStartTime(date));
+  };
+
+  changeShiftDuration = (e, { value }) => {
+    this.props.dispatch(setFormShiftDuration(value));
+  };
+
   render() {
-    const { selfUser, employeeUUID, priceUUID } = this.props;
+    const {
+      selfUser,
+      employeeUUID,
+      priceUUID,
+      startTime,
+      duration
+    } = this.props;
 
     if (!selfUser.client) {
       return <Redirect to="/" />;
@@ -51,6 +85,7 @@ class ClientAddShiftForm extends Component {
         value: uuid,
         text: provider.email
       }));
+
     const priceChoices = [];
     if (employeeUUID) {
       const employee = selfUser.client.employees.find(emp => {
@@ -90,8 +125,12 @@ class ClientAddShiftForm extends Component {
         priceChoices={priceChoices}
         employeeUUID={employeeUUID}
         priceUUID={priceUUID}
+        startTime={startTime}
+        duration={duration}
         changeSelectedEmployee={this.changeSelectedEmployee}
         changeSelectedPrice={this.changeSelectedPrice}
+        changeShiftStartTime={this.changeShiftStartTime}
+        changeShiftDuration={this.changeShiftDuration}
       />
     );
   }
@@ -107,8 +146,12 @@ const ClientAddShiftFormView = ({
   priceChoices,
   employeeUUID,
   priceUUID,
+  startTime,
+  duration,
   changeSelectedEmployee,
-  changeSelectedPrice
+  changeSelectedPrice,
+  changeShiftStartTime,
+  changeShiftDuration
 }) => (
   <Container>
     <Header>Schedule a Shift</Header>
@@ -117,40 +160,52 @@ const ClientAddShiftFormView = ({
         <Form.Field>
           <label>Employee</label>
           <Dropdown
+            onChange={changeSelectedEmployee}
+            options={employeeChoices}
             placeholder="Select employee"
-            openOnFocus
-            closeOnBlur
             selection
             fluid
             search
-            options={employeeChoices}
             noResultsMessage="No approved employees found."
-            onChange={changeSelectedEmployee}
             value={employeeUUID}
           />
         </Form.Field>
         <Form.Field>
           <label>Price</label>
           <Dropdown
+            onChange={changeSelectedPrice}
+            options={priceChoices}
             placeholder="Select price"
-            openOnFocus
-            closeOnBlur
             selection
             fluid
             search
-            options={priceChoices}
             noResultsMessage="No prices for given employee."
-            onChange={changeSelectedPrice}
             value={priceUUID}
           />
         </Form.Field>
         <Form.Field>
-          <label>Time</label>
-          <Input placeholder="Time" type="text" />
+          <label>Shift Start Time</label>
+          <DatePicker
+            selected={startTime}
+            onChange={changeShiftStartTime}
+            showTimeSelect
+            showTimeSelectOnly
+            timeIntervals={30}
+            dateFormat="LT Z"
+            timeFormat="hh:mm"
+            placeholderText="Select shift start time"
+          />
         </Form.Field>
         <Form.Field>
-          <label>Duration</label>
-          <Input placeholder="Duration" type="text" />
+          <label>Shift Duration</label>
+          <Dropdown
+            onChange={changeShiftDuration}
+            options={CShiftDurationOptions}
+            placeholder="Select duration"
+            selection
+            fluid
+            value={duration}
+          />
         </Form.Field>
       </Form.Group>
       <Form.Field>

src/components/User/Client/shiftStartTimeOverrides.css

@@ -0,0 +1,48 @@
+/* inline CSS style overrides for client shift start time picker */
+/* required, datepicker popper inherits padding of parent field width */
+#root
+  > div
+  > div:nth-child(2)
+  > div:nth-child(1)
+  > div
+  > form
+  > div.equal.width.fields
+  > div:nth-child(3)
+  > div
+  > div.react-datepicker-popper
+  > div
+  > div.react-datepicker__time-container
+  > div.react-datepicker__time
+  > div
+  > ul {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* next two required because datepicker ignores fluid anyways */
+#root
+  > div
+  > div:nth-child(2)
+  > div:nth-child(1)
+  > div
+  > form
+  > div.equal.width.fields
+  > div:nth-child(3)
+  > div
+  > div.react-datepicker-wrapper {
+  width: 100%;
+}
+
+#root
+  > div
+  > div:nth-child(2)
+  > div:nth-child(1)
+  > div
+  > form
+  > div.equal.width.fields
+  > div:nth-child(3)
+  > div
+  > div
+  > div {
+  width: 100%;
+}