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,6 +261,7 @@ export default function Search({
 
 	function RenderOption(item: any) {
 		const [showFillButton, setShowFillButton] = useState(false);
+		if (item.option.searchTerm) {
 			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 (
@@ -312,6 +330,44 @@ export default function Search({
 				</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={theme.primaryColor}>{item.option.searchTerm}</Text>
+					<Text
+						style={{
+							color: `${theme.primaryColor}55`,
+						}}
+					>
+						{item.option.value}
+					</Text>
+				</Group>
+			</Group>
+		);
+	}
 
 	useEffect(() => {
 		if (providers && providersIsFetched) {
@@ -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}
 			/>