Search history
This commit is contained in:
Sean Edmunds
@@ -1,9 +1,9 @@
|
||||
import { Stack, TextInput } from '@mantine/core';
|
||||
import { Group, type OptionsFilter, Select, Stack, Text } from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { HelpModal, WeatherModal } from 'components';
|
||||
import { useCommonHooks, useQueryAPI } from 'hooks';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { textInputClasses } from 'styles';
|
||||
import { selectClasses } from 'styles';
|
||||
|
||||
export default function Search({
|
||||
current,
|
||||
@@ -21,30 +21,47 @@ export default function Search({
|
||||
endpoint: 'api/apps',
|
||||
});
|
||||
const [applicationData, setApplicationData] = useState<any>([]);
|
||||
const { data: history, isFetched: historyIsFetched } = useQueryAPI({
|
||||
endpoint: 'api/searchHistory',
|
||||
});
|
||||
const [searchHistory, setSearchHistory] = useState<any>([]);
|
||||
const { mutateAsync: createHistoryItem } = useMutationAPI();
|
||||
const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
|
||||
useDisclosure(false);
|
||||
const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure();
|
||||
const {
|
||||
theme,
|
||||
providerLabel,
|
||||
setProviderLabel,
|
||||
providerURL,
|
||||
setProviderURL,
|
||||
providerPrefix,
|
||||
setProviderPrefix,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
} = useCommonHooks();
|
||||
|
||||
const urlPattern = new RegExp(
|
||||
'^(https?:\\/\\/)?' + // protocol
|
||||
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
|
||||
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
|
||||
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
|
||||
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
|
||||
'(\\#[-a-z\\d_]*)?$',
|
||||
'i',
|
||||
); // fragment locator
|
||||
|
||||
const handleSearchHistoryItem = (item: any) => {
|
||||
const url =
|
||||
providers.find((provider: any) => provider.prefix === item.option.prefix)?.url ||
|
||||
'https://www.google.com/search?q=';
|
||||
open(`${url}${item.option.searchTerm}`, '_self');
|
||||
};
|
||||
|
||||
const handleKeyPress = (item: any) => {
|
||||
let option = '';
|
||||
let subtext = '';
|
||||
|
||||
const urlPattern = new RegExp(
|
||||
'^(https?:\\/\\/)?' + // protocol
|
||||
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
|
||||
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
|
||||
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
|
||||
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
|
||||
'(\\#[-a-z\\d_]*)?$',
|
||||
'i',
|
||||
); // fragment locator
|
||||
if (item.target.value.startsWith('/')) {
|
||||
option =
|
||||
item.target.value.substr(1, item.target.value.indexOf(' ') - 1) ||
|
||||
@@ -61,6 +78,11 @@ export default function Search({
|
||||
if (providerLabel === 'Show help') {
|
||||
openProviderModal();
|
||||
} else if (item.target.value.startsWith('/')) {
|
||||
createHistoryItem({
|
||||
method: 'POST',
|
||||
endpoint: 'api/searchHistory',
|
||||
body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
|
||||
});
|
||||
open(`${providerURL}${subtext}`, '_self');
|
||||
} else if (providerLabel === 'Show weather') {
|
||||
openWeatherModal();
|
||||
@@ -74,11 +96,28 @@ export default function Search({
|
||||
window.location = item.target.value;
|
||||
else open(`https://${item.target.value}`, '_self');
|
||||
} else {
|
||||
createHistoryItem({
|
||||
method: 'POST',
|
||||
endpoint: 'api/searchHistory',
|
||||
body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
|
||||
});
|
||||
open(`${providerURL}${subtext}`, '_self');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const optionsFilter: OptionsFilter = ({ options, search }) => {
|
||||
const splittedSearch = search.toLowerCase().trim().split(' ');
|
||||
return options
|
||||
.filter((option: any) => {
|
||||
const words = option.value.toLowerCase().trim().split(' ');
|
||||
return splittedSearch.every((searchWord) =>
|
||||
words.some((word: any) => word.includes(searchWord)),
|
||||
);
|
||||
})
|
||||
.slice(0, 10);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (providers && providersIsFetched) {
|
||||
setProviderData(providers);
|
||||
@@ -90,6 +129,12 @@ export default function Search({
|
||||
setApplicationData(apps);
|
||||
}
|
||||
}, [apps, isAppsFetching]);
|
||||
|
||||
useEffect(() => {
|
||||
if (history && historyIsFetched) {
|
||||
setSearchHistory(history);
|
||||
}
|
||||
}, [history, historyIsFetched]);
|
||||
return (
|
||||
<Stack
|
||||
style={{
|
||||
@@ -102,15 +147,72 @@ export default function Search({
|
||||
gap: 0,
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
autoFocus
|
||||
className={textInputClasses.search}
|
||||
classNames={textInputClasses}
|
||||
<Select
|
||||
classNames={selectClasses}
|
||||
className={selectClasses.search}
|
||||
filter={optionsFilter}
|
||||
searchable
|
||||
data={searchHistory.map((item: any) => ({
|
||||
label: `${item.provider}`,
|
||||
value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
|
||||
...item,
|
||||
}))}
|
||||
renderOption={(item: any) => {
|
||||
const m = new Date(item.option.dateTimeStamp);
|
||||
const dateString = `${m.getUTCFullYear()}/${`0${m.getUTCMonth() + 1}`.slice(-2)}/${`0${m.getUTCDate()}`.slice(-2)} ${`0${m.getUTCHours()}`.slice(-2)}:${`0${m.getUTCMinutes()}`.slice(-2)}:${`0${m.getUTCSeconds()}`.slice(-2)}`;
|
||||
return (
|
||||
<Group
|
||||
w={'100%'}
|
||||
onClick={() => {
|
||||
handleSearchHistoryItem(item);
|
||||
}}
|
||||
>
|
||||
<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>{item.option.searchTerm}</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: `${theme.primaryColor}33`,
|
||||
}}
|
||||
>
|
||||
{dateString}
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
);
|
||||
}}
|
||||
spellCheck='true'
|
||||
leftSection={providerLabel}
|
||||
rightSection={<Stack />}
|
||||
value={searchValue}
|
||||
searchValue={searchValue}
|
||||
placeholder={searchValue === '' ? undefined : searchValue}
|
||||
nothingFoundMessage='Nothing found...'
|
||||
data-active={searchValue !== ''}
|
||||
onChange={(item: any) => {
|
||||
dropdownOpened={dropdownOpened}
|
||||
onBlur={() => closeDropdown()}
|
||||
onFocus={() => {
|
||||
if (searchValue !== '') {
|
||||
openDropdown();
|
||||
}
|
||||
}}
|
||||
comboboxProps={{
|
||||
withinPortal: false,
|
||||
transitionProps: { transition: 'fade', duration: 200 },
|
||||
}}
|
||||
onInput={(item: any) => {
|
||||
openDropdown();
|
||||
setSearchValue(item.currentTarget.value);
|
||||
if (
|
||||
item.target.value === '/?' ||
|
||||
@@ -120,12 +222,17 @@ export default function Search({
|
||||
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 = providerData?.find(
|
||||
(p: any) => 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');
|
||||
@@ -139,15 +246,19 @@ export default function Search({
|
||||
} else {
|
||||
setProviderLabel('Invalid function');
|
||||
}
|
||||
} else {
|
||||
setProviderLabel('Google Search');
|
||||
setProviderURL('https://www.google.com/search?q=');
|
||||
}
|
||||
}}
|
||||
onKeyUp={(item: any) => {
|
||||
if (item.code === 'Escape') {
|
||||
if (dropdownOpened) {
|
||||
closeDropdown();
|
||||
}
|
||||
setSearchValue('');
|
||||
setProviderLabel('Google Search');
|
||||
setProviderPrefix('/g');
|
||||
}
|
||||
if (item.code === 'ArrowDown' && !dropdownOpened) {
|
||||
openDropdown();
|
||||
}
|
||||
if (!providerLabel.startsWith('Invalid')) {
|
||||
handleKeyPress(item);
|
||||
|
||||
Reference in New Issue
Block a user