fix: Challenge activation issues #993

src/actions/challenges.js

@@ -258,10 +258,11 @@ export function partiallyUpdateChallengeDetails (challengeId, partialChallengeDe
         type: UPDATE_CHALLENGE_DETAILS_SUCCESS,
         challengeDetails: challenge
       })
-    }).catch(() => {
+    }).catch((error) => {
       dispatch({
         type: UPDATE_CHALLENGE_DETAILS_FAILURE
       })
+      throw error
     })
   }
 }

src/components/ChallengesComponent/ChallengeCard/index.js

@@ -15,7 +15,6 @@ import ChallengeTag from '../ChallengeTag'
 import styles from './ChallengeCard.module.scss'
 import { getFormattedDuration, formatDate } from '../../../util/date'
 import { CHALLENGE_STATUS, COMMUNITY_APP_URL, DIRECT_PROJECT_URL, MESSAGE, ONLINE_REVIEW_URL } from '../../../config/constants'
-import { patchChallenge } from '../../../services/challenges'
 import ConfirmationModal from '../../Modal/ConfirmationModal'
 import AlertModal from '../../Modal/AlertModal'
 import Tooltip from '../../Tooltip'
@@ -201,12 +200,16 @@ class ChallengeCard extends React.Component {
   }
 
   async onLaunchChallenge () {
+    const { partiallyUpdateChallengeDetails } = this.props
     if (this.state.isSaving) return
     const { challenge } = this.props
     try {
       this.setState({ isSaving: true })
-      const response = await patchChallenge(challenge.id, { status: 'Active' })
-      this.setState({ isLaunch: true, isConfirm: response.id, isSaving: false })
+      // call action to update the challenge with a new status
+      await partiallyUpdateChallengeDetails(challenge.id, {
+        status: 'Active'
+      })
+      this.setState({ isLaunch: true, isConfirm: challenge.id, isSaving: false })
     } catch (e) {
       const error = _.get(e, 'response.data.message', 'Unable to activate the challenge')
       this.setState({ isSaving: false, error })
@@ -287,7 +290,8 @@ ChallengeCard.propTypes = {
   challenge: PropTypes.object,
   shouldShowCurrentPhase: PropTypes.bool,
   showError: PropTypes.func,
-  reloadChallengeList: PropTypes.func
+  reloadChallengeList: PropTypes.func,
+  partiallyUpdateChallengeDetails: PropTypes.func.isRequired
 }
 
 export default withRouter(ChallengeCard)

src/components/ChallengesComponent/ChallengeList/index.js

@@ -101,7 +101,9 @@ class ChallengeList extends Component {
       status,
       page,
       perPage,
-      totalChallenges } = this.props
+      totalChallenges,
+      partiallyUpdateChallengeDetails
+    } = this.props
     if (warnMessage) {
       return <Message warnMessage={warnMessage} />
     }
@@ -206,7 +208,13 @@ class ChallengeList extends Component {
                 map(challenges, (c) => {
                   return (
                     <li className={styles.challengeItem} key={`challenge-card-${c.id}`}>
-                      <ChallengeCard shouldShowCurrentPhase={selectedTab === 0} challenge={c} showError={this.showError} reloadChallengeList={this.reloadChallengeList} />
+                      <ChallengeCard
+                        shouldShowCurrentPhase={selectedTab === 0}
+                        challenge={c}
+                        showError={this.showError}
+                        reloadChallengeList={this.reloadChallengeList}
+                        partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
+                      />
                     </li>
                   )
                 })
@@ -247,7 +255,8 @@ ChallengeList.propTypes = {
   loadChallengesByPage: PropTypes.func.isRequired,
   page: PropTypes.number.isRequired,
   perPage: PropTypes.number.isRequired,
-  totalChallenges: PropTypes.number.isRequired
+  totalChallenges: PropTypes.number.isRequired,
+  partiallyUpdateChallengeDetails: PropTypes.func.isRequired
 }
 
 export default ChallengeList

src/components/ChallengesComponent/index.js

@@ -25,7 +25,8 @@ const ChallengesComponent = ({
   activeProjectId,
   page,
   perPage,
-  totalChallenges
+  totalChallenges,
+  partiallyUpdateChallengeDetails
 }) => {
   return (
     <Sticky top={10}>
@@ -84,6 +85,7 @@ const ChallengesComponent = ({
               page={page}
               perPage={perPage}
               totalChallenges={totalChallenges}
+              partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
             />
           )}
         </div>
@@ -106,7 +108,8 @@ ChallengesComponent.propTypes = {
   loadChallengesByPage: PropTypes.func.isRequired,
   page: PropTypes.number.isRequired,
   perPage: PropTypes.number.isRequired,
-  totalChallenges: PropTypes.number.isRequired
+  totalChallenges: PropTypes.number.isRequired,
+  partiallyUpdateChallengeDetails: PropTypes.func.isRequired
 }
 
 ChallengesComponent.defaultProps = {

src/containers/ChallengeEditor/index.js

@@ -153,21 +153,25 @@ class ChallengeEditor extends Component {
   }
 
   async activateChallenge () {
+    const { partiallyUpdateChallengeDetails } = this.props
     if (this.state.isLaunching) return
     const { challengeDetails } = this.props
     try {
       this.setState({ isLaunching: true })
-      const response = await patchChallenge(challengeDetails.id, { status: 'Active' })
+      // call action to update the challenge status
+      const action = await partiallyUpdateChallengeDetails(challengeDetails.id, {
+        status: 'Active'
+      })
       this.setState({
         isLaunching: false,
         showLaunchModal: false,
         showSuccessModal: true,
         suceessMessage: MESSAGE.CHALLENGE_LAUNCH_SUCCESS,
-        challengeDetails: { ...challengeDetails, status: response.status }
+        challengeDetails: action.challengeDetails
       })
     } catch (e) {
       const error = _.get(e, 'response.data.message', 'Unable to activate the challenge')
-      this.setState({ isLaunching: false, showLaunchModal: false, launchError: error })
+      this.setState({ isLaunching: false, launchError: error })
     }
   }
 

src/containers/Challenges/index.js

@@ -10,7 +10,7 @@ import { DebounceInput } from 'react-debounce-input'
 import ChallengesComponent from '../../components/ChallengesComponent'
 import ProjectCard from '../../components/ProjectCard'
 import Loader from '../../components/Loader'
-import { loadChallengesByPage } from '../../actions/challenges'
+import { loadChallengesByPage, partiallyUpdateChallengeDetails } from '../../actions/challenges'
 import { loadProject } from '../../actions/projects'
 import { loadProjects, setActiveProject, resetSidebarActiveParams } from '../../actions/sidebar'
 import {
@@ -85,7 +85,8 @@ class Challenges extends Component {
       page,
       perPage,
       totalChallenges,
-      setActiveProject
+      setActiveProject,
+      partiallyUpdateChallengeDetails
     } = this.props
     const { searchProjectName, onlyMyProjects } = this.state
     const projectInfo = _.find(projects, { id: activeProjectId }) || {}
@@ -145,6 +146,7 @@ class Challenges extends Component {
           page={page}
           perPage={perPage}
           totalChallenges={totalChallenges}
+          partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
         />
         }
       </Fragment>
@@ -170,7 +172,8 @@ Challenges.propTypes = {
   perPage: PropTypes.number.isRequired,
   totalChallenges: PropTypes.number.isRequired,
   loadProjects: PropTypes.func.isRequired,
-  setActiveProject: PropTypes.func.isRequired
+  setActiveProject: PropTypes.func.isRequired,
+  partiallyUpdateChallengeDetails: PropTypes.func.isRequired
 }
 
 const mapStateToProps = ({ challenges, sidebar, projects }) => ({
@@ -187,7 +190,8 @@ const mapDispatchToProps = {
   resetSidebarActiveParams,
   loadProject,
   loadProjects,
-  setActiveProject
+  setActiveProject,
+  partiallyUpdateChallengeDetails
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Challenges)