Updates to personalization

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

@@ -21,13 +21,13 @@ import type {
 	CurrentWeather,
 	ExtendedForecast,
 	GuacamoleClient,
+	PersonalData,
 	Provider,
 	SearchHistoryItem,
 } from 'types';
 import RecommendedApplications from './components/RecommendedApplications';
 import RecommendedBookmarks from './components/RecommendedBookmarks';
 import SearchSelectItem from './components/SearchSelectItem';
-import { FaComputer } from 'react-icons/fa6';
 
 export default function Search({
 	current,
@@ -36,6 +36,7 @@ export default function Search({
 	closeWeatherModal,
 	openWeatherModal,
 	position,
+	personal,
 }: {
 	current: CurrentWeather;
 	extendedForecast: ExtendedForecast[];
@@ -43,17 +44,19 @@ export default function Search({
 	closeWeatherModal: () => void;
 	openWeatherModal: () => void;
 	position: string;
+	personal: PersonalData;
 }) {
 	const { ref, height } = useElementSize();
 	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
 		endpoint: 'api/providers',
 	});
-	const [providers, setProviders] = useState<Provider[]>([]);
-	const [guacamoleClients, setGuacamoleClients] = useState<GuacamoleClient[]>([]);
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
+	const { data: guacamoleHostData, isFetched: guacamoleHostDataIsFetched } = useQueryAPI({
+		endpoint: 'api/guacamoleHost',
+	});
 	const { data: guacamoleClientData, isFetched: guacamoleClientDataIsFetched } =
 		useQueryAPI({
 			endpoint: 'api/guacamoleClients',
@@ -65,6 +68,9 @@ export default function Search({
 		useQueryAPI({
 			endpoint: 'api/providers/default',
 		});
+	const [providers, setProviders] = useState<Provider[]>([]);
+	const [guacamoleHost, setGuacamoleHost] = useState<string | undefined>('');
+	const [guacamoleClients, setGuacamoleClients] = useState<GuacamoleClient[]>([]);
 	const [applications, setApplications] = useState<Application[]>([]);
 	const [filteredApplications, setFilteredApplications] = useState<Application[]>([]);
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
@@ -130,7 +136,7 @@ export default function Search({
 	};
 
 	const handleGuacamoleClientLaunchItem = ({ option }: { option: any }) => {
-		const validUrl = `https://sean.bet/guacamole/#/client/${option.clientIdentifier}`;
+		const validUrl = `${guacamoleHost}/#/client/${option.clientIdentifier}`;
 		open(validUrl, '_self');
 	};
 
@@ -175,7 +181,7 @@ export default function Search({
 					(client: GuacamoleClient) =>
 						client.clientName.toLowerCase() === item.target.value.toLowerCase().substr(1),
 				);
-				open(`https://sean.bet/guacamole/#/client/${client?.clientIdentifier}`, '_self');
+				open(`${guacamoleHost}/#/client/${client?.clientIdentifier}`, '_self');
 			} else if (urlPattern.test(item.target.value)) {
 				if (/^(https?:\/\/).*/i.test(item.target.value))
 					globalThis.location = item.target.value;
@@ -301,7 +307,7 @@ export default function Search({
 			} else {
 				setProviderLabel('Invalid function');
 			}
-		} else if (item.target.value.startsWith('>')) {
+		} else if (item.target.value.startsWith('>') && personal.enableGuacamole === 1) {
 			if (
 				guacamoleClients?.find(
 					(client: GuacamoleClient) =>
@@ -335,7 +341,7 @@ export default function Search({
 					};
 				});
 		}
-		if (splittedSearch[0].startsWith('>')) {
+		if (splittedSearch[0].startsWith('>') && personal.enableGuacamole === 1) {
 			return guacamoleClientData
 				.filter((guacamoleClient: GuacamoleClient) =>
 					guacamoleClient.clientName
@@ -380,15 +386,16 @@ export default function Search({
 	};
 
 	const renderItem: any = (item: any) => {
-		const Icon = item.option.icon ? 
-			(allIcons[
-				item.option.icon
-					? item.option.icon
-					: item.option.prefix === '/g'
-						? 'FaGoogle'
-						: (providers.find((p: Provider) => p.prefix === item.option.prefix)?.icon ??
-							'')
-			]) : (allIcons['FaComputer']);
+		const Icon = item.option.icon
+			? allIcons[
+					item.option.icon
+						? item.option.icon
+						: item.option.prefix === '/g'
+							? 'FaGoogle'
+							: (providers.find((p: Provider) => p.prefix === item.option.prefix)?.icon ??
+								'')
+				]
+			: allIcons.FaComputer;
 		return (searchValue as string).startsWith('!') ? (
 			<Group
 				pos={'relative'}
@@ -419,7 +426,7 @@ export default function Search({
 					{item.option.name}
 				</Text>
 			</Group>
-		) : (searchValue as string).startsWith('>') ? (
+		) : (searchValue as string).startsWith('>') && personal.enableGuacamole === 1 ? (
 			<Group
 				pos={'relative'}
 				m={0}
@@ -486,6 +493,12 @@ export default function Search({
 		}
 	}, [providerData, providerDataIsFetched]);
 
+	useEffect(() => {
+		if (guacamoleHostData && guacamoleHostDataIsFetched) {
+			setGuacamoleHost(guacamoleHostData[0].guacamoleHost);
+		}
+	}, [guacamoleClientData, guacamoleClientDataIsFetched]);
+
 	useEffect(() => {
 		if (guacamoleClientData && guacamoleClientDataIsFetched) {
 			setGuacamoleClients(guacamoleClientData);