requested changes in pull request

Author: SleepyZenitsu

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

@@ -4,30 +4,38 @@ 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'
+import { fetchGroups } from '../../../services/challenges'
+import { AUTOCOMPLETE_MIN_LENGTH, AUTOCOMPLETE_DEBOUNCE_TIME_MS } from '../../../config/constants'
 
 const GroupsField = ({ onUpdateMultiSelect, challenge }) => {
-  async function fetchGroups (name) {
-    if (!name) return []
-    const url = `${GROUPS_API_URL}?name=${name}`
-    return axiosInstance.get(url)
-  }
+  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(inputValue)
+    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)
+  }, [])
+
   return (
     <div className={styles.row}>
       <div className={cn(styles.field, styles.col1)}>
@@ -41,9 +49,12 @@ const GroupsField = ({ onUpdateMultiSelect, challenge }) => {
             onInputChange(inputValue, callback)
           }}
           simpleValue
-          multivalue={challenge.groups}
+          value={groups}
           placeholder='Select groups'
-          onChange={(e) => onUpdateMultiSelect(e, 'groups')}
+          onChange={(e) => {
+            onUpdateMultiSelect(e, 'groups')
+            setGroups(e)
+          }}
         />
       </div>
     </div>

src/components/ChallengeEditor/TagsField/index.js

@@ -22,7 +22,7 @@ const TagsField = ({ challengeTags, challenge, onUpdateMultiSelect, readOnly })
             isMulti
             options={challengeTags.map(mapOps)}
             simpleValue
-            multivalue={challenge.tags && challenge.tags.map(tag => ({ label: tag, value: tag }))}
+            value={challenge.tags && challenge.tags.map(tag => ({ label: tag, value: tag }))}
             onChange={(value) => onUpdateMultiSelect(value, 'tags')}
           />)}
         </div>

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

@@ -6,6 +6,17 @@ import styles from './Terms-Field.module.scss'
 
 const TermsField = ({ terms, challenge, onUpdateMultiSelect }) => {
   const mapOps = item => ({ label: item.title, value: item.id })
+
+  const [currTerms, setCurrTerms] = React.useState([])
+
+  React.useEffect(() => {
+    const challengeTerms = new Set(challenge.terms)
+    const defaultValue = terms
+      .filter(term => challengeTerms.has(term.id))
+      .map(mapOps)
+    setCurrTerms(defaultValue)
+  }, [])
+
   return (
     <div className={styles.row}>
       <div className={cn(styles.field, styles.col1)}>
@@ -18,8 +29,11 @@ const TermsField = ({ terms, challenge, onUpdateMultiSelect }) => {
           isMulti
           options={terms.map(mapOps)}
           simpleValue
-          multivalue={challenge.terms}
-          onChange={(value) => onUpdateMultiSelect(value, 'terms')}
+          value={currTerms}
+          onChange={(value) => {
+            onUpdateMultiSelect(value, 'terms')
+            setCurrTerms(setCurrTerms(terms))
+          }}
         />
       </div>
     </div>

src/components/Select/styles.js

@@ -4,8 +4,6 @@ export default {
     width: '100%'
   }),
   control: (provided, state) => {
-    console.log('state')
-    console.log(state)
     let styles = {
       ...provided,
       borderRadius: '2px !important'
@@ -46,7 +44,7 @@ export default {
     fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
     fontSize: '15px',
     fontWeight: 300,
-    paddingLeft: '20px',
+    paddingLeft: '10px',
     color: '#2a2a2a'
   }),
   input: (provided) => ({
@@ -62,6 +60,10 @@ export default {
       lineHeight: 'normal !important'
     }
   }),
+  singleValue: (provided) => ({
+    ...provided,
+    paddingLeft: '10px'
+  }),
   multiValue: (provided) => ({
     ...provided,
     backgroundColor: '#2c95d7'

src/config/constants.js

@@ -14,8 +14,7 @@ export const {
   DES_TRACK_ID,
   DS_TRACK_ID,
   QA_TRACK_ID,
-  SEGMENT_API_KEY,
-  GROUPS_API_URL
+  SEGMENT_API_KEY
 } = process.env
 export const CREATE_FORUM_TYPE_IDS = typeof process.env.CREATE_FORUM_TYPE_IDS === 'string' ? process.env.CREATE_FORUM_TYPE_IDS.split(',') : process.env.CREATE_FORUM_TYPE_IDS
 

src/services/challenges.js

@@ -56,12 +56,14 @@ export async function fetchChallengeTags () {
  * @param filters
  * @returns {Promise<*>}
  */
-export async function fetchGroups (filters) {
-  const finalFilters = {
-    ...filters,
-    perPage: GROUPS_DROPDOWN_PER_PAGE // make sure that we are retrieving all the groups
-  }
-  const response = await axiosInstance.get(`${GROUPS_API_URL}?${qs.stringify(finalFilters, { encode: false })}`)
+export async function fetchGroups (filters, params = '') {
+  const finalFilters = filters && Object.keys(filters).length > 0
+    ? {
+      ...filters,
+      perPage: GROUPS_DROPDOWN_PER_PAGE // make sure that we are retrieving all the groups
+    }
+    : {}
+  const response = await axiosInstance.get(`${GROUPS_API_URL}${params}?${qs.stringify(finalFilters, { encode: false })}`)
   return _.get(response, 'data', [])
 }