Merge pull request #1199 from yoution/issue-1174

fix: issue #1174

Author: phead198708

src/components/ChallengeEditor/Cancel-Dropdown/Cancel-DropDown.module.scss

@@ -12,6 +12,7 @@
   box-shadow: 0 1px 5px #ccc;
   background-clip: padding-box;
   border: 1px solid #ccc;
+  cursor: pointer;
 
   .menu {
     height: 30px;
@@ -23,6 +24,10 @@
   }
 }
 
+.pop-container {
+  height: 100%;
+}
+
 .modalContainer {
   padding: 0;
   position: fixed;

src/components/ChallengeEditor/Cancel-Dropdown/index.js

@@ -1,34 +1,26 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
 import Dropdown from 'rc-dropdown'
 import styles from './Cancel-DropDown.module.scss'
 import { CANCEL_REASONS } from '../../../config/constants'
 import cn from 'classnames'
 import 'rc-dropdown/assets/index.css'
 import { PrimaryButton } from '../../Buttons'
 import ConfirmationModal from '../../Modal/ConfirmationModal'
-import { patchChallenge } from '../../../services/challenges'
 import _ from 'lodash'
 
 const theme = {
   container: styles.modalContainer
 }
-const CancelDropDown = ({ challenge, history }) => {
+const CancelDropDown = ({ challenge, onSelectMenu }) => {
   const [cancelReason, setCancelReason] = useState('')
   const [showModal, setShowModal] = useState(false)
+  const popupContainerEl = useRef(null)
 
   const onSelect = v => {
     setCancelReason(v)
     setShowModal(true)
   }
-  const onConfirm = async () => {
-    await patchChallenge(challenge.id, {
-      status: cancelReason
-    })
-
-    history.push(`/projects/${challenge.projectId}/challenges`)
-  }
 
   const menu = (
     <div className={cn(styles['menus'])}>
@@ -49,20 +41,23 @@ const CancelDropDown = ({ challenge, history }) => {
 
   return (
     <>
-      <Dropdown trigger={['click']} overlay={menu} animation='slide-up'>
-        <PrimaryButton text={'Cancel'} type={'danger'} />
+      <Dropdown trigger={['click']} overlay={menu} animation='slide-up' getPopupContainer={() => {
+        return popupContainerEl.current
+      }}>
+        <div ref={popupContainerEl} className={styles['pop-container']}>
+          <PrimaryButton text={'Cancel'} type={'danger'} />
+        </div>
       </Dropdown>
       {showModal && (
         <ConfirmationModal
-          // title='Reminder'
           message={'Do you want to cancel the challenge ?'}
           theme={theme}
           cancelText='Cancel'
           confirmText='Continue'
           onCancel={() => {
             setShowModal(false)
           }}
-          onConfirm={onConfirm}
+          onConfirm={() => { onSelectMenu(challenge, cancelReason) }}
         />
       )}
     </>
@@ -73,7 +68,7 @@ CancelDropDown.defaultProps = {}
 
 CancelDropDown.propTypes = {
   challenge: PropTypes.shape().isRequired,
-  history: PropTypes.shape()
+  onSelectMenu: PropTypes.func.isRequired
 }
 
-export default withRouter(CancelDropDown)
+export default CancelDropDown

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -40,6 +40,7 @@ const ChallengeViewTabs = ({
   assignedMemberDetails,
   enableEdit,
   onLaunchChallenge,
+  cancelChallenge,
   onCloseTask
 }) => {
   const [selectedTab, setSelectedTab] = useState(0)
@@ -99,7 +100,7 @@ const ChallengeViewTabs = ({
           styles.actionButtonsRight
         )}
       >
-        {(challenge.status === 'Draft' || challenge.status === 'New') && <div className={styles['cancel-button']}><CancelDropDown challenge={challenge} /></div>}
+        {(challenge.status === 'Draft' || challenge.status === 'New') && <div className={styles['cancel-button']}><CancelDropDown challenge={challenge} onSelectMenu={cancelChallenge} /></div>}
         {challenge.status === 'Draft' && (
           <div className={styles.button}>
             {challenge.legacyId || isTask ? (
@@ -232,6 +233,7 @@ ChallengeViewTabs.propTypes = {
   assignedMemberDetails: PropTypes.shape(),
   enableEdit: PropTypes.bool,
   onLaunchChallenge: PropTypes.func,
+  cancelChallenge: PropTypes.func.isRequired,
   onCloseTask: PropTypes.func
 }
 

src/components/ChallengeEditor/index.js

@@ -1204,6 +1204,7 @@ class ChallengeEditor extends Component {
       uploadAttachments,
       token,
       removeAttachment,
+      cancelChallenge,
       failedToLoad,
       errorMessage,
       projectDetail,
@@ -1408,7 +1409,7 @@ class ChallengeEditor extends Component {
                 </div>
               )}
               <div className={styles.button}>
-                <CancelDropDown challenge={challenge} />
+                <CancelDropDown challenge={challenge} onSelectMenu={cancelChallenge} />
               </div>
             </div>}
             {!isLoading && isActive && <div className={styles.buttonContainer}>
@@ -1639,6 +1640,7 @@ ChallengeEditor.propTypes = {
   metadata: PropTypes.object.isRequired,
   isLoading: PropTypes.bool.isRequired,
   uploadAttachments: PropTypes.func.isRequired,
+  cancelChallenge: PropTypes.func.isRequired,
   removeAttachment: PropTypes.func.isRequired,
   attachments: PropTypes.arrayOf(PropTypes.shape()),
   token: PropTypes.string.isRequired,

src/containers/ChallengeEditor/index.js

@@ -57,6 +57,7 @@ class ChallengeEditor extends Component {
     }
 
     this.onLaunchChallenge = this.onLaunchChallenge.bind(this)
+    this.cancelChallenge = this.cancelChallenge.bind(this)
     this.activateChallenge = this.activateChallenge.bind(this)
     this.closeLaunchModal = this.closeLaunchModal.bind(this)
     this.closeCloseTaskModal = this.closeCloseTaskModal.bind(this)
@@ -190,6 +191,15 @@ class ChallengeEditor extends Component {
     }
   }
 
+  async cancelChallenge (challenge, cancelReason) {
+    const { partiallyUpdateChallengeDetails, history } = this.props
+
+    await partiallyUpdateChallengeDetails(challenge.id, {
+      status: cancelReason
+    })
+    history.push(`/projects/${challenge.projectId}/challenges`)
+  }
+
   onCloseTask () {
     this.setState({ showCloseTaskModal: true })
   }
@@ -395,6 +405,7 @@ class ChallengeEditor extends Component {
               isBillingAccountExpired={isBillingAccountExpired}
               challengeResources={challengeResources}
               metadata={metadata}
+              cancelChallenge={this.cancelChallenge}
               projectId={_.get(match.params, 'projectId', null)}
               challengeId={challengeId}
               isNew={!_.has(match.params, 'challengeId')}
@@ -429,6 +440,7 @@ class ChallengeEditor extends Component {
                 challengeDetails={challengeDetails}
                 challengeResources={challengeResources}
                 metadata={metadata}
+                cancelChallenge={this.cancelChallenge}
                 projectId={_.get(match.params, 'projectId', null)}
                 challengeId={challengeId}
                 isNew={!_.has(match.params, 'challengeId')}
@@ -461,6 +473,7 @@ class ChallengeEditor extends Component {
               projectDetail={projectDetail}
               challengeSubmissions={challengeSubmissions}
               challenge={challengeDetails}
+              cancelChallenge={this.cancelChallenge}
               attachments={attachments}
               challengeResources={challengeResources}
               token={token}
@@ -503,7 +516,7 @@ ChallengeEditor.propTypes = {
   isProjectLoading: PropTypes.bool,
   hasProjectAccess: PropTypes.bool,
   projectDetail: PropTypes.object,
-  // history: PropTypes.object,
+  history: PropTypes.object,
   metadata: PropTypes.shape({
     challengeTypes: PropTypes.array
   }),