Merge pull request #796 from maxceem/issue-680

#680 - fix: creating multiple challenges at a time

Author: vikasrohit

src/components/Buttons/OutlineButton/Outline.module.scss

@@ -41,11 +41,12 @@
     }
   }
 
-  &.disable {
+  &.disable,
+  &[disabled] {
     @include roboto-light();
     font-weight: 300;
-
     border: 1px solid $tc-gray-40;
+    cursor: default;
 
     span {
       color: $tc-gray-40;

src/components/Buttons/OutlineButton/index.js

@@ -6,10 +6,15 @@ import cn from 'classnames'
 import styles from './Outline.module.scss'
 import _ from 'lodash'
 
-const OutlineButton = ({ type, text, link, onClick, url, className, submit }) => {
+const OutlineButton = ({ type, text, link, onClick, url, className, submit, disabled }) => {
   if (_.isEmpty(link) && _.isEmpty(url)) {
     return (
-      <button type={submit ? 'submit' : 'button'} className={cn(styles.container, styles[type], className)} onClick={submit ? null : onClick}>
+      <button
+        type={submit ? 'submit' : 'button'}
+        className={cn(styles.container, styles[type], className)}
+        onClick={submit ? null : onClick}
+        disabled={disabled}
+      >
         <span>{text}</span>
       </button>
     )
@@ -37,7 +42,8 @@ OutlineButton.propTypes = {
   url: PropTypes.string,
   className: PropTypes.string,
   onClick: PropTypes.func,
-  submit: PropTypes.bool
+  submit: PropTypes.bool,
+  disabled: PropTypes.bool
 }
 
 export default OutlineButton

src/components/ChallengeEditor/index.js

@@ -717,6 +717,9 @@ class ChallengeEditor extends Component {
     const { name, trackId, typeId } = this.state.challenge
     const { timelineTemplates } = metadata
 
+    // indicate that creating process has started
+    this.setState({ isSaving: true })
+
     // fallback template
     const STD_DEV_TIMELINE_TEMPLATE = _.find(timelineTemplates, { name: 'Standard Development' })
     const avlTemplates = this.getAvailableTimelineTemplates()
@@ -1146,7 +1149,7 @@ class ChallengeEditor extends Component {
         isNew && (
           <div className={styles.buttonContainer}>
             <div className={styles.button}>
-              <OutlineButton text={'Continue Set-Up'} type={'success'} submit />
+              <OutlineButton text={'Continue Set-Up'} type={'success'} submit disabled={isSaving} />
             </div>
           </div>
         )