Refactored common hooks to reduce api calls

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

@@ -1,16 +1,30 @@
 import { Stack, TextInput } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { HelpModal, WeatherModal } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textInputClasses } from 'styles';
 
 export default function Search({
 	current,
 	outlook,
+	points,
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
 }: any) {
+	const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
+		endpoint: 'api/providers',
+	});
+
+	const [providerData, setProviderData] = useState<any>([]);
+
+	useEffect(() => {
+		if (providers && providersIsFetched) {
+			setProviderData(providers);
+		}
+	}, [providers, providersIsFetched]);
+
 	const {
 		providerLabel,
 		setProviderLabel,
@@ -18,7 +32,6 @@ export default function Search({
 		setProviderURL,
 		searchValue,
 		setSearchValue,
-		providers,
 	} = useCommonHooks();
 
 	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
@@ -94,7 +107,7 @@ export default function Search({
 					) {
 						setProviderLabel('Show help');
 					} else if (item.target.value.startsWith('/')) {
-						const provider = providers?.find(
+						const provider = providerData?.find(
 							(p: any) => p.prefix === item.target.value.split(' ')[0],
 						);
 						setProviderLabel(provider?.name || 'Invalid Search');
@@ -121,6 +134,7 @@ export default function Search({
 			<WeatherModal
 				current={current}
 				outlook={outlook}
+				points={points}
 				closeWeatherModal={closeWeatherModal}
 				weatherModalOpened={weatherModalOpened}
 			/>