Testing new features

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

@@ -70,6 +70,10 @@ export default function Search({
 		open(`${url}${item.option.searchTerm}`, '_self');
 	};
 
+	const handleAppSearchItem = (item: any) => {
+		open(`https://${item.option.url}`, '_self');
+	};
+
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
@@ -134,7 +138,9 @@ export default function Search({
 			setListIndex(0);
 			openDropdown();
 			setPlaceholderValue(
-				searchHistory.length > 0 ? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}` : '',
+				searchHistory.length > 0
+					? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
+					: '',
 			);
 		}
 		if (!providerLabel.startsWith('Invalid')) {
@@ -156,7 +162,9 @@ export default function Search({
 					}
 				} else if (item.code === 'ArrowRight' || item.code === 'Tab') {
 					setSearchValue(
-						searchHistory.length > 0 ? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}` : '',
+						searchHistory.length > 0
+							? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
+							: '',
 					);
 					setValue(searchHistory.length > 0 ? searchHistory[listIndex].id : 0);
 				}
@@ -232,6 +240,15 @@ export default function Search({
 
 	const optionsFilter: OptionsFilter = ({ options, search }) => {
 		const splittedSearch = search.toLowerCase().trim().split(' ');
+		if (splittedSearch[0] === '!') {
+			return apps.map((app: any) => {
+				return {
+					label: app.name,
+					value: app.baseUrl,
+					...app,
+				};
+			});
+		}
 		return options
 			.filter((option: any) => {
 				const words = option.value.toLowerCase().trim().split(' ');
@@ -244,13 +261,80 @@ export default function Search({
 
 	function RenderOption(item: any) {
 		const [showFillButton, setShowFillButton] = useState(false);
-		const m = new Date(item.option.dateTimeStamp);
+		if (item.option.searchTerm) {
-		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)}`;
+			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.prefix} ${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>
+			);
+		}
 		return (
 			<Group
 				w={'100%'}
 				onClick={() => {
-					handleSearchHistoryItem(item);
+					handleAppSearchItem(item);
 				}}
 				onMouseEnter={() => {
 					setShowFillButton(true);
@@ -268,20 +352,8 @@ export default function Search({
 							padding: '5px',
 						}}
 					>
-						{item.option.provider}
+						{item.option.label}
 					</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={theme.primaryColor}>{item.option.searchTerm}</Text>
@@ -290,25 +362,9 @@ export default function Search({
 							color: `${theme.primaryColor}55`,
 						}}
 					>
-						{dateString}
+						{item.option.value}
 					</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>
 		);
 	}
@@ -337,7 +393,9 @@ export default function Search({
 	useEffect(() => {
 		if (dropdownOpened) {
 			setPlaceholderValue(
-				searchHistory.length > 0 ? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}` : '',
+				searchHistory.length > 0
+					? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
+					: '',
 			);
 		}
 	}, [listIndex, dropdownOpened]);
@@ -412,6 +470,7 @@ export default function Search({
 			/>
 			<HelpModal
 				providerModalOpened={providerModalOpened}
+				applicationData={applicationData}
 				providerData={providerData}
 				closeProviderModal={closeProviderModal}
 			/>