Allow for setting phase dates by duration *or* end date

Author: jmgasper

src/components/DateInput/index.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import 'react-day-picker/lib/style.css'
+import 'rc-time-picker/assets/index.css'
+import DateTime from '@nateradebaugh/react-datetime'
+import '@nateradebaugh/react-datetime/scss/styles.scss'
+
+const DateInput = forwardRef(({
+  onChange,
+  value,
+  isValidDate,
+  dateFormat,
+  timeFormat,
+  className
+}, ref) => {
+  const [localValue, setLocalValue] = useState(value)
+  useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  useImperativeHandle(ref, () => ({
+    forceReset: () => {
+      setLocalValue(value)
+    }
+  }))
+
+  return (
+    <DateTime
+      className={className}
+      value={localValue}
+      onChange={newValue => {
+        setLocalValue(newValue)
+      }}
+      onBlur={onChange}
+      isValidDate={isValidDate}
+      dateFormat={dateFormat}
+      timeFormat={timeFormat}
+    />
+  )
+})
+
+DateInput.defaultProps = {
+  onChange: () => {},
+  isValidDate: () => true,
+  value: null,
+  dateFormat: null,
+  timeFormat: null,
+  className: null
+}
+
+DateInput.propTypes = {
+  onChange: PropTypes.func,
+  isValidDate: PropTypes.func,
+  value: PropTypes.any,
+  dateFormat: PropTypes.string,
+  timeFormat: PropTypes.string,
+  className: PropTypes.string
+}
+export default DateInput

src/components/PhaseInput/index.js

@@ -1,16 +1,13 @@
 import moment from 'moment'
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styles from './PhaseInput.module.scss'
 import cn from 'classnames'
-import 'react-day-picker/lib/style.css'
-import 'rc-time-picker/assets/index.css'
-import DateTime from '@nateradebaugh/react-datetime'
 import isAfter from 'date-fns/isAfter'
 import subDays from 'date-fns/subDays'
-import '@nateradebaugh/react-datetime/scss/styles.scss'
 import DurationInput from '../DurationInput'
-import { getPhaseHoursMinutes, getPhaseEndDate } from '../../util/date'
+import { getPhaseHoursMinutes, getPhaseEndDate, getPhaseDuration } from '../../util/date'
+import DateInput from '../DateInput'
 
 const dateFormat = 'MM/DD/YYYY HH:mm'
 const inputDateFormat = 'MM/dd/yyyy'
@@ -21,6 +18,7 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
   const { scheduledStartDate: startDate, scheduledEndDate: endDate, duration, isStartTimeActive, isDurationActive } = phase
 
   const durationHoursMinutes = useMemo(() => getPhaseHoursMinutes(duration), [duration])
+  const endDateInputRef = useRef()
 
   const onStartDateChange = (e) => {
     let startDate = moment(e).format(dateFormat)
@@ -32,6 +30,20 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
     })
   }
 
+  const onEndDateChange = (e) => {
+    let endDate = moment(e).format(dateFormat)
+    let duration = getPhaseDuration(startDate, endDate)
+    if (duration > 0) {
+      onUpdatePhase({
+        startDate,
+        endDate,
+        duration
+      })
+    } else {
+      endDateInputRef.current.forceReset()
+    }
+  }
+
   useEffect(() => {
     if (!startDate && onUpdatePhase) {
       let startDate = moment().format(dateFormat)
@@ -71,9 +83,9 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
                 <span className={styles.readOnlyValue}>{moment(startDate).format(dateFormat)}</span>
               )
                 : (
-                  <DateTime
+                  <DateInput
                     className={styles.dateTimeInput}
-                    value={moment(startDate).format(dateFormat)}
+                    value={moment(startDate).toDate()}
                     onChange={onStartDateChange}
                     isValidDate={(current) => {
                       const yesterday = subDays(new Date(), 1)
@@ -87,7 +99,21 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
         <div className={cn(styles.field, styles.col2)}>
           <span className={styles.title}>End Date:</span>
           <div className={styles.dayPicker}>
-            <span className={styles.readOnlyValue}>{moment(endDate).format(dateFormat)}</span>
+            {(readOnly || !isDurationActive) ? (
+              <span className={styles.readOnlyValue}>{moment(endDate).format(dateFormat)}</span>
+            ) : (
+              <DateInput
+                ref={endDateInputRef}
+                className={styles.dateTimeInput}
+                value={moment(endDate).toDate()}
+                onChange={onEndDateChange}
+                isValidDate={(current) => {
+                  return isAfter(current, moment(startDate).toDate())
+                }}
+                dateFormat={inputDateFormat}
+                timeFormat={inputTimeFormat}
+              />
+            )}
           </div>
         </div>
         <div className={cn(styles.field, styles.col2)}>

src/util/date.js

@@ -57,6 +57,18 @@ export const getPhaseEndDate = (startDate, duration) => {
   return moment(startDate).add(duration, 'minutes').format(dateFormat)
 }
 
+/**
+ * Get phase duration
+ * @param {Date} startDate phase start date
+ * @param {Date} endDate phase end date
+ * @returns duration
+ */
+export const getPhaseDuration = (startDate, endDate) => {
+  const startDateMoment = moment(startDate).set({ second: 0, millisecond: 0 })
+  const endDateMoment = moment(endDate).set({ second: 0, millisecond: 0 })
+  return moment.duration(endDateMoment.diff(startDateMoment)).asMinutes()
+}
+
 /**
  * Get phase end date in date
  * @param {Date} startDate phase start date