Fix issue 1378

src/components/ChallengeEditor/index.js

@@ -138,11 +138,21 @@ class ChallengeEditor extends Component {
     this.onDeleteChallenge = this.onDeleteChallenge.bind(this)
     this.deleteModalLaunch = this.deleteModalLaunch.bind(this)
     this.toggleForumOnCreate = this.toggleForumOnCreate.bind(this)
-    this.isPhaseEditable = this.isPhaseEditable.bind(this)
+    this.intervalId = null
   }
 
   componentDidMount () {
     this.resetChallengeData(this.setState.bind(this))
+    setTimeout(() => {
+      this.onTick()
+    }, 500)
+    this.intervalId = setInterval(() => {
+      this.onTick()
+    }, 60000)
+  }
+
+  componentDidUnMount () {
+    clearInterval(this.intervalId)
   }
 
   componentDidUpdate () {
@@ -811,6 +821,22 @@ class ChallengeEditor extends Component {
     this.setState({ challenge: newChallenge })
   }
 
+  onTick () {
+    if (this.state && this.state) {
+      const { phases } = this.state.challenge
+      let newChallenge = _.cloneDeep(this.state.challenge)
+      for (let index = 0; index < phases.length; ++index) {
+        newChallenge.phases[index].isDurationActive =
+          moment(newChallenge.phases[index]['scheduledEndDate']).isAfter()
+        newChallenge.phases[index].isStartTimeActive = index > 0 ? false
+          : moment(newChallenge.phases[0]['scheduledStartDate']).isAfter()
+        newChallenge.phases[index].isOpen =
+          newChallenge.phases[index].isDurationActive
+      }
+      this.setState({ challenge: newChallenge })
+    }
+  }
+
   onUpdatePhaseDate (phase, index) {
     const { phases } = this.state.challenge
     let newChallenge = _.cloneDeep(this.state.challenge)
@@ -848,6 +874,10 @@ class ChallengeEditor extends Component {
     }
 
     this.setState({ challenge: newChallenge })
+
+    setTimeout(() => {
+      this.onTick()
+    }, 500)
   }
 
   collectChallengeData (status) {
@@ -1249,18 +1279,6 @@ class ChallengeEditor extends Component {
     return _.filter(timelineTemplates, tt => availableTemplateIds.indexOf(tt.id) !== -1)
   }
 
-  /**
-   * Check if current phase is active for edit
-   */
-  isPhaseEditable (phaseIndex) {
-    const { phases } = this.state.challenge
-    const phase = phases[phaseIndex]
-    if (phase.name !== 'Registration') {
-      return false
-    }
-    return !phase.isOpen
-  }
-
   render () {
     const {
       isLaunch,
@@ -1623,7 +1641,6 @@ class ChallengeEditor extends Component {
                         phaseIndex={index}
                         key={index}
                         readOnly={false}
-                        isActive={this.isPhaseEditable(index)}
                         onUpdatePhase={(item) => {
                           this.onUpdatePhaseDate(item, index)
                         }}

src/components/DurationInput/index.js

@@ -1,10 +1,14 @@
-import React, { useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styles from './DurationInput.module.scss'
 
 const DurationInput = ({ duration, onDurationChange, index, isActive }) => {
   const inputRef = useRef(null)
 
+  useEffect(() => {
+    document.getElementById(`duration-${index}`).disabled = !isActive
+  }, [isActive, index])
+
   return (
     <div key={`duration-${index}-edit`}>
       <input
@@ -24,7 +28,6 @@ const DurationInput = ({ duration, onDurationChange, index, isActive }) => {
           onDurationChange(e.target.value, true)
         }}
         autoFocus={inputRef.current === document.activeElement}
-        disabled={!isActive}
       />
     </div>
   )

src/components/PhaseInput/index.js

@@ -16,10 +16,10 @@ const inputDateFormat = 'MM/dd/yyyy'
 const inputTimeFormat = 'HH:mm'
 const MAX_LENGTH = 5
 
-const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex, isActive }) => {
-  const { scheduledStartDate: startDate, scheduledEndDate: endDate, duration } = phase
+const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
+  const { scheduledStartDate: startDate, scheduledEndDate: endDate, duration, isStartTimeActive, isDurationActive } = phase
 
-  const getEndDate = (startDate, duration) => moment(startDate).add(duration, 'hours')
+  const getEndDate = (startDate, duration) => moment(startDate).add(duration, 'hours').format(dateFormat)
 
   const onStartDateChange = (e) => {
     let startDate = moment(e).format(dateFormat)
@@ -54,7 +54,7 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex, isActive }) =>
           <span className={styles.title}>Start Date:</span>
           <div className={styles.dayPicker}>
             {
-              readOnly || !isActive ? (
+              readOnly || !isStartTimeActive ? (
                 <span className={styles.readOnlyValue}>{moment(startDate).format(dateFormat)}</span>
               )
                 : (
@@ -88,7 +88,7 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex, isActive }) =>
                 name={phase.name}
                 onDurationChange={onDurationChange}
                 index={phaseIndex}
-                isActive
+                isActive={isDurationActive || false}
               />
             )}
           </div>
@@ -100,15 +100,13 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex, isActive }) =>
 
 PhaseInput.defaultProps = {
   endDate: null,
-  readOnly: false,
-  isActive: false
+  readOnly: false
 }
 
 PhaseInput.propTypes = {
   phase: PropTypes.shape().isRequired,
   onUpdatePhase: PropTypes.func,
   readOnly: PropTypes.bool,
-  phaseIndex: PropTypes.number.isRequired,
-  isActive: PropTypes.bool
+  phaseIndex: PropTypes.number.isRequired
 }
 export default PhaseInput