Updated names for uniformity

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -31,21 +31,23 @@ import {
 import type { AppCategory, Theme, ThemePlaylist, WolClient } from 'types';
 
 function SettingsButton() {
-	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
-	const { data: wolClients, isFetched: wolClientsIsFetched } = useQueryAPI({
+	const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({
+		endpoint: 'api/appCategories',
+	});
+	const { data: wolClientData, isFetched: wolClientDataIsFetched } = useQueryAPI({
 		endpoint: 'api/wolClients',
 	});
-	const [wolClientsData, setWolClientsData] = useState<WolClient[]>([]);
-	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
+	const [wolClients, setWolClients] = useState<WolClient[]>([]);
+	const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
-	const { data: themePlaylists } = useQueryAPI({
+	const { data: themePlaylistData } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
 	const { mutateAsync } = useMutationAPI();
-	const [allThemeData, setAllThemeData] = useState<Theme[]>([]);
+	const [allThemes, setAllThemes] = useState<Theme[]>([]);
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
-	const [selectedClient, setSelectedClient] = useState<WolClient>(wolClients?.[0]);
+	const [selectedClient] = useState<WolClient>(wolClientData?.[0]);
 	const [overlayOpened, setOverlayOpened] = useState(false);
 	const navigate = useNavigate();
 	const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
@@ -75,7 +77,7 @@ function SettingsButton() {
 		mutateAsync({
 			method: 'POST',
 			endpoint: 'api/wakeClient',
-			body: selectedClient || wolClients?.[0],
+			body: selectedClient || wolClientData?.[0],
 		});
 	};
 
@@ -86,26 +88,26 @@ function SettingsButton() {
 	};
 
 	useEffect(() => {
-		if (data) {
-			const list: [any] = data.map((category: AppCategory) => {
+		if (appCategoryData) {
+			const list: [any] = appCategoryData.map((category: AppCategory) => {
 				return { value: category.filterName, label: category.filterName };
 			});
 			list.unshift({ value: 'All', label: 'All' });
 			setCategories(list);
 		}
-	}, [data, isFetched]);
+	}, [appCategoryData, appCategoryDataIsFetched]);
 
 	useEffect(() => {
-		if (wolClients && wolClientsIsFetched) {
-			setWolClientsData(wolClients);
+		if (wolClientData && wolClientDataIsFetched) {
+			setWolClients(wolClientData);
 		}
-	}, [wolClients, wolClientsIsFetched]);
+	}, [wolClientData, wolClientDataIsFetched]);
 
 	useEffect(() => {
-		if (allThemes && isAllThemesFetched) {
-			setAllThemeData(allThemes);
+		if (allThemeData && allThemeDataIsFetched) {
+			setAllThemes(allThemeData);
 		}
-	}, [allThemes, isAllThemesFetched]);
+	}, [allThemeData, allThemeDataIsFetched]);
 	return (
 		<>
 			{overlayOpened && <Overlay pos={'fixed'} />}
@@ -146,7 +148,7 @@ function SettingsButton() {
 								<Button
 									classNames={buttonClasses}
 									className={buttonClasses.wakeButton}
-									disabled={!wolClientsData?.length || selectedClient === null}
+									disabled={!wolClients?.length || selectedClient === null}
 									onClick={() => {
 										handleWakeRequest();
 										notify('Wake command sent');
@@ -159,9 +161,9 @@ function SettingsButton() {
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Pick a host...'
-									defaultValue={wolClientsData?.[0]?.hostname}
+									defaultValue={wolClients?.[0]?.hostname}
 									data={
-										wolClientsData
+										wolClients
 											?.map((wolClient: WolClient) => {
 												return {
 													value: wolClient.hostname,
@@ -227,7 +229,7 @@ function SettingsButton() {
 											}}
 											onClick={() => {
 												setCurrentThemePlaylist('All');
-												handleThemeChange(allThemeData, true);
+												handleThemeChange(allThemes, true);
 											}}
 										>
 											<FaDice />
@@ -246,7 +248,7 @@ function SettingsButton() {
 									placeholder='Pick a playlist...'
 									value={currentThemePlaylist}
 									data={
-										themePlaylists
+										themePlaylistData
 											?.map((playlist: ThemePlaylist) => {
 												return {
 													value: playlist.name,
@@ -271,12 +273,12 @@ function SettingsButton() {
 											setThemeName('random');
 										} else {
 											const themeList = JSON.parse(
-												themePlaylists.find(
+												themePlaylistData.find(
 													(t: ThemePlaylist) => t.name === 'Time of Day',
 												).themeList,
 											);
 											setThemeName(
-												allThemes.find(
+												allThemeData.find(
 													(t: Theme) =>
 														t.id ===
 														Number(themeList[Math.floor(new Date().getHours() / 6)]),