Merge pull request #878 from topcoder-platform/feature/git-876-save-new-challenge

buttons for saving challenge in current status

Author: vikasrohit

src/components/ChallengeEditor/TagsField/index.js

@@ -6,6 +6,7 @@ import styles from './Tags-Field.module.scss'
 
 const TagsField = ({ challengeTags, challenge, onUpdateMultiSelect, readOnly }) => {
   const mapOps = item => ({ label: item.name, value: item.id })
+  const existingTags = (challenge.tags && challenge.tags.length) ? challenge.tags.join(',') : ''
   return (
     <>
       <div className={styles.row}>
@@ -15,19 +16,19 @@ const TagsField = ({ challengeTags, challenge, onUpdateMultiSelect, readOnly })
         <div className={cn(styles.field, styles.col2)}>
           <input type='hidden' />
           {readOnly ? (
-            <span>{(challenge.tags && challenge.tags.length) ? challenge.tags.join(', ') : ''}</span>
+            <span>{existingTags}</span>
           ) : (<Select
             id='track-select'
             multi
             options={challengeTags.map(mapOps)}
             simpleValue
-            value={(challenge.tags && challenge.tags.length) ? challenge.tags.join(',') : ''}
+            value={existingTags}
             onChange={(value) => onUpdateMultiSelect(value, 'tags')}
           />)}
         </div>
       </div>
 
-      { !readOnly && challenge.submitTriggered && !challenge.tags.length && <div className={styles.row}>
+      { !readOnly && challenge.submitTriggered && (!challenge.tags || !challenge.tags.length) && <div className={styles.row}>
         <div className={cn(styles.field, styles.col1)} />
         <div className={cn(styles.field, styles.col2, styles.error)}>
           Select at least one tag

src/components/ChallengeEditor/index.js

@@ -282,7 +282,9 @@ class ChallengeEditor extends Component {
     }
 
     // calculate total cost of challenge
-    this.setState({ challenge: newChallenge })
+    this.setState({ challenge: newChallenge }, () => {
+      this.validateChallenge()
+    })
   }
 
   /**
@@ -331,7 +333,9 @@ class ChallengeEditor extends Component {
           newChallenge[field][index][option.key] = option.name
         }
       }
-      this.setState({ challenge: newChallenge })
+      this.setState({ challenge: newChallenge }, () => {
+        this.validateChallenge()
+      })
     }
   }
 
@@ -350,7 +354,9 @@ class ChallengeEditor extends Component {
       value = value.filter(val => _.values(PRIZE_SETS_TYPE).includes(val.type))
     }
     newChallenge[field] = value
-    this.setState({ challenge: newChallenge })
+    this.setState({ challenge: newChallenge }, () => {
+      this.validateChallenge()
+    })
   }
 
   /**
@@ -388,7 +394,9 @@ class ChallengeEditor extends Component {
     } else {
       _.set(newChallenge, `${field}.${index}.check`, checked)
     }
-    this.setState({ challenge: newChallenge })
+    this.setState({ challenge: newChallenge }, () => {
+      this.validateChallenge()
+    })
   }
 
   /**
@@ -597,7 +605,7 @@ class ChallengeEditor extends Component {
   }
 
   isValidChallengePrizes () {
-    const challengePrizes = this.state.challenge.prizeSets.find(p => p.type === PRIZE_SETS_TYPE.CHALLENGE_PRIZES)
+    const challengePrizes = _.find(this.state.challenge.prizeSets, p => p.type === PRIZE_SETS_TYPE.CHALLENGE_PRIZES, [])
     if (!challengePrizes || !challengePrizes.prizes || challengePrizes.prizes.length === 0) {
       return false
     }
@@ -668,7 +676,9 @@ class ChallengeEditor extends Component {
     let newChallenge = { ...challenge }
     newChallenge[field] = options ? options.split(',') : []
 
-    this.setState({ challenge: newChallenge })
+    this.setState({ challenge: newChallenge }, () => {
+      this.validateChallenge()
+    })
   }
 
   onUpdatePhase (newValue, property, index) {
@@ -1179,16 +1189,16 @@ class ChallengeEditor extends Component {
             {!isLoading && <LastSavedDisplay timeLastSaved={draftChallenge.data.updated} />}
             {!isLoading && (!isActive) && (!isCompleted) && <div className={styles.buttonContainer}>
               <div className={styles.button}>
-                <OutlineButton text={'Save Draft'} type={'success'} onClick={this.createDraftHandler} />
+                <OutlineButton text={isSaving ? 'Saving...' : 'Save'} type={'success'} onClick={this.onSaveChallenge} />
+              </div>
+              <div className={styles.button}>
+                <PrimaryButton text={'Save Draft'} type={'info'} onClick={this.createDraftHandler} />
               </div>
               { isDraft && <div className={styles.button}>
                 <PrimaryButton text={'Launch as Active'} type={'info'} onClick={this.toggleLaunch} />
               </div>}
             </div>}
             {!isLoading && isActive && <div className={styles.buttonContainer}>
-              <div className={styles.button}>
-                <OutlineButton text={isSaving ? 'Saving...' : 'Save'} type={'success'} onClick={this.onSaveChallenge} />
-              </div>
               {isTask && (
                 <div className={styles.button}>
                   <PrimaryButton text={'Close Task'} type={'danger'} onClick={this.openCloseTaskConfirmation} />