96 lines
2.6 KiB
JavaScript
96 lines
2.6 KiB
JavaScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
import { handleResponse, ErrorMessage } from './elements';
|
|
|
|
import selectedTheme from './themeManager';
|
|
|
|
const SearchInput = styled.input`
|
|
width: 100%;
|
|
font-size: 16px;
|
|
border: none;
|
|
border-bottom: 1px solid ${selectedTheme.accentColor};
|
|
background: none;
|
|
border-radius: 0;
|
|
color: ${selectedTheme.mainColor};
|
|
`;
|
|
|
|
const useSearchProviders = () => {
|
|
const [searchProviders, setSearchProviders] = useState({
|
|
providers: [],
|
|
error: false
|
|
});
|
|
|
|
const fetchSearchProviders = useCallback(() => {
|
|
(process.env.NODE_ENV === 'production'
|
|
? fetch('/search.json').then(handleResponse)
|
|
: import('./data/search.json')
|
|
)
|
|
.then(jsonResponse => {
|
|
setSearchProviders({ ...jsonResponse, error: false });
|
|
})
|
|
.catch(error => {
|
|
setSearchProviders({ providers: [], error: error.message });
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchSearchProviders();
|
|
}, [fetchSearchProviders]);
|
|
return { searchProviders, fetchSearchProviders };
|
|
};
|
|
|
|
const SearchBar = () => {
|
|
const {
|
|
searchProviders: { providers, error },
|
|
fetchSearchProviders
|
|
} = useSearchProviders();
|
|
|
|
let [input, setInput] = useState();
|
|
|
|
const handleSearchQuery = e => {
|
|
var query = input;
|
|
|
|
console.log(query);
|
|
|
|
if (query.split(' ')[0].includes('/')) {
|
|
handleQueryWithProvider(query);
|
|
} else {
|
|
//window.location = 'https://google.com/search?q=' + query;
|
|
}
|
|
|
|
e.preventDefault();
|
|
};
|
|
|
|
const handleQueryWithProvider = query => {
|
|
let queryArray = query.split(' ');
|
|
let prefix = queryArray[0];
|
|
queryArray.shift();
|
|
|
|
let searchQuery = queryArray.join(' ');
|
|
|
|
let providerFound = false;
|
|
providers.forEach(provider => {
|
|
if (provider.prefix === prefix) {
|
|
providerFound = true;
|
|
window.location = provider.url + searchQuery;
|
|
}
|
|
});
|
|
|
|
if (!providerFound)
|
|
window.location = 'https://google.com/search?q=' + query;
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={e => handleSearchQuery(e)}>
|
|
{error && <ErrorMessage>{error}</ErrorMessage>}
|
|
<SearchInput
|
|
type="text"
|
|
onChange={e => setInput(e.target.value)}
|
|
></SearchInput>
|
|
<button type="submit" hidden />
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default SearchBar;
|