Merge pull request #1034 from mark-nakachon/fixes-#927

maxceem · web-flow · commit f2408b2efc2c · 2021-01-12T14:46:08.000+02:00
fixes - #927
diff --git a/src/actions/challenges.js b/src/actions/challenges.js
@@ -16,6 +16,7 @@ import {
   fetchGroupDetail,
   updateChallenge,
   patchChallenge,
+  deleteChallenge as deleteChallengeAPI,
   createChallenge as createChallengeAPI,
   createResource as createResourceAPI,
   deleteResource as deleteResourceAPI
@@ -39,6 +40,9 @@ import {
   CREATE_CHALLENGE_PENDING,
   CREATE_CHALLENGE_SUCCESS,
   CREATE_CHALLENGE_FAILURE,
+  DELETE_CHALLENGE_PENDING,
+  DELETE_CHALLENGE_SUCCESS,
+  DELETE_CHALLENGE_FAILURE,
   LOAD_CHALLENGE_RESOURCES
 } from '../config/constants'
 import { loadProject } from './projects'
@@ -276,6 +280,26 @@ export function partiallyUpdateChallengeDetails (challengeId, partialChallengeDe
   }
 }
 
+export function deleteChallenge (challengeId) {
+  return async (dispatch) => {
+    dispatch({
+      type: DELETE_CHALLENGE_PENDING
+    })
+
+    return deleteChallengeAPI(challengeId).then((challenge) => {
+      return dispatch({
+        type: DELETE_CHALLENGE_SUCCESS,
+        challengeDetails: challenge
+      })
+    }).catch((error) => {
+      dispatch({
+        type: DELETE_CHALLENGE_FAILURE
+      })
+      throw error
+    })
+  }
+}
+
 export function loadTimelineTemplates () {
   return async (dispatch) => {
     const timelineTemplates = await fetchTimelineTemplates()
diff --git a/src/components/ChallengeEditor/ChallengeEditor.module.scss b/src/components/ChallengeEditor/ChallengeEditor.module.scss
@@ -241,7 +241,7 @@
 .actionButtons {
   position: absolute;
   top: 30px;
-  a {
+  a,button {
     height: 40px;
   }
 }
@@ -251,7 +251,13 @@
 }
 
 .actionButtonsRight {
+  display: flex;
+  align-items: center;
   right: 20px;
+
+  button {
+    margin-right: 20px;
+  }
 }
 
 .buttonContainer {
diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js
@@ -68,6 +68,7 @@ class ChallengeEditor extends Component {
     super(props)
     this.state = {
       isLaunch: false,
+      isDeleteLaunch: false,
       isConfirm: false,
       isClose: false,
       isOpenAdvanceSettings: false,
@@ -122,6 +123,8 @@ class ChallengeEditor extends Component {
     this.getAvailableTimelineTemplates = this.getAvailableTimelineTemplates.bind(this)
     this.autoUpdateChallengeThrottled = _.throttle(this.validateAndAutoUpdateChallenge.bind(this), 3000) // 3s
     this.updateResource = this.updateResource.bind(this)
+    this.onDeleteChallenge = this.onDeleteChallenge.bind(this)
+    this.deleteModalLaunch = this.deleteModalLaunch.bind(this)
   }
 
   componentDidMount () {
@@ -132,6 +135,27 @@ class ChallengeEditor extends Component {
     this.resetChallengeData(this.setState.bind(this))
   }
 
+  deleteModalLaunch () {
+    if (!this.state.isDeleteLaunch) {
+      this.setState({ isDeleteLaunch: true })
+    }
+  }
+
+  async onDeleteChallenge () {
+    const { deleteChallenge, challengeDetails, history } = this.props
+    try {
+      this.setState({ isSaving: true })
+      // Call action to delete the challenge
+      await deleteChallenge(challengeDetails.id)
+      this.setState({ isSaving: false })
+      this.resetModal()
+      history.push(`/projects/${challengeDetails.projectId}/challenges`)
+    } catch (e) {
+      const error = _.get(e, 'response.data.message', 'Unable to Delete the challenge')
+      this.setState({ isSaving: false, error })
+    }
+  }
+
   /**
    * Validates challenge and if its valid calling an autosave method
    *
@@ -207,7 +231,7 @@ class ChallengeEditor extends Component {
   }
 
   resetModal () {
-    this.setState({ isLoading: false, isConfirm: false, isLaunch: false, error: null, isCloseTask: false })
+    this.setState({ isLoading: false, isConfirm: false, isLaunch: false, error: null, isCloseTask: false, isDeleteLaunch: false })
   }
 
   /**
@@ -1391,6 +1415,19 @@ class ChallengeEditor extends Component {
                 />
               </div>
             }
+            {
+              this.state.isDeleteLaunch && !this.state.isConfirm && (
+                <ConfirmationModal
+                  title='Confirm Delete'
+                  message={`Do you want to delete "${challenge.name}"?`}
+                  theme={theme}
+                  isProcessing={isSaving}
+                  errorMessage={this.state.error}
+                  onCancel={this.resetModal}
+                  onConfirm={this.onDeleteChallenge}
+                />
+              )
+            }
             { showTimeline && (
               <ChallengeScheduleField
                 templates={this.getAvailableTimelineTemplates()}
@@ -1444,6 +1481,7 @@ class ChallengeEditor extends Component {
         </div>
         <div className={styles.title}>{getTitle(isNew)}</div>
         <div className={cn(styles.actionButtons, styles.actionButtonsRight)}>
+          {this.props.challengeDetails.status === 'New' && <PrimaryButton text={'Delete'} type={'danger'} onClick={this.deleteModalLaunch} />}
           <PrimaryButton text={'Back'} type={'info'} submit link={`/projects/${projectDetail.id}/challenges`} />
         </div>
         <div className={styles.textRequired}>* Required</div>
@@ -1488,6 +1526,7 @@ ChallengeEditor.propTypes = {
   createChallenge: PropTypes.func,
   replaceResourceInRole: PropTypes.func,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
+  deleteChallenge: PropTypes.func.isRequired,
   loggedInUser: PropTypes.shape().isRequired
 }
 
diff --git a/src/components/ChallengesComponent/ChallengeCard/ChallengeCard.module.scss b/src/components/ChallengesComponent/ChallengeCard/ChallengeCard.module.scss
@@ -257,6 +257,31 @@
   }
 }
 
+.deleteButton {
+  height: 22px;
+  width: 86px;
+  border-radius: 11.5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: $tc-red;
+  border-color: $tc-red;
+  cursor: pointer;
+
+  span {
+    @include roboto;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 17px;
+    color: $white;
+    text-transform: capitalize;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .icon {
   vertical-align: bottom;
 }
diff --git a/src/components/ChallengesComponent/ChallengeCard/index.js b/src/components/ChallengesComponent/ChallengeCard/index.js
@@ -96,14 +96,20 @@ const getPhaseInfo = (c) => {
  * @param onUpdateLaunch
  * @returns {*}
  */
-const hoverComponents = (challenge, onUpdateLaunch) => {
+const hoverComponents = (challenge, onUpdateLaunch, deleteModalLaunch) => {
   const communityAppUrl = `${COMMUNITY_APP_URL}/challenges/${challenge.id}`
   const directUrl = `${DIRECT_PROJECT_URL}/contest/detail?projectId=${challenge.legacyId}`
   const orUrl = `${ONLINE_REVIEW_URL}/review/actions/ViewProjectDetails?pid=${challenge.legacyId}`
 
   // NEW projects never have Legacy challenge created, so don't show links and "Activate" button for them at all
   if (challenge.status.toUpperCase() === CHALLENGE_STATUS.NEW) {
-    return null
+    if (challenge.status.toUpperCase() === CHALLENGE_STATUS.NEW) {
+      return (
+        <button className={styles.deleteButton} onClick={deleteModalLaunch}>
+          <span>Delete</span>
+        </button>
+      )
+    }
   }
 
   return challenge.legacyId ? (
@@ -177,10 +183,13 @@ class ChallengeCard extends React.Component {
     this.state = {
       isConfirm: false,
       isLaunch: false,
+      isDeleteLaunch: false,
       isSaving: false
     }
     this.onUpdateConfirm = this.onUpdateConfirm.bind(this)
     this.onUpdateLaunch = this.onUpdateLaunch.bind(this)
+    this.onDeleteChallenge = this.onDeleteChallenge.bind(this)
+    this.deleteModalLaunch = this.deleteModalLaunch.bind(this)
     this.resetModal = this.resetModal.bind(this)
     this.onLaunchChallenge = this.onLaunchChallenge.bind(this)
   }
@@ -195,8 +204,14 @@ class ChallengeCard extends React.Component {
     }
   }
 
+  deleteModalLaunch () {
+    if (!this.state.isDeleteLaunch) {
+      this.setState({ isDeleteLaunch: true })
+    }
+  }
+
   resetModal () {
-    this.setState({ isConfirm: false, isLaunch: false })
+    this.setState({ isConfirm: false, isLaunch: false, isDeleteLaunch: false })
   }
 
   async onLaunchChallenge () {
@@ -216,12 +231,39 @@ class ChallengeCard extends React.Component {
     }
   }
 
+  async onDeleteChallenge () {
+    const { deleteChallenge, challenge } = this.props
+    try {
+      this.setState({ isSaving: true })
+      // Call action to delete the challenge
+      await deleteChallenge(challenge.id)
+      this.setState({ isSaving: false })
+      this.resetModal()
+    } catch (e) {
+      const error = _.get(e, 'response.data.message', 'Unable to Delete the challenge')
+      this.setState({ isSaving: false, error })
+    }
+  }
+
   render () {
-    const { isLaunch, isConfirm, isSaving } = this.state
+    const { isLaunch, isConfirm, isSaving, isDeleteLaunch } = this.state
     const { challenge, shouldShowCurrentPhase, reloadChallengeList } = this.props
     const { phaseMessage, endTime } = getPhaseInfo(challenge)
     return (
       <div className={styles.item}>
+        {
+          isDeleteLaunch && !isConfirm && (
+            <ConfirmationModal
+              title='Confirm Delete'
+              message={`Do you want to delete "${challenge.name}"?`}
+              theme={theme}
+              isProcessing={isSaving}
+              errorMessage={this.state.error}
+              onCancel={this.resetModal}
+              onConfirm={this.onDeleteChallenge}
+            />
+          )
+        }
         { isLaunch && !isConfirm && (
           <ConfirmationModal
             title='Confirm Launch'
@@ -263,7 +305,7 @@ class ChallengeCard extends React.Component {
           <span className='block light-text'>{endTime}</span>
         </Link>)}
         <div className={cn(styles.col4, styles.editingContainer)}>
-          {hoverComponents(challenge, this.onUpdateLaunch, this.props.showError)}
+          {hoverComponents(challenge, this.onUpdateLaunch, this.deleteModalLaunch)}
         </div>
         <div className={cn(styles.col4, styles.iconsContainer)}>
           <div className={styles.faIconContainer}>
@@ -282,16 +324,15 @@ class ChallengeCard extends React.Component {
 
 ChallengeCard.defaultPrps = {
   shouldShowCurrentPhase: true,
-  showError: () => {},
   reloadChallengeList: () => {}
 }
 
 ChallengeCard.propTypes = {
   challenge: PropTypes.object,
   shouldShowCurrentPhase: PropTypes.bool,
-  showError: PropTypes.func,
   reloadChallengeList: PropTypes.func,
-  partiallyUpdateChallengeDetails: PropTypes.func.isRequired
+  partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
+  deleteChallenge: PropTypes.func.isRequired
 }
 
 export default withRouter(ChallengeCard)
diff --git a/src/components/ChallengesComponent/ChallengeList/index.js b/src/components/ChallengesComponent/ChallengeList/index.js
@@ -102,7 +102,8 @@ class ChallengeList extends Component {
       page,
       perPage,
       totalChallenges,
-      partiallyUpdateChallengeDetails
+      partiallyUpdateChallengeDetails,
+      deleteChallenge
     } = this.props
     if (warnMessage) {
       return <Message warnMessage={warnMessage} />
@@ -211,9 +212,9 @@ class ChallengeList extends Component {
                       <ChallengeCard
                         shouldShowCurrentPhase={selectedTab === 0}
                         challenge={c}
-                        showError={this.showError}
                         reloadChallengeList={this.reloadChallengeList}
                         partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
+                        deleteChallenge={deleteChallenge}
                       />
                     </li>
                   )
@@ -256,7 +257,8 @@ ChallengeList.propTypes = {
   page: PropTypes.number.isRequired,
   perPage: PropTypes.number.isRequired,
   totalChallenges: PropTypes.number.isRequired,
-  partiallyUpdateChallengeDetails: PropTypes.func.isRequired
+  partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
+  deleteChallenge: PropTypes.func.isRequired
 }
 
 export default ChallengeList
diff --git a/src/components/ChallengesComponent/index.js b/src/components/ChallengesComponent/index.js
@@ -26,7 +26,8 @@ const ChallengesComponent = ({
   page,
   perPage,
   totalChallenges,
-  partiallyUpdateChallengeDetails
+  partiallyUpdateChallengeDetails,
+  deleteChallenge
 }) => {
   return (
     <Sticky top={10}>
@@ -86,6 +87,7 @@ const ChallengesComponent = ({
               perPage={perPage}
               totalChallenges={totalChallenges}
               partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
+              deleteChallenge={deleteChallenge}
             />
           )}
         </div>
@@ -109,7 +111,8 @@ ChallengesComponent.propTypes = {
   page: PropTypes.number.isRequired,
   perPage: PropTypes.number.isRequired,
   totalChallenges: PropTypes.number.isRequired,
-  partiallyUpdateChallengeDetails: PropTypes.func.isRequired
+  partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
+  deleteChallenge: PropTypes.func.isRequired
 }
 
 ChallengesComponent.defaultProps = {
diff --git a/src/config/constants.js b/src/config/constants.js
@@ -48,6 +48,10 @@ export const CREATE_CHALLENGE_SUCCESS = 'CREATE_CHALLENGE_SUCCESS'
 export const CREATE_CHALLENGE_PENDING = 'CREATE_CHALLENGE_PENDING'
 export const CREATE_CHALLENGE_FAILURE = 'CREATE_CHALLENGE_FAILURE'
 
+export const DELETE_CHALLENGE_SUCCESS = 'DELETE_CHALLENGE_SUCCESS'
+export const DELETE_CHALLENGE_PENDING = 'DELETE_CHALLENGE_PENDING'
+export const DELETE_CHALLENGE_FAILURE = 'DELETE_CHALLENGE_FAILURE'
+
 export const LOAD_PROJECT_DETAILS = 'LOAD_PROJECT_DETAILS'
 export const LOAD_PROJECT_DETAILS_SUCCESS = 'LOAD_PROJECT_DETAILS_SUCCESS'
 export const LOAD_PROJECT_DETAILS_PENDING = 'LOAD_PROJECT_DETAILS_PENDING'
diff --git a/src/containers/ChallengeEditor/index.js b/src/containers/ChallengeEditor/index.js
diff --git a/src/containers/Challenges/index.js b/src/containers/Challenges/index.js
diff --git a/src/reducers/challenges.js b/src/reducers/challenges.js
diff --git a/src/services/challenges.js b/src/services/challenges.js

Original file line number	Diff line number	Diff line change
`@@ -241,7 +241,7 @@`
`241`	`241`	`.actionButtons {`
`242`	`242`	`position: absolute;`
`243`	`243`	`top: 30px;`
`244`		`- a {`
	`244`	`+ a,button {`
`245`	`245`	`height: 40px;`
`246`	`246`	`}`
`247`	`247`	`}`
`@@ -251,7 +251,13 @@`
`251`	`251`	`}`
`252`	`252`
`253`	`253`	`.actionButtonsRight {`
	`254`	`+ display: flex;`
	`255`	`+ align-items: center;`
`254`	`256`	`right: 20px;`
	`257`	`+`
	`258`	`+ button {`
	`259`	`+ margin-right: 20px;`
	`260`	`+ }`
`255`	`261`	`}`
`256`	`262`
`257`	`263`	`.buttonContainer {`