X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fcommon%2FUserSelect.js;h=32bd186f3e82ecc10c9c84b96ab59cee25f0b4fd;hb=HEAD;hp=03aa097b42c5f7ad22c4c09a0f1f1071bd51f2a5;hpb=5f5cd2dfa083936ddd293dbcb4925035ffca9990;p=alttp.git

diff --git a/resources/js/components/common/UserSelect.js b/resources/js/components/common/UserSelect.js
deleted file mode 100644
index 03aa097..0000000
--- a/resources/js/components/common/UserSelect.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import axios from 'axios';
-import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Form, ListGroup } from 'react-bootstrap';
-
-import Icon from '../common/Icon';
-import UserBox from '../users/Box';
-import debounce from '../../helpers/debounce';
-
-const UserSelect = ({ name, onChange, value }) => {
-	const [resolved, setResolved] = useState(null);
-	const [results, setResults] = useState([]);
-	const [search, setSearch] = useState('');
-	const [showResults, setShowResults] = useState(false);
-
-	const ref = useRef(null);
-
-	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 phrase => {
-		if (ctrl) {
-			ctrl.abort();
-		}
-		ctrl = new AbortController();
-		if (!phrase || phrase.length < 3) {
-			setResults([]);
-			return;
-		}
-		try {
-			const response = await axios.get(`/api/users`, {
-				params: {
-					phrase,
-				},
-				signal: ctrl.signal,
-			});
-			ctrl = null;
-			setResults(response.data);
-		} catch (e) {
-			ctrl = null;
-			console.error(e);
-		}
-	}, 300), []);
-
-	useEffect(() => {
-		fetch(search);
-	}, [search]);
-
-	useEffect(() => {
-		if (value) {
-			axios
-				.get(`/api/users/${value}`)
-			.then(response => {
-				setResolved(response.data);
-			});
-		} else {
-			setResolved(null);
-		}
-	}, [value]);
-
-	if (value) {
-		return <div className="d-flex justify-content-between">
-			{resolved ? <UserBox discriminator noLink user={resolved} /> : <span>value</span>}
-			<Button
-				onClick={() => onChange({ target: { name, value: null }})}
-				size="sm"
-				variant="outline-danger"
-			>
-				<Icon.REMOVE />
-			</Button>
-		</div>;
-	}
-	return <div className={`user-select ${showResults ? 'expanded' : 'collapsed'}`} ref={ref}>
-		<Form.Control
-			className="search-input"
-			name={Math.random().toString(20).substr(2, 10)}
-			onChange={e => setSearch(e.target.value)}
-			onFocus={() => setShowResults(true)}
-			type="search"
-			value={search}
-		/>
-		<div className="search-results-holder">
-			<ListGroup className="search-results">
-				{results.map(result =>
-					<ListGroup.Item
-						action
-						key={result.id}
-						onClick={() => onChange({
-							target: { name, value: result.id },
-						})}
-					>
-						<UserBox discriminator noLink user={result} />
-					</ListGroup.Item>
-				)}
-			</ListGroup>
-		</div>
-	</div>;
-};
-
-UserSelect.propTypes = {
-	name: PropTypes.string,
-	onChange: PropTypes.func,
-	value: PropTypes.string,
-};
-
-export default UserSelect;