516 lines
14 KiB
TypeScript
516 lines
14 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Group,
|
|
type OptionsFilter,
|
|
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 { FiEdit, FiTrash } from 'react-icons/fi';
|
|
import { actionIconClasses, selectClasses } from 'styles';
|
|
import type {
|
|
Application,
|
|
CurrentWeather,
|
|
ExtendedForecast,
|
|
Provider,
|
|
SearchHistoryItem,
|
|
} from 'types';
|
|
|
|
export default function Search({
|
|
current,
|
|
extendedForecast,
|
|
weatherModalOpened,
|
|
closeWeatherModal,
|
|
openWeatherModal,
|
|
}: {
|
|
current: CurrentWeather;
|
|
extendedForecast: ExtendedForecast[];
|
|
weatherModalOpened: boolean;
|
|
closeWeatherModal: () => void;
|
|
openWeatherModal: () => void;
|
|
}) {
|
|
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 {
|
|
theme,
|
|
isMobile,
|
|
urlPattern,
|
|
providerLabel,
|
|
setProviderLabel,
|
|
providerURL,
|
|
setProviderURL,
|
|
providerPrefix,
|
|
setProviderPrefix,
|
|
searchValue,
|
|
setSearchValue,
|
|
} = useCommonHooks();
|
|
const [placeholderValue, setPlaceholderValue] = useState('');
|
|
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 handleAppSearchItem = (item: any) => {
|
|
open(`https://${item.option.url}`, '_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') {
|
|
if (dropdownOpened) {
|
|
closeDropdown();
|
|
}
|
|
setListIndex(0);
|
|
setSearchValue('');
|
|
setProviderLabel('Google Search');
|
|
setProviderPrefix('/g');
|
|
setPlaceholderValue('');
|
|
}
|
|
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);
|
|
};
|
|
|
|
function RenderOption(item: any) {
|
|
const [showFillButton, setShowFillButton] = useState(false);
|
|
if (item.option.searchTerm !== undefined) {
|
|
const m = new Date(item.option.dateTimeStamp);
|
|
const year = m.getUTCFullYear();
|
|
const month = `0${m.getUTCMonth() + 1}`.slice(-2);
|
|
const day = `0${m.getUTCDate()}`.slice(-2);
|
|
const hours = `0${m.getUTCHours()}`.slice(-2);
|
|
const minutes = `0${m.getUTCMinutes()}`.slice(-2);
|
|
const seconds = `0${m.getUTCSeconds()}`.slice(-2);
|
|
const dateString = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
|
|
return (
|
|
<Group
|
|
w={'100%'}
|
|
onClick={() => {
|
|
handleSearchHistoryItem(item);
|
|
}}
|
|
onMouseEnter={() => {
|
|
setShowFillButton(true);
|
|
}}
|
|
onMouseLeave={() => {
|
|
setShowFillButton(false);
|
|
}}
|
|
>
|
|
<Group w={'15%'}>
|
|
<Text
|
|
style={{
|
|
backgroundColor: `${theme.primaryColor}33`,
|
|
fontWeight: 600,
|
|
borderRadius: '15px',
|
|
padding: '5px',
|
|
}}
|
|
>
|
|
{item.option.provider}
|
|
</Text>
|
|
{showFillButton && (
|
|
<ActionIcon
|
|
className={actionIconClasses.selectOptionActions}
|
|
classNames={actionIconClasses}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
|
|
}}
|
|
>
|
|
<FiEdit />
|
|
</ActionIcon>
|
|
)}
|
|
</Group>
|
|
<Group justify='space-between' w={'80%'}>
|
|
<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
|
|
<Text
|
|
style={{
|
|
color: `${theme.primaryColor}55`,
|
|
}}
|
|
>
|
|
{dateString}
|
|
</Text>
|
|
</Group>
|
|
{showFillButton && (
|
|
<ActionIcon
|
|
className={actionIconClasses.selectOptionActions}
|
|
classNames={actionIconClasses}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
mutateAsync({
|
|
method: 'DELETE',
|
|
endpoint: searchEndpoint,
|
|
body: { id: item.option.id },
|
|
});
|
|
}}
|
|
>
|
|
<FiTrash />
|
|
</ActionIcon>
|
|
)}
|
|
</Group>
|
|
);
|
|
}
|
|
return (
|
|
<Group
|
|
w={'100%'}
|
|
onClick={() => {
|
|
handleAppSearchItem(item);
|
|
}}
|
|
onMouseEnter={() => {
|
|
setShowFillButton(true);
|
|
}}
|
|
onMouseLeave={() => {
|
|
setShowFillButton(false);
|
|
}}
|
|
>
|
|
<Group w={'15%'}>
|
|
<Text
|
|
style={{
|
|
backgroundColor: `${theme.primaryColor}33`,
|
|
fontWeight: 600,
|
|
borderRadius: '15px',
|
|
padding: '5px',
|
|
}}
|
|
>
|
|
{item.option.label}
|
|
</Text>
|
|
</Group>
|
|
<Group justify='space-between' w={'80%'}>
|
|
<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
|
|
<Text
|
|
style={{
|
|
color: `${theme.primaryColor}55`,
|
|
}}
|
|
>
|
|
{item.option.value}
|
|
</Text>
|
|
</Group>
|
|
</Group>
|
|
);
|
|
}
|
|
|
|
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) {
|
|
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 (
|
|
<Stack
|
|
style={{
|
|
height: '100px',
|
|
backgroundColor: 'transparent',
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
padding: '.3em',
|
|
display: 'inline-block',
|
|
gap: 0,
|
|
}}
|
|
>
|
|
<Select
|
|
classNames={selectClasses}
|
|
className={selectClasses.search}
|
|
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={searchValue !== ''}
|
|
dropdownOpened={dropdownOpened}
|
|
comboboxProps={{
|
|
transitionProps: { transition: 'fade', duration: 200 },
|
|
}}
|
|
spellCheck='true'
|
|
searchable
|
|
autoFocus={!isMobile}
|
|
leftSection={providerLabel}
|
|
rightSection={<Stack />}
|
|
renderOption={RenderOption}
|
|
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>
|
|
);
|
|
}
|