groups filter from api

package.json

@@ -79,7 +79,7 @@
     "react-redux": "^6.0.0",
     "react-redux-toastr": "^7.5.1",
     "react-router-dom": "^4.3.1",
-    "react-select": "^1.2.0",
+    "react-select": "^3.1.1",
     "react-stickynode": "^2.1.1",
     "react-svg": "^4.1.1",
     "react-tabs": "^3.0.0",

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

@@ -13,14 +13,12 @@ const BillingAccountField = ({ accounts, onUpdateSelect, challenge }) => {
       <div className={cn(styles.field, styles.col2)}>
         <Select
           name='billingAccount'
-          options={accounts}
-          value={challenge.billingAccount}
+          options={accounts.map(account => ({ label: account.name, value: account.name, name: account.name }))}
+          value={{ label: challenge.billingAccount, value: challenge.billingAccount }}
           placeholder='Select an existing account'
-          labelKey='name'
-          valueKey='name'
-          clearable={false}
+          isClearable={false}
           onChange={(e) => onUpdateSelect(e)}
-          disabled={false}
+          isDisabled={false}
         />
       </div>
     </div>

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

@@ -331,12 +331,10 @@ class ChallengeScheduleField extends Component {
               ) : (
                 <Select
                   name='template'
-                  options={templates}
+                  options={templates.map(template => ({ label: template.name, value: template.name, name: template.name }))}
                   placeholder='Select'
-                  labelKey='name'
-                  valueKey='name'
-                  clearable={false}
-                  value={currentTemplate}
+                  isClearable={false}
+                  value={currentTemplate && { label: currentTemplate.name, value: currentTemplate.name }}
                   onChange={(e) => resetPhase(e)}
                 />
               )}

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

@@ -1,38 +1,69 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Select from '../../Select'
+import AsyncSelect from '../../Select/AsyncSelect'
 import cn from 'classnames'
 import styles from './Groups-Field.module.scss'
+import _ from 'lodash'
+import { fetchGroups } from '../../../services/challenges'
+import { AUTOCOMPLETE_MIN_LENGTH, AUTOCOMPLETE_DEBOUNCE_TIME_MS } from '../../../config/constants'
+
+const GroupsField = ({ onUpdateMultiSelect, challenge }) => {
+  const [groups, setGroups] = React.useState([])
+
+  const onInputChange = React.useCallback(_.debounce(async (inputValue, callback) => {
+    if (!inputValue) return
+    const preparedValue = inputValue.trim()
+    if (preparedValue.length < AUTOCOMPLETE_MIN_LENGTH) {
+      return []
+    }
+    const data = await fetchGroups({ name: inputValue })
+    const suggestions = data.map(suggestion => ({
+      label: suggestion.name,
+      value: suggestion.id
+    }))
+    callback && callback(suggestions)
+  }, AUTOCOMPLETE_DEBOUNCE_TIME_MS), [])
+
+  React.useEffect(() => {
+    Promise.all(
+      challenge.groups
+        .map(group => fetchGroups({}, `/${group}`))
+    ).then(groups => {
+      setGroups(groups.map(group => ({
+        label: group.name,
+        value: group.id
+      })))
+    }).catch(console.error)
+  }, [])
 
-const GroupsField = ({ groups, onUpdateMultiSelect, challenge }) => {
   return (
     <div className={styles.row}>
       <div className={cn(styles.field, styles.col1)}>
         <label htmlFor='type'>Groups :</label>
       </div>
       <div className={cn(styles.field, styles.col2)}>
-        <Select
+        <AsyncSelect
           name='group'
-          multi
-          options={groups.map(g => ({ label: g.name, value: g.id }))}
+          isMulti
+          loadOptions={(inputValue, callback) => {
+            onInputChange(inputValue, callback)
+          }}
           simpleValue
-          value={challenge.groups.join(',')}
+          value={groups}
           placeholder='Select groups'
-          onChange={(e) => onUpdateMultiSelect(e, 'groups')}
+          onChange={(e) => {
+            onUpdateMultiSelect(e, 'groups')
+            setGroups(e)
+          }}
         />
       </div>
     </div>
   )
 }
 
-GroupsField.defaultProps = {
-  groups: []
-}
-
 GroupsField.propTypes = {
   onUpdateMultiSelect: PropTypes.func.isRequired,
-  challenge: PropTypes.shape().isRequired,
-  groups: PropTypes.arrayOf(PropTypes.shape()).isRequired
+  challenge: PropTypes.shape().isRequired
 }
 
 export default GroupsField

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

@@ -77,14 +77,12 @@ const ReviewTypeField = ({ reviewers, challenge, onUpdateOthers, onUpdateSelect
                 isInternal && (
                   <Select
                     name='reviewer'
-                    options={reviewers}
+                    options={reviewers.map(({ handle }) => ({ label: handle, value: handle }))}
                     placeholder='Select Reviewer'
-                    labelKey='handle'
-                    valueKey='handle'
-                    clearable={false}
-                    value={challenge.reviewer}
-                    onChange={(e) => onUpdateSelect(e.handle, false, 'reviewer')}
-                    disabled={false}
+                    value={{ label: challenge.reviewer, value: challenge.reviewer }}
+                    isClearable={false}
+                    onChange={(e) => onUpdateSelect(e.value, false, 'reviewer')}
+                    isDisabled={false}
                   />
                 )
               }

src/components/ChallengeEditor/TagsField/index.js

@@ -19,10 +19,10 @@ const TagsField = ({ challengeTags, challenge, onUpdateMultiSelect, readOnly })
             <span>{existingTags}</span>
           ) : (<Select
             id='track-select'
-            multi
+            isMulti
             options={challengeTags.map(mapOps)}
             simpleValue
-            value={existingTags}
+            value={challenge.tags && challenge.tags.map(tag => ({ label: tag, value: tag }))}
             onChange={(value) => onUpdateMultiSelect(value, 'tags')}
           />)}
         </div>