add assign yourself copilit button

Author: doctorhilarius

src/components/ChallengeEditor/ChallengeView/index.js

@@ -37,7 +37,8 @@ const ChallengeView = ({
   enableEdit,
   onLaunchChallenge,
   onCloseTask,
-  projectPhases
+  projectPhases,
+  assignYourselfCopilit
 }) => {
   const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
@@ -103,18 +104,18 @@ const ChallengeView = ({
                 </span>
               </div>
               {selectedMilestone &&
-              <div className={styles.col}>
-                <span><span className={styles.fieldTitle}>Milestone:</span> {selectedMilestone ? (
-                  <a href={`${CONNECT_APP_URL}/projects/${projectDetail.id}`} target='_blank'
-                    rel='noopener noreferrer'>
-                    {selectedMilestone.name}
-                  </a>
-                ) : ''}</span>
-              </div>
+                <div className={styles.col}>
+                  <span><span className={styles.fieldTitle}>Milestone:</span> {selectedMilestone ? (
+                    <a href={`${CONNECT_APP_URL}/projects/${projectDetail.id}`} target='_blank'
+                      rel='noopener noreferrer'>
+                      {selectedMilestone.name}
+                    </a>
+                  ) : ''}</span>
+                </div>
               }
               <div className={styles.col}>
                 <span className={styles.fieldTitle}>Track:</span>
-                <Track disabled type={challengeTrack} isActive key={challenge.trackId} onUpdateOthers={() => {}} />
+                <Track disabled type={challengeTrack} isActive key={challenge.trackId} onUpdateOthers={() => { }} />
               </div>
               <div className={styles.col}>
                 <span><span className={styles.fieldTitle}>Type:</span> {selectedType ? selectedType.name : ''}</span>
@@ -130,10 +131,11 @@ const ChallengeView = ({
               </div>
             </div>
             {isTask &&
-            <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly />}
+              <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly />}
             <CopilotField challenge={{
-              copilot
-            }} copilots={metadata.members} readOnly />
+              copilot,
+              selfService: challenge.legacy.selfService
+            }} copilots={metadata.members} assignYourselfCopilit={assignYourselfCopilit} readOnly />
             <div className={cn(styles.row, styles.topRow)}>
               <div className={styles.col}>
                 <span><span
@@ -259,7 +261,8 @@ ChallengeView.propTypes = {
   enableEdit: PropTypes.bool,
   onLaunchChallenge: PropTypes.func,
   onCloseTask: PropTypes.func,
-  projectPhases: PropTypes.arrayOf(PropTypes.object)
+  projectPhases: PropTypes.arrayOf(PropTypes.object),
+  assignYourselfCopilit: PropTypes.func.isRequired
 }
 
 export default withRouter(ChallengeView)

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -43,7 +43,8 @@ const ChallengeViewTabs = ({
   onLaunchChallenge,
   cancelChallenge,
   onCloseTask,
-  projectPhases
+  projectPhases,
+  assignYourselfCopilit
 }) => {
   const [selectedTab, setSelectedTab] = useState(0)
 
@@ -94,7 +95,7 @@ const ChallengeViewTabs = ({
               styles.actionButtonsLeft
             )}
           >
-            { isTask ? (<ForumLink challenge={challenge} />)
+            {isTask ? (<ForumLink challenge={challenge} />)
               : (<LegacyLinks challenge={challenge} challengeView />)
             }
           </div>
@@ -208,6 +209,7 @@ const ChallengeViewTabs = ({
           onLaunchChallenge={onLaunchChallenge}
           onCloseTask={onCloseTask}
           projectPhases={projectPhases}
+          assignYourselfCopilit={assignYourselfCopilit}
         />
       )}
       {selectedTab === 1 && (
@@ -244,7 +246,8 @@ ChallengeViewTabs.propTypes = {
   onLaunchChallenge: PropTypes.func,
   cancelChallenge: PropTypes.func.isRequired,
   onCloseTask: PropTypes.func,
-  projectPhases: PropTypes.arrayOf(PropTypes.object)
+  projectPhases: PropTypes.arrayOf(PropTypes.object),
+  assignYourselfCopilit: PropTypes.func.isRequired
 }
 
 export default ChallengeViewTabs

src/components/ChallengeEditor/Copilot-Field/index.js

@@ -1,23 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { PrimaryButton } from '../../Buttons'
 import styles from './Copilot-Field.module.scss'
 import cn from 'classnames'
 import _ from 'lodash'
 import CopilotCard from '../../CopilotCard'
 
-const CopilotField = ({ copilots, challenge, onUpdateOthers, readOnly }) => {
+const CopilotField = ({ copilots, challenge, onUpdateOthers, readOnly, assignYourselfCopilit }) => {
   let errMessage = 'Please set a copilot'
   const selectedCopilot = _.find(copilots, { handle: challenge.copilot })
   const copilotFee = _.find(challenge.prizeSets, p => p.type === 'copilot', [])
-  console.log(copilotFee)
+  const selfService = challenge.selfService
+
   if (readOnly) {
     return (
       <div className={styles.row}>
         <div className={cn(styles.field, styles.col1)}>
-          <label htmlFor='copilot'>Copilot :</label>
+          <label htmlFor='copilot'>Copilot:</label>
         </div>
-        {selectedCopilot && (<div className={cn(styles.field, styles.col2)}>
-          <CopilotCard copilot={selectedCopilot} selectedCopilot='' key={selectedCopilot.handle} />
+        {(selectedCopilot || selfService) && (<div className={cn(styles.field, styles.col2)}>
+          {(selectedCopilot && <CopilotCard copilot={selectedCopilot} selectedCopilot='' key={selectedCopilot.handle} />)}
+          {(selfService && <PrimaryButton
+            text={'Assign Yourself'}
+            type={'info'}
+            onClick={assignYourselfCopilit}
+          />)}
         </div>)}
       </div>
     )
@@ -26,7 +33,7 @@ const CopilotField = ({ copilots, challenge, onUpdateOthers, readOnly }) => {
     <>
       <div className={styles.row}>
         <div className={cn(styles.field, styles.col1)}>
-          <label htmlFor='copilot'>Copilot :</label>
+          <label htmlFor='copilot'>Copilot:</label>
         </div>
         <div className={cn(styles.field, styles.col2)}>
           {
@@ -49,15 +56,16 @@ const CopilotField = ({ copilots, challenge, onUpdateOthers, readOnly }) => {
 
 CopilotField.defaultProps = {
   copilots: [],
-  onUpdateOthers: () => {},
+  onUpdateOthers: () => { },
   readOnly: false
 }
 
 CopilotField.propTypes = {
   copilots: PropTypes.arrayOf(PropTypes.shape()).isRequired,
   challenge: PropTypes.shape().isRequired,
   onUpdateOthers: PropTypes.func,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  assignYourselfCopilit: PropTypes.func.isRequired
 }
 
 export default CopilotField

src/containers/ChallengeEditor/index.js

@@ -306,6 +306,10 @@ class ChallengeEditor extends Component {
     }
   }
 
+  assignYourselfCopilit () {
+    console.debug('assign copilit')
+  }
+
   render () {
     const {
       match,
@@ -330,7 +334,8 @@ class ChallengeEditor extends Component {
       deleteChallenge,
       loggedInUser,
       projectPhases,
-      isProjectPhasesLoading
+      isProjectPhasesLoading,
+      assignYourselfCopilit
       // members
     } = this.props
     const {
@@ -424,6 +429,7 @@ class ChallengeEditor extends Component {
               replaceResourceInRole={replaceResourceInRole}
               partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
               projectPhases={projectPhases}
+              assignYourselfCopilit={assignYourselfCopilit}
             />
           )}
         />
@@ -487,6 +493,7 @@ class ChallengeEditor extends Component {
               enableEdit={enableEdit}
               onLaunchChallenge={this.onLaunchChallenge}
               onCloseTask={this.onCloseTask}
+              assignYourselfCopilit={this.assignYourselfCopilit}
             />
           )}
         />
@@ -541,7 +548,8 @@ ChallengeEditor.propTypes = {
   replaceResourceInRole: PropTypes.func,
   loadProject: PropTypes.func,
   projectPhases: PropTypes.arrayOf(PropTypes.object),
-  isProjectPhasesLoading: PropTypes.bool
+  isProjectPhasesLoading: PropTypes.bool,
+  assignYourselfCopilit: PropTypes.func.isRequired
   // members: PropTypes.arrayOf(PropTypes.shape())
 }