groups filter from api

Author: SleepyZenitsu

package-lock.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",

package.json

@@ -1,20 +1,47 @@
 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 { axiosInstance } from '../../../services/axiosWithAuth'
+import { AUTOCOMPLETE_MIN_LENGTH, AUTOCOMPLETE_DEBOUNCE_TIME_MS, GROUPS_API_URL } from '../../../config/constants'
+
+const GroupsField = ({ onUpdateMultiSelect, challenge }) => {
+  async function fetchGroups (name) {
+    if (!name) return []
+    console.log('url')
+    console.log(GROUPS_API_URL)
+    const url = `${GROUPS_API_URL}?name=${name}`
+    return axiosInstance.get(url)
+  }
+
+  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(inputValue)
+    const suggestions = data.map(suggestion => ({
+      label: suggestion.name,
+      value: suggestion.id
+    }))
+    callback && callback(suggestions)
+  }, AUTOCOMPLETE_DEBOUNCE_TIME_MS), [])
 
-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 }))}
+          loadOptions={(inputValue, callback) => {
+            onInputChange(inputValue, callback)
+          }}
           simpleValue
           value={challenge.groups.join(',')}
           placeholder='Select groups'
@@ -25,14 +52,9 @@ const GroupsField = ({ groups, onUpdateMultiSelect, challenge }) => {
   )
 }
 
-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/Groups-Field/index.js

@@ -1354,7 +1354,7 @@ class ChallengeEditor extends Component {
               <React.Fragment>
                 {/* remove terms field and use default term */}
                 {false && (<TermsField terms={metadata.challengeTerms} challenge={challenge} onUpdateMultiSelect={this.onUpdateMultiSelect} />)}
-                <GroupsField groups={metadata.groups} onUpdateMultiSelect={this.onUpdateMultiSelect} challenge={challenge} />
+                <GroupsField onUpdateMultiSelect={this.onUpdateMultiSelect} challenge={challenge} />
               </React.Fragment>
             )}
             {

src/components/ChallengeEditor/index.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import _ from 'lodash'
+import ReactSelect from 'react-select/async'
+import PT from 'prop-types'
+
+export default function Select (props) {
+  const { selectRef } = props
+  const customStyles = {
+    container: (provided) => ({
+      ...provided,
+      width: '100%',
+      minWidth: '150px',
+      background: 'red'
+    }),
+    control: (provided) => ({
+      ...provided,
+      borderRadius: '2px !important',
+      ':focus': {
+        border: '1px solid #2C95D7',
+        boxShadow: 'none'
+      }
+    }),
+    menu: (provided) => ({
+      ...provided,
+      boxSizing: 'border-box',
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+      fontSize: '15px',
+      fontWeight: 300,
+      lineHeight: '18px',
+      color: '#2a2a2a',
+      border: '1px solid #2C95D7',
+      zIndex: 4
+    }),
+    option: (provided) => ({
+      ...provided,
+      paddingLeft: '20px'
+    }),
+    placeholder: (provided) => ({
+      ...provided,
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+      fontSize: '15px',
+      fontWeight: 300,
+      paddingLeft: '20px',
+      color: '#2a2a2a'
+    }),
+    input: (provided) => ({
+      ...provided,
+      backgroundColor: 'transparent',
+      marginLeft: 0,
+      paddingRight: '6px',
+      paddingLeft: '10px',
+      border: 'none'
+    })
+  }
+  return (
+    <ReactSelect
+      ref={selectRef}
+      {...props}
+      autosize={false}
+      styles={customStyles}
+    />
+  )
+}
+
+Select.defaultProps = {
+  selectRef: _.noop
+}
+
+Select.propTypes = {
+  selectRef: PT.func
+}