use uppercase zossy aliases

[alttp.git] / resources / js / components / common / ChannelSelect.js

diff --git a/resources/js/components/common/ChannelSelect.js b/resources/js/components/common/ChannelSelect.js
deleted file mode 100644 (file)
index 701f196..0000000
--- a/resources/js/components/common/ChannelSelect.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import axios from 'axios';
-import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Alert, Button, Form, ListGroup } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
-
-import Icon from './Icon';
-import debounce from '../../helpers/debounce';
-
-const ChannelSelect = ({ joinable, manageable, onChange, value }) => {
-       const [resolved, setResolved] = useState(null);
-       const [results, setResults] = useState([]);
-       const [search, setSearch] = useState('');
-       const [showResults, setShowResults] = useState(false);
-
-       const ref = 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 phrase => {
-               if (ctrl) {
-                       ctrl.abort();
-               }
-               ctrl = new AbortController();
-               try {
-                       const response = await axios.get(`/api/channels`, {
-                               params: {
-                                       joinable: joinable ? 1 : 0,
-                                       manageable: manageable ? 1 : 0,
-                                       phrase,
-                               },
-                               signal: ctrl.signal,
-                       });
-                       ctrl = null;
-                       setResults(response.data);
-               } catch (e) {
-                       ctrl = null;
-                       console.error(e);
-               }
-       }, 300), [manageable]);
-
-       useEffect(() => {
-               fetch(search);
-       }, [search]);
-
-       useEffect(() => {
-               if (value) {
-                       axios
-                               .get(`/api/channels/${value}`)
-                       .then(response => {
-                               setResolved(response.data);
-                       });
-               } else {
-                       setResolved(null);
-               }
-       }, [value]);
-
-       if (value) {
-               return <div className="d-flex align-items-center justify-content-between">
-                       <span>{resolved ? resolved.title : value}</span>
-                       <Button
-                               className="ms-2"
-                               onClick={() => onChange({ channel: null, target: { value: '' }})}
-                               title={t('button.unset')}
-                               variant="outline-danger"
-                       >
-                               <Icon.REMOVE title="" />
-                       </Button>
-               </div>;
-       }
-       return <div className={`channel-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">
-                       {results.length ?
-                               <ListGroup className="search-results">
-                                       {results.map(result =>
-                                               <ListGroup.Item
-                                                       action
-                                                       key={result.id}
-                                                       onClick={() => onChange({
-                                                               channel: result,
-                                                               target: { value: result.id },
-                                                       })}
-                                               >
-                                                       {result.title}
-                                               </ListGroup.Item>
-                                       )}
-                               </ListGroup>
-                       :
-                               <Alert className="search-results" variant="info">
-                                       {t('search.noResults')}
-                               </Alert>
-                       }
-               </div>
-       </div>;
-};
-
-ChannelSelect.propTypes = {
-       joinable: PropTypes.bool,
-       manageable: PropTypes.bool,
-       onChange: PropTypes.func,
-       value: PropTypes.oneOfType([
-               PropTypes.number,
-               PropTypes.string,
-       ]),
-};
-
-export default ChannelSelect;