Search features

src/pages/homepage/components/Search/Search.tsx

@@ -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,6 +119,117 @@ export default function Search({
 		}
 	};
 
+	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}`,
+			);
+		}
+		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);
+				}
+			}
+		}
+	};
+
+	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 = 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');
+			} else if (
+				applicationData?.find(
+					(app: any) =>
+						app.baseUrl.substr(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(' ');
 		return options
@@ -119,6 +242,77 @@ export default function Search({
 			.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);
+				}}
+				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);
@@ -134,8 +328,33 @@ export default function Search({
 	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={{
@@ -151,125 +370,45 @@ export default function Search({
 			<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) => {
+				filter={optionsFilter}
-					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={placeholderValue}
-				placeholder={searchValue === '' ? undefined : searchValue}
+				nothingFoundMessage={<Text c={theme.primaryColor}>Nothing found...</Text>}
-				nothingFoundMessage='Nothing found...'
 				data-active={searchValue !== ''}
 				dropdownOpened={dropdownOpened}
-				onBlur={() => closeDropdown()}
+				comboboxProps={{
+					withinPortal: false,
+					transitionProps: { transition: 'fade', duration: 200 },
+				}}
+				spellCheck='true'
+				searchable
+				autoFocus
+				leftSection={providerLabel}
+				rightSection={<Stack />}
+				renderOption={RenderOption}
+				onBlur={() => {
+					setPlaceholderValue('');
+					setListIndex(0);
+					closeDropdown();
+				}}
 				onFocus={() => {
 					if (searchValue !== '') {
 						openDropdown();
 					}
 				}}
-				comboboxProps={{
+				onKeyDown={(e) => {
-					withinPortal: false,
+					if (e.key === 'Tab') {
-					transitionProps: { transition: 'fade', duration: 200 },
+						e.preventDefault();
-				}}
-				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 = 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');
-						} else if (
-							applicationData?.find(
-								(app: any) =>
-									app.baseUrl.substr(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');
-					}
-				}}
-				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);
 					}
 				}}
+				onInput={onInput}
+				onKeyUp={handleKeyUp}
 			/>
 			<HelpModal
 				providerModalOpened={providerModalOpened}

src/styles/ActionIcon.module.css

@@ -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;
+		}
+	}
+}