diff --git a/src/components/ProjectForm/GroupsFormField/index.js b/src/components/ProjectForm/GroupsFormField/index.js new file mode 100644 index 00000000..5106b2dd --- /dev/null +++ b/src/components/ProjectForm/GroupsFormField/index.js @@ -0,0 +1,74 @@ +import React, { useCallback } from 'react' +import { debounce, map } from 'lodash' +import PropTypes from 'prop-types' +import Select from '../../Select' +import { fetchGroups as fetchGroupsApi } from '../../../services/challenges' +import { AUTOCOMPLETE_DEBOUNCE_TIME_MS } from '../../../config/constants' +import { useMapSelectedGroups } from './use-map-selected-groups.hook' + +/** + * Search & fetch groups from api, filtering by group name + */ +const fetchGroups = debounce((inputValue, callback) => { + fetchGroupsApi({ name: inputValue }) + .then(groups => { + const suggestedOptions = groups.map(group => ({ + label: group.name, + value: group.id + })) + return callback(suggestedOptions) + }) + .catch(() => { + return callback(null) + }) +}, AUTOCOMPLETE_DEBOUNCE_TIME_MS) + +/** + * Component to handle project groups + */ +const GroupsFormField = ({ value, name, onBlur, onChange, id, placeholder, ref }) => { + const selectedGroups = useMapSelectedGroups(value) + + const handleChange = useCallback((values) => { + onChange({ target: { name, value: map(values, 'value') } }) + }, []) + + return ( + +
+
+ +
+
+ + +
+
+
+
+ +
+
+ ( + + )} + /> +
+