X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=inline;f=resources%2Fjs%2Fcomponents%2Fcommon%2FDiscordChannelSelect.js;h=fd5fe8d1c35a3c97a098f98628711831b20c8fa3;hb=e49b130505f5712075dca2ff990e5a63fc90ce3c;hp=400ab9f687010ab871486b552c0e89faf23217bd;hpb=7caf2ef743d7eeb9adf8494b1d194998886226e8;p=alttp.git diff --git a/resources/js/components/common/DiscordChannelSelect.js b/resources/js/components/common/DiscordChannelSelect.js index 400ab9f..fd5fe8d 100644 --- a/resources/js/components/common/DiscordChannelSelect.js +++ b/resources/js/components/common/DiscordChannelSelect.js @@ -1,11 +1,12 @@ import axios from 'axios'; import PropTypes from 'prop-types'; import React, { useCallback, useEffect, useState } from 'react'; -import { Form } from 'react-bootstrap'; -import { withTranslation } from 'react-i18next'; +import { Alert, Button, Form, ListGroup } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; +import Icon from './Icon'; +import ChannelBox from '../discord-guilds/ChannelBox'; import debounce from '../../helpers/debounce'; -import i18n from '../../i18n'; const DiscordChannelSelect = ({ guild, @@ -16,10 +17,30 @@ const DiscordChannelSelect = ({ types, value, }) => { + const [resolved, setResolved] = useState(null); const [results, setResults] = useState([]); + const [search, setSearch] = useState(''); + const [showResults, setShowResults] = useState(false); + + const ref = React.useRef(null); + const { t } = useTranslation(); + + useEffect(() => { + const handleEventOutside = e => { + if (ref.current && !ref.current.contains(e.target)) { + setShowResults(false); + } + }; + document.addEventListener('click', handleEventOutside, true); + document.addEventListener('focus', handleEventOutside, true); + return () => { + document.removeEventListener('click', handleEventOutside, true); + document.removeEventListener('focus', handleEventOutside, true); + }; + }, []); let ctrl = null; - const fetch = useCallback(debounce(async (guild, types) => { + const fetch = useCallback(debounce(async (guild, phrase, types) => { if (ctrl) { ctrl.abort(); } @@ -27,6 +48,7 @@ const DiscordChannelSelect = ({ try { const response = await axios.get(`/api/discord-guilds/${guild}/channels`, { params: { + phrase, types, }, signal: ctrl.signal, @@ -43,22 +65,66 @@ const DiscordChannelSelect = ({ }, 300), []); useEffect(() => { - fetch(guild, types); - }, [guild, ...types]); + fetch(guild, search, types); + }, [guild, search, ...types]); + + useEffect(() => { + if (value) { + axios + .get(`/api/discord-channels/${value}`) + .then(response => { + setResolved(response.data); + }); + } else { + setResolved(null); + } + }, [value]); - return