1 import axios from 'axios';
2 import PropTypes from 'prop-types';
3 import React, { useCallback, useEffect, useRef, useState } from 'react';
4 import { Form, ListGroup } from 'react-bootstrap';
6 import GuildBox from '../discord-guilds/Box';
7 import debounce from '../../helpers/debounce';
9 const DiscordSelect = ({ onChange, value }) => {
10 const [resolved, setResolved] = useState(null);
11 const [results, setResults] = useState([]);
12 const [search, setSearch] = useState('');
13 const [showResults, setShowResults] = useState(false);
15 const ref = useRef(null);
18 const handleEventOutside = e => {
19 if (ref.current && !ref.current.contains(e.target)) {
20 setShowResults(false);
23 document.addEventListener('click', handleEventOutside, true);
24 document.addEventListener('focus', handleEventOutside, true);
26 document.removeEventListener('click', handleEventOutside, true);
27 document.removeEventListener('focus', handleEventOutside, true);
32 const fetch = useCallback(debounce(async phrase => {
36 ctrl = new AbortController();
38 const response = await axios.get(`/api/discord-guilds`, {
45 setResults(response.data);
59 .get(`/api/discord-guilds/${value}`)
61 setResolved(response.data);
69 return <div>{resolved ? <GuildBox guild={resolved} /> : value}</div>;
71 return <div className={`discord-select ${showResults ? 'expanded' : 'collapsed'}`} ref={ref}>
73 className="search-input"
74 name={Math.random().toString(20).substr(2, 10)}
75 onChange={e => setSearch(e.target.value)}
76 onFocus={() => setShowResults(true)}
80 <div className="search-results-holder">
81 <ListGroup className="search-results">
82 {results.map(result =>
86 onClick={() => onChange({ target: { value: result.guild_id }})}
88 <GuildBox guild={result} />
96 DiscordSelect.propTypes = {
97 onChange: PropTypes.func,
98 value: PropTypes.string,
101 export default DiscordSelect;