Merge pull request #803 from topcoder-platform/develop

Moving latest to prod

Author: vikasrohit

src/actions/challenges.js

@@ -12,7 +12,10 @@ import {
   fetchResources,
   fetchResourceRoles,
   fetchChallengeTimelines,
-  fetchChallengeTracks
+  fetchChallengeTracks,
+  updateChallenge,
+  patchChallenge,
+  createChallenge as createChallengeAPI
 } from '../services/challenges'
 import {
   LOAD_CHALLENGE_DETAILS_PENDING,
@@ -30,7 +33,13 @@ import {
   LOAD_CHALLENGE_RESOURCES_SUCCESS,
   LOAD_CHALLENGE_RESOURCES_FAILURE,
   REMOVE_ATTACHMENT,
-  PAGE_SIZE
+  PAGE_SIZE,
+  UPDATE_CHALLENGE_DETAILS_PENDING,
+  UPDATE_CHALLENGE_DETAILS_SUCCESS,
+  UPDATE_CHALLENGE_DETAILS_FAILURE,
+  CREATE_CHALLENGE_PENDING,
+  CREATE_CHALLENGE_SUCCESS,
+  CREATE_CHALLENGE_FAILURE
 } from '../config/constants'
 import { fetchProjectById } from '../services/projects'
 import { loadProject } from './projects'
@@ -197,6 +206,88 @@ export function loadChallengeDetails (projectId, challengeId) {
   }
 }
 
+/**
+ * Update challenge details
+ *
+ * @param {String} challengeId      challenge id
+ * @param {Object} challengeDetails challenge data
+ *
+ * @returns {Promise<{ type: string, challengeDetails: object }>} action object
+ */
+export function updateChallengeDetails (challengeId, challengeDetails) {
+  return async (dispatch) => {
+    dispatch({
+      type: UPDATE_CHALLENGE_DETAILS_PENDING
+    })
+
+    return updateChallenge(challengeId, challengeDetails).then((challenge) => {
+      return dispatch({
+        type: UPDATE_CHALLENGE_DETAILS_SUCCESS,
+        challengeDetails: challenge
+      })
+    }).catch(() => {
+      dispatch({
+        type: UPDATE_CHALLENGE_DETAILS_FAILURE
+      })
+    })
+  }
+}
+
+/**
+ * Create a new challenge
+ *
+ * @param {Object} challengeDetails challenge data
+ *
+ * @returns {Promise<{ type: string, challengeDetails: object }>} action object
+ */
+export function createChallenge (challengeDetails) {
+  return async (dispatch) => {
+    dispatch({
+      type: CREATE_CHALLENGE_PENDING
+    })
+
+    return createChallengeAPI(challengeDetails).then((challenge) => {
+      return dispatch({
+        type: CREATE_CHALLENGE_SUCCESS,
+        challengeDetails: challenge
+      })
+    }).catch(() => {
+      dispatch({
+        type: CREATE_CHALLENGE_FAILURE
+      })
+    })
+  }
+}
+
+/**
+ * Partially update challenge details
+ *
+ * The difference from `updateChallengeDetails` that this method internally uses `PATCH` API method instead of `PUT`.
+ *
+ * @param {String} challengeId             challenge id
+ * @param {Object} partialChallengeDetails partial challenge data
+ *
+ * @returns {Promise<{ type: string, challengeDetails: object }>} action object
+ */
+export function partiallyUpdateChallengeDetails (challengeId, partialChallengeDetails) {
+  return async (dispatch) => {
+    dispatch({
+      type: UPDATE_CHALLENGE_DETAILS_PENDING
+    })
+
+    return patchChallenge(challengeId, partialChallengeDetails).then((challenge) => {
+      return dispatch({
+        type: UPDATE_CHALLENGE_DETAILS_SUCCESS,
+        challengeDetails: challenge
+      })
+    }).catch(() => {
+      dispatch({
+        type: UPDATE_CHALLENGE_DETAILS_FAILURE
+      })
+    })
+  }
+}
+
 export function loadTimelineTemplates () {
   return async (dispatch) => {
     const timelineTemplates = await fetchTimelineTemplates()

src/actions/members.js

@@ -0,0 +1,44 @@
+import { LOAD_MEMBER_PENDING, LOAD_MEMBER_FAILURE, LOAD_MEMBER_SUCCESS } from '../config/constants'
+import { searchProfilesByUserIds } from '../services/user'
+import _ from 'lodash'
+
+/**
+ * Load user details into the store
+ * @param userId user id
+ * @param forceReload if `true` then member details would be reloaded even if already loaded
+ * @returns {Function}
+ */
+export function loadMemberDetails (userId, forceReload = false) {
+  return (dispatch, getState) => {
+    const members = getState().members.members
+    const existentMember = _.find(members, { userId })
+
+    // don't reload member details if already loaded, unless we force to
+    if (existentMember && !forceReload) {
+      return
+    }
+
+    dispatch({
+      type: LOAD_MEMBER_PENDING,
+      meta: {
+        userId
+      }
+    })
+    searchProfilesByUserIds([userId]).then(([foundUser]) => {
+      if (foundUser) {
+        dispatch({
+          type: LOAD_MEMBER_SUCCESS,
+          payload: foundUser
+        })
+      } else {
+        dispatch({
+          type: LOAD_MEMBER_FAILURE
+        })
+      }
+    }).catch(() => {
+      dispatch({
+        type: LOAD_MEMBER_FAILURE
+      })
+    })
+  }
+}

src/components/Buttons/OutlineButton/Outline.module.scss

@@ -41,11 +41,12 @@
     }
   }
 
-  &.disable {
+  &.disable,
+  &[disabled] {
     @include roboto-light();
     font-weight: 300;
-
     border: 1px solid $tc-gray-40;
+    cursor: default;
 
     span {
       color: $tc-gray-40;

src/components/Buttons/OutlineButton/index.js

@@ -6,10 +6,15 @@ import cn from 'classnames'
 import styles from './Outline.module.scss'
 import _ from 'lodash'
 
-const OutlineButton = ({ type, text, link, onClick, url, className, submit }) => {
+const OutlineButton = ({ type, text, link, onClick, url, className, submit, disabled }) => {
   if (_.isEmpty(link) && _.isEmpty(url)) {
     return (
-      <button type={submit ? 'submit' : 'button'} className={cn(styles.container, styles[type], className)} onClick={submit ? null : onClick}>
+      <button
+        type={submit ? 'submit' : 'button'}
+        className={cn(styles.container, styles[type], className)}
+        onClick={submit ? null : onClick}
+        disabled={disabled}
+      >
         <span>{text}</span>
       </button>
     )
@@ -37,7 +42,8 @@ OutlineButton.propTypes = {
   url: PropTypes.string,
   className: PropTypes.string,
   onClick: PropTypes.func,
-  submit: PropTypes.bool
+  submit: PropTypes.bool,
+  disabled: PropTypes.bool
 }
 
 export default OutlineButton

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

@@ -0,0 +1,49 @@
+@import "../../../styles/includes";
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  margin: 30px 30px 0 30px;
+  align-content: space-between;
+  justify-content: flex-start;
+
+  .field {
+    @include upto-sm {
+      display: block;
+      padding-bottom: 10px;
+    }
+
+    label {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+    }
+
+    &.col1 {
+      max-width: 185px;
+      min-width: 185px;
+      margin-right: 14px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+    }
+
+    &.col2 {
+      align-self: flex-end;
+      margin-bottom: auto;
+      margin-top: auto;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
+  .readOnlyValue {
+    margin-bottom: 0.5rem; // the same like `label` to be aligned
+  }
+}
+

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

@@ -0,0 +1,48 @@
+/**
+ * Field to choose assigned member using autocomplete.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import styles from './AssignedMember-Field.module.scss'
+import SelectUserAutocomplete from '../../SelectUserAutocomplete'
+
+const AssignedMemberField = ({ challenge, onChange, assignedMemberDetails, readOnly }) => {
+  const value = challenge.task.memberId ? {
+    // if we know assigned member details, then show user `handle`, otherwise fallback to `userId`
+    label: assignedMemberDetails ? assignedMemberDetails.handle : `User id: ${challenge.task.memberId}`,
+    value: challenge.task.memberId
+  } : null
+
+  return (
+    <div className={styles.row}>
+      <div className={cn(styles.field, styles.col1)}>
+        <label htmlFor='assignedMember'>Assigned Member :</label>
+      </div>
+      <div className={cn(styles.field, styles.col2)}>
+        {readOnly ? (
+          value && <div className={styles.readOnlyValue}>{value.label}</div>
+        ) : (
+          <SelectUserAutocomplete
+            value={value}
+            onChange={onChange}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+AssignedMemberField.defaultProps = {
+  assignedMemberDetails: null,
+  readOnly: false
+}
+
+AssignedMemberField.propTypes = {
+  challenge: PropTypes.shape().isRequired,
+  onChange: PropTypes.func,
+  assignedMemberDetails: PropTypes.shape(),
+  readOnly: PropTypes.bool
+}
+
+export default AssignedMemberField

src/components/ChallengeEditor/ChallengeEditor.module.scss

@@ -239,14 +239,21 @@
 }
 
 .actionButtons {
-  &.button {
+  position: absolute;
+  top: 30px;
+  a {
     height: 40px;
-    position: absolute;
-    top: 30px;
-    right: 20px;
   }
 }
 
+.actionButtonsLeft {
+  left: 20px;
+}
+
+.actionButtonsRight {
+  right: 20px;
+}
+
 .buttonContainer {
   display: flex;
   margin: 0px 30px;

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

@@ -59,12 +59,13 @@ class ChallengePrizesField extends Component {
 
   renderPrizes () {
     const { currentPrizeIndex } = this.state
-    const { readOnly } = this.props
+    const { readOnly, challenge } = this.props
+    const isTask = _.get(challenge, 'task.isTask', false)
     return _.map(this.getChallengePrize().prizes, (prize, index, { length }) => (
       <div key={`${index}-${prize.amount}-edit`}>
         <div className={styles.row}>
           <div className={cn(styles.field, styles.col1)}>
-            <label htmlFor={`${index}-prize`}>Prize {index + 1} {!readOnly && (<span>*</span>)}:</label>
+            <label htmlFor={`${index}-prize`}>Prize {!isTask ? index + 1 : ''} {!readOnly && (<span>*</span>)}:</label>
           </div>
           {readOnly ? (
             <span>${prize.value}</span>
@@ -83,20 +84,23 @@ class ChallengePrizesField extends Component {
             }
           </div>)}
         </div>
-        {!readOnly && (prize.value === '' || (length > 1 && +prize.value === 0)) && <div className={styles.row}>
-          <div className={cn(styles.field, styles.col1)} />
-          <div className={cn(styles.field, styles.col2, styles.error)}>
-            {prize.value === ''
-              ? 'Prize amount is required field'
-              : 'Prize amount must be more than zero'}
+        {!readOnly && challenge.submitTriggered && (prize.value === '' || (+prize.value <= 0 || +prize.value > 1000000)) && (
+          <div className={styles.row}>
+            <div className={cn(styles.field, styles.col1)} />
+            <div className={cn(styles.field, styles.col2, styles.error)}>
+              {prize.value === ''
+                ? 'Prize amount is required field'
+                : 'Prize amount must be more than 0 and no more than 1000000'}
+            </div>
           </div>
-        </div>}
+        )}
       </div>
     ))
   }
 
   render () {
-    const { readOnly } = this.props
+    const { readOnly, challenge } = this.props
+    const isTask = _.get(challenge, 'task.isTask', false)
     return (
       <div className={styles.container}>
         <div className={styles.row}>
@@ -105,7 +109,7 @@ class ChallengePrizesField extends Component {
           </div>
         </div>
         { this.renderPrizes() }
-        {!readOnly && (<div className={styles.button} onClick={this.addNewPrize}>
+        {!readOnly && !isTask && (<div className={styles.button} onClick={this.addNewPrize}>
           <PrimaryButton text={'Add New Prize'} type={'info'} />
         </div>)}
       </div>