added assign to me button

Author: nursoltan-s

src/components/ChallengeEditor/AssignedMember-Field/AssignedMember-Field.module.scss

@@ -45,5 +45,9 @@
   .readOnlyValue {
     margin-bottom: 0.5rem; // the same like `label` to be aligned
   }
+
+  .assignSelfField {
+    margin-left: 20px;
+  }
 }
 

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

@@ -6,13 +6,15 @@ import PropTypes from 'prop-types'
 import cn from 'classnames'
 import styles from './AssignedMember-Field.module.scss'
 import SelectUserAutocomplete from '../../SelectUserAutocomplete'
+import { PrimaryButton } from '../../Buttons'
 
-const AssignedMemberField = ({ challenge, onChange, assignedMemberDetails, readOnly }) => {
+const AssignedMemberField = ({ challenge, onAssignSelf, onChange, assignedMemberDetails, readOnly }) => {
   const value = assignedMemberDetails ? {
     // if we know assigned member details, then show user `handle`, otherwise fallback to `userId`
     label: assignedMemberDetails.handle,
     value: assignedMemberDetails.userId + ''
   } : null
+
   return (
     <div className={styles.row}>
       <div className={cn(styles.field, styles.col1)}>
@@ -28,6 +30,13 @@ const AssignedMemberField = ({ challenge, onChange, assignedMemberDetails, readO
           />
         )}
       </div>
+      <div className={styles.assignSelfField}>
+        <PrimaryButton
+          text='Assign to me'
+          type='info'
+          onClick={onAssignSelf}
+        />
+      </div>
     </div>
   )
 }
@@ -41,7 +50,8 @@ AssignedMemberField.propTypes = {
   challenge: PropTypes.shape().isRequired,
   onChange: PropTypes.func,
   assignedMemberDetails: PropTypes.shape(),
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  onAssignSelf: PropTypes.func
 }
 
 export default AssignedMemberField

src/components/ChallengeEditor/index.js

@@ -90,6 +90,7 @@ class ChallengeEditor extends Component {
     this.onUpdateOthers = this.onUpdateOthers.bind(this)
     this.onUpdateCheckbox = this.onUpdateCheckbox.bind(this)
     this.onUpdateAssignedMember = this.onUpdateAssignedMember.bind(this)
+    this.onAssignSelf = this.onAssignSelf.bind(this)
     this.addFileType = this.addFileType.bind(this)
     this.removeFileType = this.removeFileType.bind(this)
     this.updateFileTypesMetadata = this.updateFileTypesMetadata.bind(this)
@@ -335,6 +336,22 @@ class ChallengeEditor extends Component {
     })
   }
 
+  /**
+   * Update Assigned Member to Current User
+   */
+  onAssignSelf () {
+    const { loggedInUser } = this.props
+
+    const assignedMemberDetails = {
+      handle: loggedInUser.handle,
+      userId: loggedInUser.userId
+    }
+
+    this.setState({
+      assignedMemberDetails
+    })
+  }
+
   /**
    * Update Single Select
    * @param option The select option
@@ -1326,6 +1343,7 @@ class ChallengeEditor extends Component {
                 challenge={challenge}
                 onChange={this.onUpdateAssignedMember}
                 assignedMemberDetails={assignedMemberDetails}
+                onAssignSelf={this.onAssignSelf}
               />
             )}
             <CopilotField challenge={challenge} copilots={metadata.members} onUpdateOthers={this.onUpdateOthers} />
@@ -1469,7 +1487,8 @@ ChallengeEditor.propTypes = {
   updateChallengeDetails: PropTypes.func.isRequired,
   createChallenge: PropTypes.func,
   replaceResourceInRole: PropTypes.func,
-  partiallyUpdateChallengeDetails: PropTypes.func.isRequired
+  partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
+  loggedInUser: PropTypes.shape().isRequired
 }
 
 export default withRouter(ChallengeEditor)

src/containers/ChallengeEditor/index.js

@@ -229,7 +229,8 @@ class ChallengeEditor extends Component {
       updateChallengeDetails,
       partiallyUpdateChallengeDetails,
       createChallenge,
-      replaceResourceInRole
+      replaceResourceInRole,
+      loggedInUser
       // members
     } = this.props
     const {
@@ -335,6 +336,7 @@ class ChallengeEditor extends Component {
             updateChallengeDetails={updateChallengeDetails}
             replaceResourceInRole={replaceResourceInRole}
             partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
+            loggedInUser={loggedInUser}
           />
         ))
         } />