Search features
This commit is contained in:
Sean Edmunds
@@ -1,9 +1,17 @@
|
||||
import { Group, type OptionsFilter, Select, Stack, Text } from '@mantine/core';
|
||||
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 { selectClasses } from 'styles';
|
||||
import { FiEdit, FiTrash } from 'react-icons/fi';
|
||||
import { actionIconClasses, selectClasses } from 'styles';
|
||||
|
||||
export default function Search({
|
||||
current,
|
||||
@@ -25,10 +33,13 @@ export default function Search({
|
||||
endpoint: 'api/searchHistory',
|
||||
});
|
||||
const [searchHistory, setSearchHistory] = useState<any>([]);
|
||||
const [filteredHistory, setFilteredHistory] = useState<any>([]);
|
||||
const { mutateAsync: createHistoryItem } = useMutationAPI();
|
||||
const { mutateAsync: deleteHistoryItem } = useMutationAPI();
|
||||
const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
|
||||
useDisclosure(false);
|
||||
const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure();
|
||||
const [listIndex, setListIndex] = useState(0);
|
||||
const {
|
||||
theme,
|
||||
providerLabel,
|
||||
@@ -40,7 +51,8 @@ export default function Search({
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
} = useCommonHooks();
|
||||
|
||||
const [placeholderValue, setPlaceholderValue] = useState('');
|
||||
const [value, setValue] = useState(0);
|
||||
const urlPattern = new RegExp(
|
||||
'^(https?:\\/\\/)?' + // protocol
|
||||
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
|
||||
@@ -107,113 +119,76 @@ export default function Search({
|
||||
}
|
||||
};
|
||||
|
||||
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)),
|
||||
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[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`,
|
||||
);
|
||||
})
|
||||
.slice(0, 10);
|
||||
}
|
||||
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[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`,
|
||||
);
|
||||
setValue(searchHistory[listIndex].id);
|
||||
}
|
||||
} 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (providers && providersIsFetched) {
|
||||
setProviderData(providers);
|
||||
}
|
||||
}, [providers, providersIsFetched]);
|
||||
|
||||
useEffect(() => {
|
||||
if (apps && !isAppsFetching) {
|
||||
setApplicationData(apps);
|
||||
}
|
||||
}, [apps, isAppsFetching]);
|
||||
|
||||
useEffect(() => {
|
||||
if (history && historyIsFetched) {
|
||||
setSearchHistory(history);
|
||||
}
|
||||
}, [history, historyIsFetched]);
|
||||
return (
|
||||
<Stack
|
||||
style={{
|
||||
height: '100px',
|
||||
backgroundColor: 'transparent',
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
padding: '.3em',
|
||||
display: 'inline-block',
|
||||
gap: 0,
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
autoFocus
|
||||
placeholder={searchValue === '' ? undefined : searchValue}
|
||||
nothingFoundMessage='Nothing found...'
|
||||
data-active={searchValue !== ''}
|
||||
dropdownOpened={dropdownOpened}
|
||||
onBlur={() => closeDropdown()}
|
||||
onFocus={() => {
|
||||
if (searchValue !== '') {
|
||||
openDropdown();
|
||||
}
|
||||
}}
|
||||
comboboxProps={{
|
||||
withinPortal: false,
|
||||
transitionProps: { transition: 'fade', duration: 200 },
|
||||
}}
|
||||
onInput={(item: any) => {
|
||||
const onInput = (item: any) => {
|
||||
openDropdown();
|
||||
setSearchValue(item.currentTarget.value);
|
||||
if (
|
||||
@@ -253,23 +228,187 @@ export default function Search({
|
||||
setProviderURL('https://www.google.com/search?q=');
|
||||
setProviderPrefix('/g');
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
function RenderOption(item: any) {
|
||||
const [showFillButton, setShowFillButton] = useState(false);
|
||||
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);
|
||||
}}
|
||||
onKeyUp={(item: any) => {
|
||||
if (item.code === 'Escape') {
|
||||
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.searchTerm);
|
||||
}}
|
||||
>
|
||||
<FiEdit />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</Group>
|
||||
<Group justify='space-between' w={'80%'}>
|
||||
<Text c={theme.primaryColor}>{item.option.searchTerm}</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: `${theme.primaryColor}55`,
|
||||
}}
|
||||
>
|
||||
{dateString}
|
||||
</Text>
|
||||
</Group>
|
||||
{showFillButton && (
|
||||
<ActionIcon
|
||||
className={actionIconClasses.selectOptionActions}
|
||||
classNames={actionIconClasses}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteHistoryItem({
|
||||
method: 'DELETE',
|
||||
endpoint: 'api/searchHistory',
|
||||
body: { id: item.option.id },
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FiTrash />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (providers && providersIsFetched) {
|
||||
setProviderData(providers);
|
||||
}
|
||||
}, [providers, providersIsFetched]);
|
||||
|
||||
useEffect(() => {
|
||||
if (apps && !isAppsFetching) {
|
||||
setApplicationData(apps);
|
||||
}
|
||||
}, [apps, isAppsFetching]);
|
||||
|
||||
useEffect(() => {
|
||||
if (history && historyIsFetched) {
|
||||
setSearchHistory(history);
|
||||
if (filteredHistory.length === 0) {
|
||||
setFilteredHistory(history.slice(0, 10));
|
||||
}
|
||||
}
|
||||
}, [history, historyIsFetched]);
|
||||
|
||||
useEffect(() => {
|
||||
if (dropdownOpened) {
|
||||
setPlaceholderValue(
|
||||
`${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`,
|
||||
);
|
||||
}
|
||||
}, [listIndex, dropdownOpened]);
|
||||
|
||||
useEffect(() => {
|
||||
const splittedSearch = searchValue.toLowerCase().trim().split(' ');
|
||||
const filtered = searchHistory
|
||||
.filter((item: any) => {
|
||||
const option = `${item.prefix} ${item.searchTerm}`;
|
||||
const words = option.toLowerCase().trim().split(' ');
|
||||
return splittedSearch.every((searchWord) =>
|
||||
words.some((word: any) => 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: any) => ({
|
||||
label: `${item.provider}`,
|
||||
value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
|
||||
...item,
|
||||
}))}
|
||||
filter={optionsFilter}
|
||||
value={searchValue}
|
||||
searchValue={searchValue}
|
||||
placeholder={placeholderValue}
|
||||
nothingFoundMessage={<Text c={theme.primaryColor}>Nothing found...</Text>}
|
||||
data-active={searchValue !== ''}
|
||||
dropdownOpened={dropdownOpened}
|
||||
comboboxProps={{
|
||||
withinPortal: false,
|
||||
transitionProps: { transition: 'fade', duration: 200 },
|
||||
}}
|
||||
spellCheck='true'
|
||||
searchable
|
||||
autoFocus
|
||||
leftSection={providerLabel}
|
||||
rightSection={<Stack />}
|
||||
renderOption={RenderOption}
|
||||
onBlur={() => {
|
||||
setPlaceholderValue('');
|
||||
setListIndex(0);
|
||||
closeDropdown();
|
||||
}
|
||||
setSearchValue('');
|
||||
setProviderLabel('Google Search');
|
||||
setProviderPrefix('/g');
|
||||
}
|
||||
if (item.code === 'ArrowDown' && !dropdownOpened) {
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (searchValue !== '') {
|
||||
openDropdown();
|
||||
}
|
||||
if (!providerLabel.startsWith('Invalid')) {
|
||||
handleKeyPress(item);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
onInput={onInput}
|
||||
onKeyUp={handleKeyUp}
|
||||
/>
|
||||
<HelpModal
|
||||
providerModalOpened={providerModalOpened}
|
||||
|
||||
@@ -72,3 +72,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectOptionActions {
|
||||
&.root {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-text-acc) !important;
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
.loader {
|
||||
display: none;
|
||||
}
|
||||
:hover {
|
||||
color: var(--color-text-pri) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user