Refactored common hooks to reduce api calls

src/components/WeatherModal/WeatherModal.tsx

@@ -3,27 +3,36 @@ import { modalClasses } from 'styles';
 import SmallOutlookCard from './SmallOutlookCard';
 import SmallWeatherCard from './SmallWeatherCard';
 
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import HourlyCard from './HourlyCard';
 
 export function WeatherModal({
 	current,
 	outlook,
+	points,
 	closeWeatherModal,
 	weatherModalOpened,
 }: any) {
+	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+		endpoint: 'api/personalData',
+	});
+	const [personalData, setPersonalData] = useState<any>([]);
+	const { data: hourly } = useWeatherAPI({
+		endpoint: 'hourly',
+		office: points?.properties.gridId,
+		x: points?.properties.gridX,
+		y: points?.properties.gridY,
+	});
+	useEffect(() => {
+		if (personal && personalIsFetched) {
+			setPersonalData(personal);
+		}
+	}, [personal, personalIsFetched]);
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
 	const [sunset, setSunset] = useState(100);
-	const {
-		theme,
-		isMobile,
-		hourly,
-		setProviderLabel,
-		setSearchValue,
-		setProviderURL,
-		personal,
-	} = useCommonHooks();
+	const { theme, isMobile, setProviderLabel, setSearchValue, setProviderURL } =
+		useCommonHooks();
 	useEffect(() => {
 		if (hourly) {
 			setHourlyForecast(hourly.properties.periods.slice(1, 13));
@@ -75,7 +84,7 @@ export function WeatherModal({
 								Weather Forecast for{' '}
 							</Text>
 							<Text fz={18} fw={600}>
-								{personal?.[0].physicalAddress}
+								{personalData?.[0]?.physicalAddress}
 							</Text>
 						</Group>
 					</Modal.Title>