Refactored common hooks to reduce api calls

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>