Refactored common hooks to reduce api calls

src/pages/homepage/Homepage.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { stackClasses } from 'styles';
 import type { CurrentWeather, OutlookWeather } from 'types';
@@ -11,19 +11,93 @@ import Search from './components/Search/Search';
 import SettingsButton from './components/SettingsButton';
 
 export function Homepage() {
-	const [displayedGreeting, setDisplayedGreeting] = useState('');
+	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+		endpoint: 'api/personalData',
+	});
+	const [personalData, setPersonalData] = useState<any>([]);
 	const {
-		appFilter,
-		bookmarkFilter,
-		isMobile,
-		messages,
-		isMessagesFetching,
-		weather,
-		basicWeather,
-		forecast,
-		personal,
-	} = useCommonHooks();
+		data: messageData,
+		isFetching: isMessagesFetching,
+		isFetched: isMessagesFetched,
+	} = useQueryAPI({
+		endpoint: 'api/messages',
+	});
+	const [messages, setMessages] = useState<any>([]);
 
+	useEffect(() => {
+		if (messageData && isMessagesFetched) {
+			setMessages(messageData);
+		}
+	}, [messageData, isMessagesFetched]);
+	useEffect(() => {
+		if (personal && personalIsFetched) {
+			setPersonalData(personal);
+		}
+	}, [personal, personalIsFetched]);
+	const [displayedGreeting, setDisplayedGreeting] = useState('');
+	const { appFilter, bookmarkFilter, isMobile } = useCommonHooks();
+
+	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
+		useDisclosure(false);
+
+	const dateOptions: Intl.DateTimeFormatOptions = !isMobile
+		? {
+				weekday: 'long',
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric',
+			}
+		: {};
+	const date = new Date().toLocaleDateString('en-US', dateOptions);
+
+	useEffect(() => {
+		if (messages && personalData) {
+			setDisplayedGreeting(() => {
+				if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) {
+					switch (Math.floor(new Date().getHours() / 6)) {
+						case 0:
+							return `Good night, ${personalData?.[0]?.firstName}!`;
+						case 1:
+							return `Good morning, ${personalData?.[0]?.firstName}!`;
+						case 2:
+							return `Good afternoon, ${personalData?.[0]?.firstName}!`;
+						case 3:
+							return `Good evening, ${personalData?.[0]?.firstName}!`;
+					}
+				}
+				return messages[Math.floor(Math.random() * messages.length)].message;
+			});
+		}
+	}, [messages, personalData, isMessagesFetching]);
+
+	const { data: weatherMetadata } = useOSMAPI({ address: personal?.[0].physicalAddress });
+	const { data: points } = useWeatherAPI({
+		endpoint: 'points',
+		lat: weatherMetadata?.[0].lat || 0,
+		lon: weatherMetadata?.[0].lon || 0,
+	});
+	const { data: basicWeather } = useWeatherAPI({
+		endpoint: 'baseline',
+		office: points?.properties.gridId,
+		x: points?.properties.gridX,
+		y: points?.properties.gridY,
+	});
+	const { data: stations } = useWeatherAPI({
+		endpoint: 'stations',
+		office: points?.properties.gridId,
+		x: points?.properties.gridX,
+		y: points?.properties.gridY,
+	});
+	const { data: weather } = useWeatherAPI({
+		endpoint: 'current',
+		station: stations?.features[0].properties.stationIdentifier,
+	});
+	const { data: forecast } = useWeatherAPI({
+		endpoint: 'forecast',
+		office: points?.properties.gridId,
+		x: points?.properties.gridX,
+		y: points?.properties.gridY,
+	});
 	const [current, setCurrent] = useState<CurrentWeather>({
 		icon: '',
 		temperature: 0,
@@ -46,38 +120,6 @@ export function Homepage() {
 			windDirection: 'N',
 		},
 	]);
-	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
-		useDisclosure(false);
-
-	const dateOptions: Intl.DateTimeFormatOptions = !isMobile
-		? {
-				weekday: 'long',
-				year: 'numeric',
-				month: 'long',
-				day: 'numeric',
-			}
-		: {};
-	const date = new Date().toLocaleDateString('en-US', dateOptions);
-
-	useEffect(() => {
-		if (messages) {
-			setDisplayedGreeting(() => {
-				if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) {
-					switch (Math.floor(new Date().getHours() / 6)) {
-						case 0:
-							return `Good night, ${personal[0].firstName}!`;
-						case 1:
-							return `Good morning, ${personal[0].firstName}!`;
-						case 2:
-							return `Good afternoon, ${personal[0].firstName}!`;
-						case 3:
-							return `Good evening, ${personal[0].firstName}!`;
-					}
-				}
-				return messages[Math.floor(Math.random() * messages.length)].message;
-			});
-		}
-	}, [messages, isMessagesFetching]);
 
 	useEffect(() => {
 		if (weather !== undefined && basicWeather !== undefined) {
@@ -140,6 +182,9 @@ export function Homepage() {
 			<Search
 				current={current}
 				outlook={outlook}
+				weather={weather}
+				basicWeather={basicWeather}
+				points={points}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}
@@ -150,6 +195,9 @@ export function Homepage() {
 				current={current}
 				setCurrent={setCurrent}
 				outlook={outlook}
+				weather={weather}
+				basicWeather={basicWeather}
+				points={points}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}