From 78f7016f94eccf60ad1dabc3a60c4428fa7929ca Mon Sep 17 00:00:00 2001
From: maxceem <maxceem@gmail.com>
Date: Tue, 8 Sep 2020 17:29:02 +0300
Subject: [PATCH] fix: creating multiple challenges at a time

ref issue #680
---
 .../Buttons/OutlineButton/Outline.module.scss        |  5 +++--
 src/components/Buttons/OutlineButton/index.js        | 12 +++++++++---
 src/components/ChallengeEditor/index.js              |  5 ++++-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Buttons/OutlineButton/Outline.module.scss b/src/components/Buttons/OutlineButton/Outline.module.scss
index fecc9663..f7235afd 100644
--- a/src/components/Buttons/OutlineButton/Outline.module.scss
+++ b/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;
diff --git a/src/components/Buttons/OutlineButton/index.js b/src/components/Buttons/OutlineButton/index.js
index 90834742..537d41e3 100644
--- a/src/components/Buttons/OutlineButton/index.js
+++ b/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
diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js
index 8fc50841..bcaee812 100644
--- a/src/components/ChallengeEditor/index.js
+++ b/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>
         )