Default Search Provider support; Style updates

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

@@ -37,6 +37,10 @@ export default function Search({
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
+	const { data: defaultProviderData, isFetched: defaultProviderDataIsFetched } =
+		useQueryAPI({
+			endpoint: 'api/providers/default',
+		});
 	const [applications, setApplications] = useState<Application[]>([]);
 	const searchEndpoint = 'api/searchHistory';
 	const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
@@ -60,14 +64,26 @@ export default function Search({
 		setProviderPrefix,
 		searchValue,
 		setSearchValue,
+		defaultProviderURL,
+		setDefaultProviderURL,
+		defaultProviderLabel,
+		setDefaultProviderLabel,
+		defaultProviderPrefix,
+		setDefaultProviderPrefix,
 	} = useCommonHooks();
 	const [placeholderValue, setPlaceholderValue] = useState<string>('');
 	const [value, setValue] = useState(0);
 
+	const handleResetSearch = () => {
+		setSearchValue('');
+		setProviderLabel(defaultProviderLabel);
+		setProviderURL(defaultProviderURL);
+	};
+
 	const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
 		const url =
 			providerData.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
-			'https://www.google.com/search?q=';
+			defaultProviderURL;
 		open(`${url}${option.searchTerm}`, '_self');
 	};
 
@@ -136,9 +152,7 @@ export default function Search({
 	const handleKeyUp = (item: any) => {
 		if (item.code === 'Escape') {
 			setListIndex(0);
-			setSearchValue('');
-			setProviderLabel('Google Search');
-			setProviderPrefix('/g');
+			handleResetSearch();
 			setPlaceholderValue('');
 			if (dropdownOpened) {
 				closeDropdown();
@@ -242,9 +256,9 @@ export default function Search({
 				setProviderLabel('Invalid function');
 			}
 		} else {
-			setProviderLabel('Google Search');
-			setProviderURL('https://www.google.com/search?q=');
-			setProviderPrefix('/g');
+			setProviderLabel(defaultProviderLabel);
+			setProviderURL(defaultProviderURL);
+			setProviderPrefix(defaultProviderPrefix);
 		}
 	};
 
@@ -321,6 +335,16 @@ export default function Search({
 		setFilteredHistory(filtered);
 	}, [searchValue]);
 
+	useEffect(() => {
+		if (defaultProviderData && defaultProviderDataIsFetched) {
+			setDefaultProviderURL(
+				defaultProviderData[0]?.url ?? 'https://www.google.com/search?q=',
+			);
+			setDefaultProviderPrefix(defaultProviderData[0]?.prefix ?? '/g');
+			setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
+		}
+	}, [defaultProviderData, defaultProviderDataIsFetched]);
+
 	return (
 		<>
 			{dropdownOpened && <Overlay blur={5} />}
@@ -423,9 +447,7 @@ export default function Search({
 					onKeyUp={handleKeyUp}
 				/>
 				<HelpModal
-					setSearchValue={setSearchValue}
-					setProviderLabel={setProviderLabel}
-					setProviderURL={setProviderURL}
+					handleResetSearch={handleResetSearch}
 					applicationData={applications}
 					providerData={providers}
 					providerModalOpened={providerModalOpened}
@@ -435,9 +457,7 @@ export default function Search({
 					current={current}
 					extendedForecast={extendedForecast}
 					weatherModalOpened={weatherModalOpened}
-					setSearchValue={setSearchValue}
-					setProviderLabel={setProviderLabel}
-					setProviderURL={setProviderURL}
+					handleResetSearch={handleResetSearch}
 					closeWeatherModal={closeWeatherModal}
 				/>
 			</Stack>