447 lines
13 KiB
TypeScript
447 lines
13 KiB
TypeScript
import { Group, type OptionsFilter, Overlay, Select, Stack, Text } from '@mantine/core';
|
|
import { useDisclosure } from '@mantine/hooks';
|
|
import { HelpModal, WeatherModal } from 'components';
|
|
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import * as fa6 from 'react-icons/fa6';
|
|
import * as si from 'react-icons/si';
|
|
import * as vsc from 'react-icons/vsc';
|
|
import { selectClasses } from 'styles';
|
|
import type {
|
|
Application,
|
|
CurrentWeather,
|
|
ExtendedForecast,
|
|
Provider,
|
|
SearchHistoryItem,
|
|
} from 'types';
|
|
import SearchSelectItem from './SearchSelectItem';
|
|
|
|
export default function Search({
|
|
current,
|
|
extendedForecast,
|
|
weatherModalOpened,
|
|
closeWeatherModal,
|
|
openWeatherModal,
|
|
}: {
|
|
current: CurrentWeather;
|
|
extendedForecast: ExtendedForecast[];
|
|
weatherModalOpened: boolean;
|
|
closeWeatherModal: () => void;
|
|
openWeatherModal: () => void;
|
|
}) {
|
|
const allIcons: any = { ...fa6, ...vsc, ...si };
|
|
const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
|
|
endpoint: 'api/providers',
|
|
});
|
|
const [providers, setProviders] = useState<Provider[]>([]);
|
|
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
|
|
endpoint: 'api/enabledApplications',
|
|
});
|
|
const [applications, setApplications] = useState<Application[]>([]);
|
|
const searchEndpoint = 'api/searchHistory';
|
|
const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
|
|
endpoint: searchEndpoint,
|
|
});
|
|
const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
|
|
const [filteredHistory, setFilteredHistory] = useState<SearchHistoryItem[]>([]);
|
|
const { mutateAsync } = useMutationAPI();
|
|
const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
|
|
useDisclosure(false);
|
|
const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure();
|
|
const [listIndex, setListIndex] = useState(0);
|
|
const {
|
|
isMobile,
|
|
urlPattern,
|
|
providerLabel,
|
|
setProviderLabel,
|
|
providerURL,
|
|
setProviderURL,
|
|
providerPrefix,
|
|
setProviderPrefix,
|
|
searchValue,
|
|
setSearchValue,
|
|
} = useCommonHooks();
|
|
const [placeholderValue, setPlaceholderValue] = useState<string>('');
|
|
const [value, setValue] = useState(0);
|
|
|
|
const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
|
|
const url =
|
|
providerData.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
|
|
'https://www.google.com/search?q=';
|
|
open(`${url}${option.searchTerm}`, '_self');
|
|
};
|
|
|
|
const handleAppLaunchItem = ({ option }: { option: any }) => {
|
|
const validUrl =
|
|
option.url.startsWith('http://') || option.url.startsWith('https://')
|
|
? option.url
|
|
: `http://${option.url}`;
|
|
open(validUrl, '_self');
|
|
};
|
|
|
|
const handleKeyPress = (item: any) => {
|
|
let option = '';
|
|
let subtext = '';
|
|
if (item.target.value.startsWith('/')) {
|
|
option =
|
|
item.target.value.substr(1, item.target.value.indexOf(' ') - 1) ??
|
|
item.target.value.substr(1);
|
|
subtext = item.target.value.substr(2 + option.length);
|
|
} else if (item.target.value.startsWith('!')) {
|
|
if (item.target.value.startsWith('!w')) {
|
|
subtext = item.target.value.substr(2);
|
|
}
|
|
} else {
|
|
subtext = item.target.value;
|
|
}
|
|
if (item.key === 'Enter') {
|
|
if (providerLabel === 'Show help') {
|
|
openProviderModal();
|
|
} else if (item.target.value.startsWith('/')) {
|
|
mutateAsync({
|
|
method: 'POST',
|
|
endpoint: searchEndpoint,
|
|
body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
|
|
}).then(() => {
|
|
open(`${providerURL}${subtext}`, '_self');
|
|
});
|
|
} else if (providerLabel === 'Show weather') {
|
|
openWeatherModal();
|
|
} else if (providerLabel.startsWith('Launch')) {
|
|
const url = applications.find(
|
|
(app: Application) =>
|
|
app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
|
|
)?.url;
|
|
const validUrl =
|
|
url?.startsWith('http://') || url?.startsWith('https://')
|
|
? url
|
|
: `http://${url}`;
|
|
open(validUrl, '_self');
|
|
} else if (urlPattern.test(item.target.value)) {
|
|
if (/^(https?:\/\/).*/i.test(item.target.value))
|
|
window.location = item.target.value;
|
|
else open(`https://${item.target.value}`, '_self');
|
|
} else {
|
|
mutateAsync({
|
|
method: 'POST',
|
|
endpoint: searchEndpoint,
|
|
body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
|
|
}).then(() => {
|
|
open(`${providerURL}${subtext}`, '_self');
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleKeyUp = (item: any) => {
|
|
if (item.code === 'Escape') {
|
|
setListIndex(0);
|
|
setSearchValue('');
|
|
setProviderLabel('Google Search');
|
|
setProviderPrefix('/g');
|
|
setPlaceholderValue('');
|
|
if (dropdownOpened) {
|
|
closeDropdown();
|
|
}
|
|
}
|
|
if (item.code === 'ArrowDown' && !dropdownOpened) {
|
|
setListIndex(0);
|
|
openDropdown();
|
|
setPlaceholderValue(
|
|
searchHistory.length > 0
|
|
? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
|
|
: '',
|
|
);
|
|
}
|
|
if (!providerLabel.startsWith('Invalid')) {
|
|
handleKeyPress(item);
|
|
}
|
|
if (dropdownOpened) {
|
|
if (searchValue === '') {
|
|
if (item.code === 'ArrowUp') {
|
|
if (listIndex === 0) {
|
|
setListIndex(9);
|
|
} else {
|
|
setListIndex(listIndex - 1);
|
|
}
|
|
} else if (item.code === 'ArrowDown') {
|
|
if (listIndex === 9) {
|
|
setListIndex(0);
|
|
} else {
|
|
setListIndex(listIndex + 1);
|
|
}
|
|
} else if (item.code === 'ArrowRight' || item.code === 'Tab') {
|
|
setSearchValue(
|
|
searchHistory.length > 0
|
|
? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
|
|
: '',
|
|
);
|
|
setValue(searchHistory[listIndex].id ?? 0);
|
|
}
|
|
} else if (searchValue !== '') {
|
|
if (item.code === 'ArrowUp') {
|
|
if (listIndex === 0) {
|
|
setListIndex(filteredHistory.length - 1);
|
|
} else if (listIndex >= filteredHistory.length) {
|
|
setListIndex(filteredHistory.length - 1);
|
|
} else {
|
|
setListIndex(listIndex - 1);
|
|
}
|
|
} else if (item.code === 'ArrowDown') {
|
|
if (listIndex >= filteredHistory.length - 1) {
|
|
setListIndex(0);
|
|
} else if (value === 0) {
|
|
setListIndex(0);
|
|
setValue(-1);
|
|
} else {
|
|
setListIndex(listIndex + 1);
|
|
}
|
|
} else if (item.code === 'ArrowRight' || item.code === 'Tab') {
|
|
setSearchValue(
|
|
`${filteredHistory[listIndex].prefix} ${filteredHistory[listIndex].searchTerm}`,
|
|
);
|
|
setValue(filteredHistory[listIndex].id ?? 0);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const onInput = (item: any) => {
|
|
openDropdown();
|
|
setSearchValue(item.currentTarget.value);
|
|
if (
|
|
item.target.value === '/?' ||
|
|
item.target.value === '!help' ||
|
|
item.target.value === '/help' ||
|
|
item.target.value === '!h' ||
|
|
item.target.value === '/h'
|
|
) {
|
|
setProviderLabel('Show help');
|
|
} else if (item.target.value.startsWith('/g')) {
|
|
setProviderLabel('Google Search');
|
|
setProviderURL('https://www.google.com/search?q=');
|
|
setProviderPrefix('/g');
|
|
} else if (item.target.value.startsWith('/')) {
|
|
const provider = providers?.find(
|
|
(p: Provider) => p.prefix === item.target.value.split(' ')[0],
|
|
);
|
|
setProviderLabel(provider?.name ?? 'Invalid Search');
|
|
setProviderURL(provider?.url ?? '');
|
|
setProviderPrefix(provider?.prefix ?? '');
|
|
} else if (item.target.value.startsWith('!')) {
|
|
if (item.target.value === '!w' || item.target.value === '!weather') {
|
|
setProviderLabel('Show weather');
|
|
} else if (
|
|
applications?.find(
|
|
(app: Application) =>
|
|
app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
|
|
)
|
|
) {
|
|
setProviderLabel(`Launch ${item.target.value.substr(1)}`);
|
|
} else {
|
|
setProviderLabel('Invalid function');
|
|
}
|
|
} else {
|
|
setProviderLabel('Google Search');
|
|
setProviderURL('https://www.google.com/search?q=');
|
|
setProviderPrefix('/g');
|
|
}
|
|
};
|
|
|
|
const optionsFilter: OptionsFilter = ({ options, search }) => {
|
|
const splittedSearch = search.toLowerCase().trim().split(' ');
|
|
if (splittedSearch[0].startsWith('!')) {
|
|
return applicationData
|
|
.filter((app: Application) =>
|
|
app.name.toLowerCase().includes(splittedSearch[0].substring(1).toLowerCase()),
|
|
)
|
|
.map((app: Application) => {
|
|
return {
|
|
label: app.name,
|
|
value: app.baseUrl,
|
|
...app,
|
|
};
|
|
});
|
|
}
|
|
return options
|
|
.filter((option: any) => {
|
|
return splittedSearch.every((searchWord) =>
|
|
option.value
|
|
.toLowerCase()
|
|
.trim()
|
|
.split(' ')
|
|
.some((word: string) => word.includes(searchWord)),
|
|
);
|
|
})
|
|
.slice(0, 10);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (providerData && providerDataIsFetched) {
|
|
setProviders(providerData);
|
|
}
|
|
}, [providerData, providerDataIsFetched]);
|
|
|
|
useEffect(() => {
|
|
if (applicationData && !isApplicationDataFetching) {
|
|
setApplications(applicationData);
|
|
}
|
|
}, [applicationData, isApplicationDataFetching]);
|
|
|
|
useEffect(() => {
|
|
if (historyData && historyDataIsFetched) {
|
|
setSearchHistory(historyData);
|
|
if (filteredHistory.length === 0) {
|
|
setFilteredHistory(historyData.slice(0, 10));
|
|
}
|
|
}
|
|
}, [historyData, historyDataIsFetched]);
|
|
|
|
useEffect(() => {
|
|
if (dropdownOpened && listIndex >= 0) {
|
|
setPlaceholderValue(
|
|
searchHistory.length > 0
|
|
? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
|
|
: '',
|
|
);
|
|
}
|
|
}, [listIndex, dropdownOpened]);
|
|
|
|
useEffect(() => {
|
|
const splittedSearch = searchValue.toLowerCase().trim().split(' ');
|
|
const filtered = searchHistory
|
|
.filter((item: SearchHistoryItem) => {
|
|
const option = `${item.prefix} ${item.searchTerm}`;
|
|
const words = option.toLowerCase().trim().split(' ');
|
|
return splittedSearch.every((searchWord) =>
|
|
words.some((word: string) => word.includes(searchWord)),
|
|
);
|
|
})
|
|
.slice(0, 10);
|
|
setFilteredHistory(filtered);
|
|
}, [searchValue]);
|
|
|
|
return (
|
|
<>
|
|
{dropdownOpened && <Overlay pos={'absolute'} h={'100%'} w={'100%'} blur={5} />}
|
|
<Stack
|
|
style={{
|
|
height: '100px',
|
|
backgroundColor: 'transparent',
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
padding: '.3rem',
|
|
display: 'inline-block',
|
|
gap: 0,
|
|
}}
|
|
>
|
|
<Select
|
|
classNames={selectClasses}
|
|
data={searchHistory.map((item: SearchHistoryItem) => ({
|
|
label: `${item.provider}`,
|
|
value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
|
|
...item,
|
|
}))}
|
|
filter={optionsFilter}
|
|
value={searchValue}
|
|
searchValue={searchValue}
|
|
placeholder={placeholderValue}
|
|
nothingFoundMessage={
|
|
<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
|
|
}
|
|
data-active={placeholderValue !== ''}
|
|
dropdownOpened={dropdownOpened}
|
|
comboboxProps={{
|
|
transitionProps: { transition: 'fade', duration: 200 },
|
|
}}
|
|
styles={{
|
|
wrapper: {
|
|
zIndex: 1000,
|
|
},
|
|
}}
|
|
spellCheck={true}
|
|
searchable
|
|
autoFocus={!isMobile}
|
|
leftSection={providerLabel}
|
|
rightSection={<div />}
|
|
renderOption={(item: any) => {
|
|
const Icon = allIcons[item.option.icon];
|
|
return !searchValue.startsWith('!') ? (
|
|
<SearchSelectItem
|
|
item={item}
|
|
handleSearchHistoryItem={handleSearchHistoryItem}
|
|
searchEndpoint={searchEndpoint}
|
|
/>
|
|
) : (
|
|
<Group
|
|
pos={'relative'}
|
|
m={0}
|
|
p={0}
|
|
gap={0}
|
|
justify='center'
|
|
w={'100%'}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleAppLaunchItem(item);
|
|
}}
|
|
>
|
|
<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
|
|
Launch
|
|
</Text>
|
|
{Icon && (
|
|
<Icon
|
|
style={{
|
|
color: 'var(--mantine-color-primary-0)',
|
|
height: '2rem',
|
|
width: '2rem',
|
|
}}
|
|
/>
|
|
)}
|
|
<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
|
|
{item.option.name}
|
|
</Text>
|
|
</Group>
|
|
);
|
|
}}
|
|
onBlur={() => {
|
|
setPlaceholderValue('');
|
|
setListIndex(0);
|
|
closeDropdown();
|
|
}}
|
|
onFocus={() => {
|
|
if (searchValue !== '') {
|
|
openDropdown();
|
|
}
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
onInput={onInput}
|
|
onKeyUp={handleKeyUp}
|
|
/>
|
|
<HelpModal
|
|
setSearchValue={setSearchValue}
|
|
setProviderLabel={setProviderLabel}
|
|
setProviderURL={setProviderURL}
|
|
applicationData={applications}
|
|
providerData={providers}
|
|
providerModalOpened={providerModalOpened}
|
|
closeProviderModal={closeProviderModal}
|
|
/>
|
|
<WeatherModal
|
|
current={current}
|
|
extendedForecast={extendedForecast}
|
|
weatherModalOpened={weatherModalOpened}
|
|
setSearchValue={setSearchValue}
|
|
setProviderLabel={setProviderLabel}
|
|
setProviderURL={setProviderURL}
|
|
closeWeatherModal={closeWeatherModal}
|
|
/>
|
|
</Stack>
|
|
</>
|
|
);
|
|
}
|