X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fcommon%2FDiscordChannelSelect.js;fp=resources%2Fjs%2Fcomponents%2Fcommon%2FDiscordChannelSelect.js;h=400ab9f687010ab871486b552c0e89faf23217bd;hb=7caf2ef743d7eeb9adf8494b1d194998886226e8;hp=0000000000000000000000000000000000000000;hpb=ad0afcf40cb97feadc6300d2c19add8363adb341;p=alttp.git

diff --git a/resources/js/components/common/DiscordChannelSelect.js b/resources/js/components/common/DiscordChannelSelect.js
new file mode 100644
index 0000000..400ab9f
--- /dev/null
+++ b/resources/js/components/common/DiscordChannelSelect.js
@@ -0,0 +1,74 @@
+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 debounce from '../../helpers/debounce';
+import i18n from '../../i18n';
+
+const DiscordChannelSelect = ({
+	guild,
+	isInvalid,
+	name,
+	onBlur,
+	onChange,
+	types,
+	value,
+}) => {
+	const [results, setResults] = useState([]);
+
+	let ctrl = null;
+	const fetch = useCallback(debounce(async (guild, types) => {
+		if (ctrl) {
+			ctrl.abort();
+		}
+		ctrl = new AbortController();
+		try {
+			const response = await axios.get(`/api/discord-guilds/${guild}/channels`, {
+				params: {
+					types,
+				},
+				signal: ctrl.signal,
+			});
+			ctrl = null;
+			setResults(response.data);
+		} catch (e) {
+			ctrl = null;
+			console.error(e);
+		}
+		return () => {
+			if (ctrl) ctrl.abort();
+		};
+	}, 300), []);
+
+	useEffect(() => {
+		fetch(guild, types);
+	}, [guild, ...types]);
+
+	return <Form.Select
+		isInvalid={isInvalid}
+		name={name}
+		onBlur={onBlur}
+		onChange={onChange}
+		type="search"
+		value={value}
+	>
+		<option value="">{i18n.t('tournaments.discordNoCategory')}</option>
+		{results && results.length ? results.map(result =>
+			<option key={result.id} value={result.channel_id}>{result.name}</option>
+		) : null}
+	</Form.Select>;
+};
+
+DiscordChannelSelect.propTypes = {
+	guild: PropTypes.string,
+	isInvalid: PropTypes.bool,
+	name: PropTypes.string,
+	onBlur: PropTypes.func,
+	onChange: PropTypes.func,
+	types: PropTypes.arrayOf(PropTypes.number),
+	value: PropTypes.string,
+};
+
+export default withTranslation()(DiscordChannelSelect);