Moving latest to prod

package.json

@@ -83,6 +83,7 @@
     "react-tabs": "^3.0.0",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
+    "redux-promise-middleware": "4.2.1",
     "redux-thunk": "^2.3.0",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",

src/actions/challenges.js

@@ -15,7 +15,9 @@ import {
   fetchChallengeTracks,
   updateChallenge,
   patchChallenge,
-  createChallenge as createChallengeAPI
+  createChallenge as createChallengeAPI,
+  createResource as createResourceAPI,
+  deleteResource as deleteResourceAPI
 } from '../services/challenges'
 import {
   LOAD_CHALLENGE_DETAILS_PENDING,
@@ -32,6 +34,8 @@ import {
   LOAD_CHALLENGE_RESOURCES_PENDING,
   LOAD_CHALLENGE_RESOURCES_SUCCESS,
   LOAD_CHALLENGE_RESOURCES_FAILURE,
+  CREATE_CHALLENGE_RESOURCE,
+  DELETE_CHALLENGE_RESOURCE,
   REMOVE_ATTACHMENT,
   PAGE_SIZE,
   UPDATE_CHALLENGE_DETAILS_PENDING,
@@ -452,3 +456,51 @@ export function loadResourceRoles () {
     })
   }
 }
+
+export function deleteResource (challengeId, roleId, memberHandle) {
+  const resource = {
+    challengeId,
+    roleId,
+    memberHandle
+  }
+  return (dispatch, getState) => {
+    return dispatch({
+      type: DELETE_CHALLENGE_RESOURCE,
+      payload: deleteResourceAPI(resource)
+    })
+  }
+}
+
+export function createResource (challengeId, roleId, memberHandle) {
+  const resource = {
+    challengeId,
+    roleId,
+    memberHandle
+  }
+  return (dispatch, getState) => {
+    return dispatch({
+      type: CREATE_CHALLENGE_RESOURCE,
+      payload: createResourceAPI(resource)
+    })
+  }
+}
+
+export function replaceResourceInRole (challengeId, roleId, newMember, oldMember) {
+  return async (dispatch) => {
+    if (newMember === oldMember) {
+      return
+    }
+    if (oldMember) {
+      try {
+        await dispatch(deleteResource(challengeId, roleId, oldMember))
+      } catch (error) {
+        const errorMessage = _.get(error, 'response.data.message')
+        // ignore error where the resource does not exist already
+        if (errorMessage.indexOf('doesn\'t have resource with roleId') === -1) {
+          return Promise.reject(new Error('Unable to delete resource'))
+        }
+      }
+    }
+    await dispatch(createResource(challengeId, roleId, newMember))
+  }
+}

src/components/Buttons/PrimaryButton/PrimaryButton.module.scss

@@ -20,13 +20,28 @@
 
   &.danger {
     background-color: $tc-red;
+
+    &:disabled {
+      cursor: default;
+      background-color: $inactive;
+    }
   }
 
   &.info {
     background-color: $tc-blue-20;
+
+    &:disabled {
+      cursor: default;
+      background-color: $inactive;
+    }
   }
 
   &.success {
     background-color: $tc-green-40;
+
+    &:disabled {
+      cursor: default;
+      background-color: $inactive;
+    }
   }
 }

src/components/Buttons/PrimaryButton/index.js

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

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

@@ -8,12 +8,11 @@ import styles from './AssignedMember-Field.module.scss'
 import SelectUserAutocomplete from '../../SelectUserAutocomplete'
 
 const AssignedMemberField = ({ challenge, onChange, assignedMemberDetails, readOnly }) => {
-  const value = challenge.task.memberId ? {
+  const value = assignedMemberDetails ? {
     // 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
+    label: assignedMemberDetails.handle,
+    value: assignedMemberDetails.userId + ''
   } : null
-
   return (
     <div className={styles.row}>
       <div className={cn(styles.field, styles.col1)}>

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

@@ -47,104 +47,55 @@
     }
   }
 
-  .tcCheckbox {
-    @include tc-checkbox;
-
-    .tc-checkbox-label {
-      @include roboto-light();
-
-      line-height: 17px;
-      font-weight: 300;
-      margin-left: 21px;
-      user-select: none;
-      cursor: pointer;
-      width: 195px;
-      font-size: 14px;
-      color: #3d3d3d;
-    }
-
-    height: 18px;
-    width: 210px;
+  .fileTypeList {
     margin: 0;
     padding: 0;
-    vertical-align: bottom;
-    position: relative;
-    display: inline-block;
-    margin-bottom: 18px;
-
-    input[type='checkbox'] {
-      display: none;
-
-      &:checked ~ label {
-        background: $tc-blue-20;
-      }
-
-      &:checked + label::after {
-        border-color: $white;
-      }
-    }
-
-    label {
-      @include roboto-light();
-
-      line-height: 17px;
-      font-weight: 300;
-      cursor: pointer;
-      position: absolute;
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      top: 0;
-      left: 0;
-      border: none;
-      box-shadow: none;
-      background: $tc-gray-30;
-      transition: all 0.15s ease-in-out;
-
-      &.readOnly {
-        cursor: auto;
-      }
+  }
 
-      &::after {
-        opacity: 0;
-        content: '';
-        position: absolute;
-        width: 9px;
-        height: 5px;
-        background: transparent;
-        top: 2px;
-        left: 2px;
-        border-top: none;
-        border-right: none;
-        transform: rotate(-45deg);
-        transition: all 0.15s ease-in-out;
-      }
+  .fileTypeListEditable {
 
-      &:hover::after {
-        opacity: 0.3;
-      }
-      &:hover:read-only::after {
-        opacity: 0;
-      }
+  }
 
-      div {
-        margin-left: 24px;
-        width: 500px;
-      }
-    }
+  .fileTypeItem {
+    background-color: #2C95D7;
+    border-radius: 2px;
+    border: 1px solid #c9e6f2;
+    color: #ffffff;
+    display: inline-block;
+    font-size: 14px;
+    margin-right: 5px;
+    padding: 2px 30px 2px 5px;
+    position: relative;
+    vertical-align: top;
   }
 
-  .checkList {
+  .fileTypeDelete {
+    align-items: center;
+    background-color: #c6def1;
+    border: 0;
+    color: #2C95D7;
+    cursor: pointer;
     display: flex;
-    flex-direction: column;
-    margin-left: 30px;
+    border-radius: 50%;
+    font-size: 14px;
+    height: 16px;
+    justify-content: center;
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+
+    &:hover {
+      background-color: #fff;
+    }
   }
 
   form {
     display: flex;
     flex-direction: row;
   }
-  
+
   .button {
     width: 137px;
     height: 40px;

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

@@ -17,12 +17,12 @@ class FinalDeliverablesField extends Component {
   }
 
   onChangeInput (value) {
-    this.setState({ newFileType: _.trim(value) })
+    this.setState({ newFileType: value })
   }
 
   onAddFileType (event) {
     if (!_.isEmpty(this.state.newFileType)) {
-      this.props.addFileType(this.state.newFileType)
+      this.props.addFileType(this.state.newFileType.trim())
       this.setState({ newFileType: '' })
     }
 
@@ -31,7 +31,11 @@ class FinalDeliverablesField extends Component {
   }
 
   render () {
-    const { challenge, onUpdateCheckbox, readOnly } = this.props
+    const { challenge, readOnly, removeFileType } = this.props
+    const fileTypesMetadata = _.find(challenge.metadata, { name: 'fileTypes' })
+    const fileTypes = (fileTypesMetadata && JSON.parse(fileTypesMetadata.value)) || []
+    const isDuplicateValue = _.includes(fileTypes, this.state.newFileType.trim())
+
     return (
       <React.Fragment>
         <div className={styles.row}>
@@ -40,27 +44,18 @@ class FinalDeliverablesField extends Component {
           </div>
         </div>
         <div className={styles.row}>
-          <div className={styles.checkList}>
-            {
-              _.map(challenge.fileTypes, (type, index) => (
-                <div className={styles.tcCheckbox} key={type.name}>
-                  <input
-                    name={type.name}
-                    type='checkbox'
-                    id={type.name}
-                    checked={type.check}
-                    onChange={(e) => onUpdateCheckbox(type.name, e.target.checked, 'fileTypes', index)}
-                    readOnly={readOnly}
-                  />
-                  <label htmlFor={type.name} className={cn({ [styles.readOnly]: readOnly })}>
-                    <div className={styles.checkboxLabel}>
-                      {type.name}
-                    </div>
-                  </label>
-                </div>
-              ))
-            }
-          </div>
+          {!readOnly ? (
+            <ul className={styles.fileTypeList}>
+              {_.map(fileTypes, (type) => (
+                <li key={type} htmlFor={type} className={styles.fileTypeItem}>
+                  {type}
+                  <button className={styles.fileTypeDelete} type='button' onClick={() => removeFileType(type)}>×</button>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            fileTypes.join(', ')
+          )}
         </div>
         {!readOnly && (<div className={styles.row}>
           <form name='add-file-type-form' autoComplete='off' onSubmit={this.onAddFileType}>
@@ -76,6 +71,7 @@ class FinalDeliverablesField extends Component {
               <PrimaryButton
                 text={'Add File Type'}
                 type={'info'}
+                disabled={!this.state.newFileType.trim() || isDuplicateValue}
                 submit
               />
             </div>
@@ -93,8 +89,8 @@ FinalDeliverablesField.defaultProps = {
 
 FinalDeliverablesField.propTypes = {
   challenge: PropTypes.shape().isRequired,
-  onUpdateCheckbox: PropTypes.func.isRequired,
   addFileType: PropTypes.func.isRequired,
+  removeFileType: PropTypes.func.isRequired,
   readOnly: PropTypes.bool
 }