Refactored common hooks to reduce api calls

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>