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}

src/pages/homepage/components/Applications/Applications.tsx

@@ -1,10 +1,21 @@
 import { Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import AppItem from './AppItem';
 
 function Applications({ contentType }: any) {
-	const { isMobile, applicationData } = useCommonHooks();
+	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
+		endpoint: 'api/apps',
+	});
+	const { isMobile } = useCommonHooks();
+	const [applicationData, setApplicationData] = useState<any>([]);
+
+	useEffect(() => {
+		if (apps && !isAppsFetching) {
+			setApplicationData(apps);
+		}
+	}, [apps, isAppsFetching]);
 	return (
 		<>
 			{applicationData.length > 0 && contentType.length > 0 && (

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -1,16 +1,40 @@
 import { Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import LinkGroups from './LinkGroups';
 
 function Links({ contentType }: any) {
-	const { isMobile, linksIsFetched, groupsIsFetched, groupData, bookmarkData } =
-		useCommonHooks();
+	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
+		endpoint: 'api/links',
+	});
+	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
+		endpoint: 'api/categories',
+	});
+	const [bookmarkData, setBookmarkData] = useState<any>([]);
+
+	const [groups, setGroups] = useState([]);
+	useEffect(() => {
+		if (linkData && linksIsFetched) {
+			setBookmarkData(linkData);
+		}
+	}, [linksIsFetched, linkData]);
+
+	useEffect(() => {
+		if (groupData && groupsIsFetched) {
+			const groupList = groupData?.map((category: any) => {
+				return category;
+			});
+			setGroups(groupList);
+		}
+	}, [groupData, groupsIsFetched]);
+	const { isMobile } = useCommonHooks();
+
 	return (
 		<>
 			{groupsIsFetched &&
 				linksIsFetched &&
-				groupData?.length > 0 &&
+				groups?.length > 0 &&
 				contentType.length > 0 && (
 					<Stack id='links' style={{ gap: 0 }}>
 						<Text className={textClasses.sectionTitle} classNames={textClasses}>
@@ -26,7 +50,7 @@ function Links({ contentType }: any) {
 								gridTemplateRows: 'auto',
 							}}
 						>
-							{groupData.map((category: any) => {
+							{groups.map((category: any) => {
 								if (
 									contentType.includes(category.filterName) ||
 									contentType.includes('All')

src/pages/homepage/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { WeatherModal } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
@@ -10,11 +10,19 @@ function Header({
 	current,
 	setCurrent,
 	outlook,
+	weather,
+	basicWeather,
+	points,
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
 }: any) {
-	const { isMobile, weather, basicWeather, personal } = useCommonHooks();
+	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+		endpoint: 'api/personalData',
+	});
+
+	const [personalData, setPersonalData] = useState<any>([]);
+	const { isMobile } = useCommonHooks();
 	const [time, setTime] = useState(new Date());
 	function fixDigits(k: any) {
 		if (k < 10) {
@@ -30,6 +38,12 @@ function Header({
 		}, 1000);
 	}, []);
 
+	useEffect(() => {
+		if (personal && personalIsFetched) {
+			setPersonalData(personal);
+		}
+	}, [personal, personalIsFetched]);
+
 	useEffect(() => {
 		if (weather !== undefined && basicWeather !== undefined) {
 			setCurrent({
@@ -77,10 +91,10 @@ function Header({
 					fz={isMobile ? 24 : undefined}
 				>
 					{greet
-						.replace('$firstName', personal?.[0].firstName)
-						.replace('$lastName', personal?.[0].lastName)
-						.replace('$firstName!', personal?.[0].firstName.toUpperCase())
-						.replace('$lastName!', personal?.[0].lastName.toUpperCase())}
+						.replace('$firstName', personalData?.[0]?.firstName)
+						.replace('$lastName', personalData?.[0]?.lastName)
+						.replace('$firstName!', personalData?.[0]?.firstName.toUpperCase())
+						.replace('$lastName!', personalData?.[0]?.lastName.toUpperCase())}
 				</Text>
 			</Stack>
 			<Stack
@@ -150,6 +164,7 @@ function Header({
 			<WeatherModal
 				current={current}
 				outlook={outlook}
+				points={points}
 				closeWeatherModal={closeWeatherModal}
 				weatherModalOpened={weatherModalOpened}
 			/>

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}
 			/>

src/pages/homepage/components/SettingsButton.tsx

@@ -20,12 +20,21 @@ import {
 	actionIconClasses,
 	buttonClasses,
 	menuClasses,
+	multiSelectClasses,
 	selectClasses,
 	stackClasses,
 } from 'styles';
 
 function SettingsButton() {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
+	const { data: wolClients, isFetched: wolClientsIsFetched } = useQueryAPI({
+		endpoint: 'api/wolClients',
+	});
+	const [wolClientsData, setWolClientsData] = useState<any>([]);
+	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
+		endpoint: 'api/themes',
+	});
+	const [allThemeData, setAllThemeData] = useState<any>([]);
 	const { mutateAsync: wakeRequest } = useMutationAPI();
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
 	const navigate = useNavigate();
@@ -34,13 +43,11 @@ function SettingsButton() {
 		setCurrentTheme,
 		handleThemeChange,
 		theme,
-		allThemes,
 		appFilter,
 		setAppFilter,
 		bookmarkFilter,
 		setBookmarkFilter,
 		isMobile,
-		wolClients,
 	} = useCommonHooks();
 
 	const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
@@ -65,6 +72,18 @@ function SettingsButton() {
 		}
 	}, [data, isFetched]);
 
+	useEffect(() => {
+		if (wolClients && wolClientsIsFetched) {
+			setWolClientsData(wolClients);
+		}
+	}, [wolClients, wolClientsIsFetched]);
+
+	useEffect(() => {
+		if (allThemes && isAllThemesFetched) {
+			setAllThemeData(allThemes);
+		}
+	}, [allThemes, isAllThemesFetched]);
+
 	return (
 		<>
 			{overlayOpened && <Overlay />}
@@ -108,7 +127,7 @@ function SettingsButton() {
 								<Button
 									classNames={buttonClasses}
 									className={buttonClasses.wakeButton}
-									disabled={!wolClients?.length || selectedClient === null}
+									disabled={!wolClientsData?.length || selectedClient === null}
 									onClick={() => {
 										handleWakeRequest();
 										notify('Wake command sent');
@@ -121,9 +140,9 @@ function SettingsButton() {
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Pick a host...'
-									defaultValue={wolClients?.[0]?.hostname}
+									defaultValue={wolClientsData?.[0]?.hostname}
 									data={
-										wolClients?.map((wolClient: any) => {
+										wolClientsData?.map((wolClient: any) => {
 											return {
 												value: wolClient.hostname,
 												label: `${wolClient.hostname} (${wolClient.macAddress})`,
@@ -178,7 +197,7 @@ function SettingsButton() {
 												color: theme.primaryColor,
 											}}
 											onClick={() => {
-												handleThemeChange(allThemes, true);
+												handleThemeChange(allThemeData, true);
 											}}
 										>
 											<FaDice />
@@ -220,7 +239,7 @@ function SettingsButton() {
 									onChange={(data: any) => {
 										setAppFilter(data);
 									}}
-									classNames={selectClasses}
+									classNames={multiSelectClasses}
 									comboboxProps={{ withinPortal: false }}
 								/>
 								<MultiSelect
@@ -237,7 +256,7 @@ function SettingsButton() {
 									onChange={(data: any) => {
 										setBookmarkFilter(data);
 									}}
-									classNames={selectClasses}
+									classNames={multiSelectClasses}
 									comboboxProps={{ withinPortal: false }}
 								/>
 							</Group>