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>

src/pages/settings/components/Applications.tsx

@@ -1,11 +1,25 @@
 import { Stack, Text } from '@mantine/core';
 import { ApplicationColumns, DataTable } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
 const ApplicationSettings = () => {
 	const endpoint = 'api/apps';
-	const { isAppsFetching, isAppsLoading, applicationData } = useCommonHooks();
+	const {
+		data: apps,
+		isFetching: isAppsFetching,
+		isLoading: isAppsLoading,
+	} = useQueryAPI({
+		endpoint: 'api/apps',
+	});
+	const [applicationData, setApplicationData] = useState<any>([]);
+
+	useEffect(() => {
+		if (apps && !isAppsFetching) {
+			setApplicationData(apps);
+		}
+	}, [apps, isAppsFetching]);
 
 	return (
 		<Stack>

src/pages/settings/components/Bookmarks.tsx

@@ -1,10 +1,38 @@
 import { Stack, Text } from '@mantine/core';
 import { BookmarkColumns, DataTable } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 const BookmarkSettings = () => {
 	const endpoint = 'api/links';
-	const { groups, bookmarkData, linksIsFetching, linksIsLoading } = useCommonHooks();
+	const {
+		data: linkData,
+		isFetched: linksIsFetched,
+		isFetching: linksIsFetching,
+		isLoading: linksIsLoading,
+	} = 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.categoryName;
+			});
+			setGroups(groupList);
+		}
+	}, [groupData, groupsIsFetched]);
 
 	return (
 		<Stack>
@@ -12,7 +40,7 @@ const BookmarkSettings = () => {
 				Bookmarks
 			</Text>
 			<DataTable
-				tableName='Applications'
+				tableName='Bookmarks'
 				columns={BookmarkColumns(groups)}
 				tableData={bookmarkData}
 				isFetching={linksIsFetching}

src/pages/settings/components/Categories.tsx

@@ -1,10 +1,29 @@
 import { Stack, Text } from '@mantine/core';
 import { CategoryColumns, DataTable } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from '../../../styles';
 const CategorySettings = () => {
 	const endpoint = 'api/categories';
-	const { groupData, groupsIsFetching, groupsIsLoading } = useCommonHooks();
+	const {
+		data: groupData,
+		isFetching: groupsIsFetching,
+		isLoading: groupsIsLoading,
+		isFetched: groupsIsFetched,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+
+	const [groups, setGroups] = useState([]);
+
+	useEffect(() => {
+		if (groupData && groupsIsFetched) {
+			const groupList = groupData?.map((category: any) => {
+				return category;
+			});
+			setGroups(groupList);
+		}
+	}, [groupData, groupsIsFetched]);
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -13,7 +32,7 @@ const CategorySettings = () => {
 			<DataTable
 				tableName='Categories'
 				columns={CategoryColumns()}
-				tableData={groupData ?? []}
+				tableData={groups ?? []}
 				isFetching={groupsIsFetching}
 				isLoading={groupsIsLoading}
 				endpoint={endpoint}

src/pages/settings/components/Messages.tsx

@@ -1,10 +1,25 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, MessagesColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 const MessageSettings = () => {
 	const endpoint = 'api/messages';
-	const { messageData, isMessagesFetching, isMessagesLoading } = useCommonHooks();
+	const {
+		data: messageData,
+		isFetching: isMessagesFetching,
+		isFetched: isMessagesFetched,
+		isLoading: isMessagesLoading,
+	} = useQueryAPI({
+		endpoint: 'api/messages',
+	});
+	const [messages, setMessages] = useState<any>([]);
+
+	useEffect(() => {
+		if (messageData && isMessagesFetched) {
+			setMessages(messageData);
+		}
+	}, [messageData, isMessagesFetched]);
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -13,7 +28,7 @@ const MessageSettings = () => {
 			<DataTable
 				tableName='Messages'
 				columns={MessagesColumns()}
-				tableData={messageData}
+				tableData={messages}
 				isFetching={isMessagesFetching}
 				isLoading={isMessagesLoading}
 				endpoint={endpoint}

src/pages/settings/components/Personalization.tsx

@@ -1,11 +1,24 @@
 import { Text } from '@mantine/core';
 import { DataTable, PersonalizationColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 const PersonalizationSettings = () => {
 	const endpoint = 'api/personalData';
-	const { personalData, personalIsFetching, personalIsLoading } = useCommonHooks();
-
+	const {
+		data: personalData,
+		isFetched: personalIsFetched,
+		isFetching: personalIsFetching,
+		isLoading: personalIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [personal, setPersonal] = useState<any>([]);
+	useEffect(() => {
+		if (personalData && personalIsFetched) {
+			setPersonal(personalData);
+		}
+	}, [personalData, personalIsFetched]);
 	return (
 		<>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -14,7 +27,7 @@ const PersonalizationSettings = () => {
 			<DataTable
 				tableName='Personalization'
 				columns={PersonalizationColumns()}
-				tableData={personalData}
+				tableData={personal}
 				isFetching={personalIsFetching}
 				isLoading={personalIsLoading}
 				endpoint={endpoint}

src/pages/settings/components/SearchProviders.tsx

@@ -1,11 +1,27 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, SearchProviderColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
 const SearchProviderSettings = () => {
 	const endpoint = 'api/providers';
-	const { providerData, providersIsFetching, providersIsLoading } = useCommonHooks();
+	const {
+		data: providers,
+		isFetched: providersIsFetched,
+		isFetching: providersIsFetching,
+		isLoading: providersIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+
+	const [providerData, setProviderData] = useState<any>([]);
+
+	useEffect(() => {
+		if (providers && providersIsFetched) {
+			setProviderData(providers);
+		}
+	}, [providers, providersIsFetched]);
 
 	return (
 		<Stack>

src/pages/settings/components/ThemeCard.tsx

@@ -4,11 +4,16 @@ import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
 
-function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: any) {
+function ThemeCard({
+	cardTheme,
+	handleOpen,
+	handleDeleteTheme,
+	createTheme,
+	allThemes,
+}: any) {
 	const [hover, setHover] = useState(false);
 	const [shift, setShift] = useState<number>(0);
-	const { handleThemeChange, currentTheme, setCurrentTheme, theme, allThemes } =
-		useCommonHooks();
+	const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks();
 	return (
 		<Group
 			gap={0}
@@ -51,7 +56,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 					setCurrentTheme(cardTheme.name);
 				}}
 			>
-				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={0} />}
+				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={1} />}
 				<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
 					<Stack align='center'>
 						<Box
@@ -179,6 +184,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 				<Stack
 					gap={0}
 					style={{
+						zIndex: 2,
 						padding: '4px',
 						paddingRight: '0px',
 						position: 'absolute',
@@ -224,7 +230,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 						{cardTheme.randomEnabled ? <FiShuffle color='green' /> : <FiX color='red' />}
 					</ActionIcon>
 					<ActionIcon
-						className={actionIconClasses.editButton}
+						className={actionIconClasses.themeEditButton}
 						classNames={actionIconClasses}
 						onClick={() => handleOpen(cardTheme)}
 						mb={2}
@@ -232,7 +238,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 						<FiEdit color='green' />
 					</ActionIcon>
 					<ActionIcon
-						className={actionIconClasses.editButton}
+						className={actionIconClasses.themeEditButton}
 						classNames={actionIconClasses}
 						onClick={() => handleDeleteTheme(cardTheme)}
 					>

src/pages/settings/components/ThemeModal.tsx

@@ -7,7 +7,6 @@ import {
 	Group,
 	Image,
 	Modal,
-	OptionalPortal,
 	Select,
 	Stack,
 	Text,
@@ -153,35 +152,32 @@ function ThemeModal({
 								/>
 							</Group>
 							<Group justify='space-between'>
-								<OptionalPortal withinPortal={false}>
-									<Select
-										data={backgroundList}
-										className={selectClasses.select}
-										classNames={selectClasses}
-										label='Background Image'
-										value={selectedTheme.backgroundImage}
-										renderOption={(value) => {
-											return (
-												<Group h={'100%'} w={'100%'} justify='space-between'>
-													{value.option.value}
-													{value.option.value && value.option.value !== 'None' && (
-														<Image
-															h={'28px'}
-															w={'50px'}
-															src={`/backgrounds/${value.option.value}`}
-														/>
-													)}
-												</Group>
-											);
-										}}
-										onChange={(value) =>
-											setSelectedTheme({
-												...selectedTheme,
-												backgroundImage: value,
-											})
-										}
-									/>
-								</OptionalPortal>
+								<Select
+									data={backgroundList}
+									classNames={selectClasses}
+									label='Background Image'
+									value={selectedTheme.backgroundImage}
+									renderOption={(value) => {
+										return (
+											<Group h={'100%'} w={'100%'} justify='space-between'>
+												{value.option.value}
+												{value.option.value && value.option.value !== 'None' && (
+													<Image
+														h={'28px'}
+														w={'50px'}
+														src={`/backgrounds/${value.option.value}`}
+													/>
+												)}
+											</Group>
+										);
+									}}
+									onChange={(value) =>
+										setSelectedTheme({
+											...selectedTheme,
+											backgroundImage: value,
+										})
+									}
+								/>
 							</Group>
 						</Stack>
 						<Stack h={'100%'} w={'50%'} align='center' justify='center'>

src/pages/settings/components/Themes.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useCommonHooks, useMutationAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiChevronRight, FiPlus } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
@@ -10,6 +10,12 @@ import { buttonClasses, textClasses } from 'styles';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
 function ThemesSettings() {
+	const { data: allThemes } = useQueryAPI({
+		endpoint: 'api/themes',
+	});
+	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
+		endpoint: 'api/backgrounds',
+	});
 	const [opened, { open, close }] = useDisclosure(false);
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
@@ -20,21 +26,13 @@ function ThemesSettings() {
 	const { mutateAsync: createTheme } = useMutationAPI();
 	const { mutateAsync: deleteTheme } = useMutationAPI();
 
-	const {
-		currentTheme,
-		setCurrentTheme,
-		backgrounds,
-		isBackgroundFetched,
-		isMobile,
-		theme,
-		allThemes,
-	} = useCommonHooks();
+	const { currentTheme, setCurrentTheme, isMobile, theme } = useCommonHooks();
 
 	useEffect(() => {
-		if (backgrounds && isBackgroundFetched) {
-			setBackgroundList(['None', ...backgrounds]);
+		if (backgroundData && isBackgroundFetched) {
+			setBackgroundList(['None', ...backgroundData]);
 		}
-	}, [backgrounds, isBackgroundFetched]);
+	}, [backgroundData, isBackgroundFetched]);
 
 	const handleOpen = (theme: any) => {
 		setSelectedTheme(theme);
@@ -162,6 +160,7 @@ function ThemesSettings() {
 								}}
 							>
 								<ThemeCard
+									allThemes={allThemes}
 									cardTheme={cardTheme}
 									handleOpen={handleOpen}
 									handleDeleteTheme={handleDeleteTheme}

src/pages/settings/components/WolClients.tsx

@@ -1,11 +1,26 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, WolClientColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
 const WolClientSettings = () => {
 	const endpoint = 'api/wolClients';
-	const { wolClientsData, wolClientsIsFetching, wolClientsIsLoading } = useCommonHooks();
+	const {
+		data: wolClientsData,
+		isFetched: wolClientsIsFetched,
+		isFetching: wolClientsIsFetching,
+		isLoading: wolClientsIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [wolClients, setWolClients] = useState<any>([]);
+
+	useEffect(() => {
+		if (wolClientsData && wolClientsIsFetched) {
+			setWolClients(wolClientsData);
+		}
+	}, [wolClientsData, wolClientsIsFetched]);
 
 	return (
 		<Stack>
@@ -15,7 +30,7 @@ const WolClientSettings = () => {
 			<DataTable
 				tableName='WoL Clients'
 				columns={WolClientColumns()}
-				tableData={wolClientsData}
+				tableData={wolClients}
 				isFetching={wolClientsIsFetching}
 				isLoading={wolClientsIsLoading}
 				endpoint={endpoint}