https://github.com/topcoder-platform/work-manager/issues/1375

Author: 52cs

src/components/ChallengeEditor/ChallengeView/index.js

@@ -22,7 +22,6 @@ import { isBetaMode } from '../../../util/cookie'
 import { loadGroupDetails } from '../../../actions/challenges'
 import { REVIEW_TYPES, CONNECT_APP_URL, PHASE_PRODUCT_CHALLENGE_ID_FIELD } from '../../../config/constants'
 import PhaseInput from '../../PhaseInput'
-import { v4 as uuidv4 } from 'uuid'
 
 const ChallengeView = ({
   projectDetail,
@@ -190,10 +189,11 @@ const ChallengeView = ({
               </>
             )}
             {
-              phases.map((phase) => (
+              phases.map((phase, index) => (
                 <PhaseInput
                   phase={phase}
-                  phaseIndex={uuidv4()}
+                  phaseIndex={index}
+                  key={index}
                   readOnly
                 />
               ))

src/components/ChallengeEditor/index.js

@@ -9,7 +9,6 @@ import { pick } from 'lodash/fp'
 import { withRouter } from 'react-router-dom'
 import { toastr } from 'react-redux-toastr'
 import xss from 'xss'
-import { v4 as uuidv4 } from 'uuid'
 
 import {
   VALIDATION_VALUE_TYPE,
@@ -815,9 +814,20 @@ class ChallengeEditor extends Component {
   onUpdatePhaseDate (phase, index) {
     const { phases } = this.state.challenge
     let newChallenge = _.cloneDeep(this.state.challenge)
-    newChallenge.phases[index]['duration'] = phase.duration
-    newChallenge.phases[index]['scheduledStartDate'] = phase.startDate
-    newChallenge.phases[index]['scheduledEndDate'] = phase.endDate
+    if (phase.isBlur && newChallenge.phases[index]['name'] === 'Submission') {
+      newChallenge.phases[index]['duration'] = _.max([
+        newChallenge.phases[index - 1]['duration'],
+        phase.duration
+      ])
+      newChallenge.phases[index]['scheduledEndDate'] =
+        moment(newChallenge.phases[index]['scheduledStartDate'])
+          .add(newChallenge.phases[index]['duration'], 'hours')
+          .format('MM/DD/YYYY HH:mm')
+    } else {
+      newChallenge.phases[index]['duration'] = phase.duration
+      newChallenge.phases[index]['scheduledStartDate'] = phase.startDate
+      newChallenge.phases[index]['scheduledEndDate'] = phase.endDate
+    }
 
     for (let phaseIndex = index + 1; phaseIndex < phases.length; ++phaseIndex) {
       if (newChallenge.phases[phaseIndex]['name'] === 'Submission') {
@@ -1610,15 +1620,12 @@ class ChallengeEditor extends Component {
                     phases.map((phase, index) => (
                       <PhaseInput
                         phase={phase}
-                        phaseIndex={uuidv4()}
+                        phaseIndex={index}
+                        key={index}
                         readOnly={false}
                         isActive={this.isPhaseEditable(index)}
                         onUpdatePhase={(item) => {
-                          if ((item.startDate && !moment(item.startDate).isSame(phase.scheduledStartDate)) ||
-                            (item.endDate && !moment(item.endDate).isSame(phase.scheduledEndDate))
-                          ) {
-                            this.onUpdatePhaseDate(item, index)
-                          }
+                          this.onUpdatePhaseDate(item, index)
                         }}
                       />
                     )

src/components/DurationInput/index.js

@@ -14,11 +14,15 @@ const DurationInput = ({ duration, onDurationChange, index, isActive }) => {
         ref={inputRef}
         min={1}
         type='number'
-        value={Number(duration).toString()}
+        value={duration}
         onChange={e => {
           e.preventDefault()
           onDurationChange(e.target.value)
         }}
+        onBlur={e => {
+          e.preventDefault()
+          onDurationChange(e.target.value, true)
+        }}
         autoFocus={inputRef.current === document.activeElement}
         disabled={!isActive}
       />
@@ -27,9 +31,9 @@ const DurationInput = ({ duration, onDurationChange, index, isActive }) => {
 }
 
 DurationInput.propTypes = {
-  duration: PropTypes.string,
+  duration: PropTypes.number,
   onDurationChange: PropTypes.func.isRequired,
-  index: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
   isActive: PropTypes.bool.isRequired
 }
 

src/components/PhaseInput/index.js

@@ -1,5 +1,5 @@
 import moment from 'moment'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './PhaseInput.module.scss'
 import cn from 'classnames'
@@ -17,47 +17,31 @@ const inputTimeFormat = 'HH:mm'
 const MAX_LENGTH = 5
 
 const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex, isActive }) => {
-  const [startDate, setStartDate] = useState()
-  const [endDate, setEndDate] = useState()
-  const [duration, setDuration] = useState()
+  const { scheduledStartDate: startDate, scheduledEndDate: endDate, duration } = phase
 
-  useEffect(() => {
-    if (phase) {
-      setStartDate(phase.scheduledStartDate)
-      setEndDate(phase.scheduledEndDate)
-      setDuration(moment(phase.scheduledEndDate).diff(phase.scheduledStartDate, 'hours'))
-    }
-  }, [])
-
-  useEffect(() => {
-    if (phase) {
-      setStartDate(phase.scheduledStartDate)
-      setEndDate(phase.scheduledEndDate)
-    }
-  }, [phase])
-
-  useEffect(() => {
-    if (!readOnly) {
-      onUpdatePhase({
-        startDate,
-        endDate,
-        duration
-      })
-    }
-  }, [startDate, endDate, duration])
+  const getEndDate = (startDate, duration) => moment(startDate).add(duration, 'hours')
 
   const onStartDateChange = (e) => {
-    setStartDate(moment(e).format(dateFormat))
-    setEndDate(moment(e).add(duration, 'hours').format(dateFormat))
+    let startDate = moment(e).format(dateFormat)
+    let endDate = getEndDate(startDate, duration)
+    onUpdatePhase({
+      startDate,
+      endDate,
+      duration
+    })
   }
 
-  const onDurationChange = (e) => {
+  const onDurationChange = (e, isBlur = false) => {
     if (e.length > MAX_LENGTH) return null
 
-    const dur = parseInt(e || 0)
-    setDuration(dur)
-    const end = moment(startDate).add(dur, 'hours')
-    setEndDate(moment(end).format(dateFormat))
+    let duration = parseInt(e || 0)
+    let endDate = getEndDate(startDate, duration)
+    onUpdatePhase({
+      startDate,
+      endDate,
+      duration,
+      isBlur
+    })
   }
 
   return (
@@ -96,17 +80,17 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex, isActive }) =>
         <div className={cn(styles.field, styles.col2)}>
           <span className={styles.title}>Duration:</span>
           <div className={styles.inputField}>
-            {
-              readOnly ? (
-                <span className={styles.readOnlyValue}>{duration}</span>
-              )
-                : <DurationInput
-                  duration={duration}
-                  name={phase.name}
-                  onDurationChange={onDurationChange}
-                  index={phaseIndex}
-                  isActive
-                />}
+            {readOnly ? (
+              <span className={styles.readOnlyValue}>{duration}</span>
+            ) : (
+              <DurationInput
+                duration={duration}
+                name={phase.name}
+                onDurationChange={onDurationChange}
+                index={phaseIndex}
+                isActive
+              />
+            )}
           </div>
         </div>
       </div>
@@ -122,9 +106,9 @@ PhaseInput.defaultProps = {
 
 PhaseInput.propTypes = {
   phase: PropTypes.shape().isRequired,
-  onUpdatePhase: PropTypes.func.isRequired,
+  onUpdatePhase: PropTypes.func,
   readOnly: PropTypes.bool,
-  phaseIndex: PropTypes.string.isRequired,
+  phaseIndex: PropTypes.number.isRequired,
   isActive: PropTypes.bool
 }
 export default PhaseInput