Updated names for uniformity

src/pages/homepage/Homepage.tsx

@@ -19,7 +19,7 @@ import Search from './components/Search/Search';
 import SettingsButton from './components/SettingsButton/SettingsButton';
 
 export function Homepage() {
-	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+	const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({
 		endpoint: 'api/personalData',
 	});
 	const {
@@ -27,7 +27,7 @@ export function Homepage() {
 		isFetching: isMessagesFetching,
 		isFetched: isMessagesFetched,
 	} = useQueryAPI({
-		endpoint: 'api/messages',
+		endpoint: 'api/displayedGreeting',
 	});
 	const {
 		appFilter,
@@ -37,8 +37,8 @@ export function Homepage() {
 		currentLocation,
 		setCurrentLocation,
 	} = useCommonHooks();
-	const [personalData, setPersonalData] = useState<PersonalData>();
-	const [messages, setMessages] = useState<Message[]>([]);
+	const [personal, setPersonal] = useState<PersonalData>();
+	const [message, setMessage] = useState<Message>();
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
 	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
 		useDisclosure(false);
@@ -53,36 +53,36 @@ export function Homepage() {
 	const date = new Date().toLocaleDateString('en-US', dateOptions);
 	useEffect(() => {
 		if (messageData && isMessagesFetched) {
-			setMessages(messageData);
+			setMessage(messageData[0]);
 		}
 	}, [messageData, isMessagesFetched]);
 	useEffect(() => {
-		if (personal && personalIsFetched) {
-			setCurrentUser(personal[0]);
-			setPersonalData(personal[0]);
+		if (personalData && personalIsFetched) {
+			setCurrentUser(personalData[0]);
+			setPersonal(personalData[0]);
 		}
-	}, [personal, personalIsFetched]);
+	}, [personalData, personalIsFetched]);
 	useEffect(() => {
-		if (messages && personalData) {
+		if (message !== undefined && personal) {
 			setDisplayedGreeting(() => {
-				if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) {
+				if (Math.floor(Math.random() * 100) > 10 || message === undefined) {
 					switch (Math.floor(new Date().getHours() / 6)) {
 						case 0:
-							return `Good night, ${personalData?.firstName}!`;
+							return `Good night, ${personal?.firstName}!`;
 						case 1:
-							return `Good morning, ${personalData?.firstName}!`;
+							return `Good morning, ${personal?.firstName}!`;
 						case 2:
-							return `Good afternoon, ${personalData?.firstName}!`;
+							return `Good afternoon, ${personal?.firstName}!`;
 						case 3:
-							return `Good evening, ${personalData?.firstName}!`;
+							return `Good evening, ${personal?.firstName}!`;
 					}
 				}
-				return messages[Math.floor(Math.random() * messages.length)].message;
+				return message.message;
 			});
 		}
-	}, [messages, personalData, isMessagesFetching]);
+	}, [message, personal, isMessagesFetching]);
 	const { data: weatherMetadata } = useOSMAPI({
-		address: personal?.[0]?.physicalAddress,
+		address: personalData?.[0]?.physicalAddress,
 	});
 	const { data: points } = useWeatherAPI({
 		endpoint: 'points',

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

@@ -6,46 +6,42 @@ import type { Application } from 'types';
 import AppItem from './AppItem';
 
 function Applications({ contentType }: { contentType: string[] }) {
-	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
-		endpoint: 'api/apps',
+	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
+		endpoint: 'api/enabledApplications',
 	});
 	const { isMobile, appSort, appDensity } = useCommonHooks();
-	const [applicationData, setApplicationData] = useState<Application[]>([]);
+	const [applications, setApplications] = useState<Application[]>([]);
 
 	useEffect(() => {
-		if (apps && !isAppsFetching) {
-			setApplicationData(
-				apps
-					.filter((a: Application) => a.enabled === 1)
-					.sort((a: Application, b: Application) => {
-						switch (appSort) {
-							case 'A>Z':
-								return a.name > b.name ? 1 : -1;
-							case 'Z>A':
-								return a.name < b.name ? 1 : -1;
-							case 'Newest':
-								if (a.id && b.id) {
-									return a.id < b.id ? 1 : -1;
-								}
-
-								return -1;
-							case 'Oldest':
-								if (a.id && b.id) {
-									return a.id > b.id ? 1 : -1;
-								}
-
-								return -1;
-							case 'Custom':
-								return a.index > b.index ? 1 : -1;
-						}
-					}),
+		if (applicationData && !isApplicationDataFetching) {
+			setApplications(
+				applicationData.sort((a: Application, b: Application) => {
+					switch (appSort) {
+						case 'A>Z':
+							return a.name > b.name ? 1 : -1;
+						case 'Z>A':
+							return a.name < b.name ? 1 : -1;
+						case 'Newest':
+							if (a.id && b.id) {
+								return a.id < b.id ? 1 : -1;
+							}
+							return -1;
+						case 'Oldest':
+							if (a.id && b.id) {
+								return a.id > b.id ? 1 : -1;
+							}
+							return -1;
+						case 'Custom':
+							return a.index > b.index ? 1 : -1;
+					}
+				}),
 			);
 		}
-	}, [apps, isAppsFetching, appSort]);
+	}, [applicationData, isApplicationDataFetching, appSort]);
 	return (
 		<>
-			{applicationData.length > 0 && contentType.length > 0 && (
-				<Stack id='apps' style={{ gap: 0 }}>
+			{applications.length > 0 && contentType.length > 0 && (
+				<Stack style={{ gap: 0 }}>
 					<Text className={textClasses.sectionTitle} classNames={textClasses}>
 						Applications
 					</Text>
@@ -63,7 +59,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 							gridTemplateRows: '64px',
 						}}
 					>
-						{applicationData
+						{applications
 							?.filter(
 								(application: Application) =>
 									contentType.includes(application.filterName) ||

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

@@ -1,9 +1,12 @@
 import { Stack, Text } from '@mantine/core';
 import { textClasses } from 'styles';
 import type { Bookmark } from 'types';
-import LinkItem from './LinkItem';
+import BookmarkItem from './BookmarkItem';
 
-function LinkGroups({ links, category }: { links: Bookmark[]; category: string }) {
+function BookmarkGroups({
+	bookmarks,
+	category,
+}: { bookmarks: Bookmark[]; category: string }) {
 	return (
 		<Stack
 			style={{
@@ -14,16 +17,16 @@ function LinkGroups({ links, category }: { links: Bookmark[]; category: string }
 				whiteSpace: 'nowrap',
 			}}
 		>
-			<Text className={textClasses.linkCategory} classNames={textClasses}>
+			<Text className={textClasses.bookmarkCategory} classNames={textClasses}>
 				{category}
 			</Text>
-			{links
+			{bookmarks
 				?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))
-				.map((link: Bookmark) => (
-					<LinkItem key={link.name} link={link} />
+				.map((bookmark: Bookmark) => (
+					<BookmarkItem key={bookmark.name} bookmark={bookmark} />
 				))}
 		</Stack>
 	);
 }
 
-export default LinkGroups;
+export default BookmarkGroups;

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

@@ -2,17 +2,17 @@ import { Text } from '@mantine/core';
 import { textClasses } from 'styles';
 import type { Bookmark } from 'types';
 
-function LinkItem({ link }: { link: Bookmark }) {
+function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
 	return (
 		<Text
-			className={textClasses.linkItem}
+			className={textClasses.bookmarkItem}
 			classNames={textClasses}
 			component='a'
-			href={link.url}
+			href={bookmark.url}
 		>
-			{link.name}
+			{bookmark.name}
 		</Text>
 	);
 }
 
-export default LinkItem;
+export default BookmarkItem;

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

@@ -3,24 +3,24 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
-import LinkGroups from './LinkGroups';
+import BookmarkGroups from './BookmarkGroups';
 
-function Links({ contentType }: { contentType: string[] }) {
-	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
-		endpoint: 'api/links',
+function Bookmarks({ contentType }: { contentType: string[] }) {
+	const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
+		endpoint: 'api/bookmarks',
 	});
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
-		endpoint: 'api/categories',
+		endpoint: 'api/bookmarkCategories',
 	});
 	const { isMobile, bookmarkSort, bookmarkDensity } = useCommonHooks();
-	const [bookmarkData, setBookmarkData] = useState<Bookmark[]>([]);
+	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
 	useEffect(() => {
-		if (linkData && linksIsFetched) {
-			setBookmarkData(linkData);
+		if (bookmarkData && bookmarksIsFetched) {
+			setBookmarks(bookmarkData);
 		}
-	}, [linksIsFetched, linkData]);
+	}, [bookmarksIsFetched, bookmarkData]);
 
 	useEffect(() => {
 		if (groupData && groupsIsFetched) {
@@ -57,10 +57,10 @@ function Links({ contentType }: { contentType: string[] }) {
 	return (
 		<>
 			{groupsIsFetched &&
-				linksIsFetched &&
+				bookmarksIsFetched &&
 				groups?.length > 0 &&
 				contentType.length > 0 && (
-					<Stack id='links' style={{ gap: 0 }}>
+					<Stack style={{ gap: 0 }}>
 						<Text className={textClasses.sectionTitle} classNames={textClasses}>
 							Bookmarks
 						</Text>
@@ -85,10 +85,10 @@ function Links({ contentType }: { contentType: string[] }) {
 
 								.map((category: BookmarkGroup) => {
 									return (
-										<LinkGroups
+										<BookmarkGroups
 											key={category.categoryName}
 											category={category.categoryName}
-											links={bookmarkData.filter(
+											bookmarks={bookmarks.filter(
 												(bookmark: Bookmark) =>
 													bookmark.category === category.categoryName,
 											)}
@@ -102,4 +102,4 @@ function Links({ contentType }: { contentType: string[] }) {
 	);
 }
 
-export default Links;
+export default Bookmarks;

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

@@ -30,7 +30,6 @@ function Header({
 			setTime(newDate);
 		}, 1000);
 	}, []);
-
 	useEffect(() => {
 		if (weather !== undefined && basicWeather !== undefined) {
 			setCurrent({
@@ -92,7 +91,7 @@ function Header({
 					fz={isMobile ? 24 : undefined}
 				>
 					{greet
-						.replace('$firstName', currentUser.firstName)
+						?.replace('$firstName', currentUser.firstName)
 						.replace('$lastName', currentUser.lastName)
 						.replace('$^firstName', currentUser.firstName.toUpperCase())
 						.replace('$^lastName', currentUser.lastName.toUpperCase())}

src/pages/homepage/components/Search/Search.tsx

@@ -33,16 +33,17 @@ export default function Search({
 	closeWeatherModal: () => void;
 	openWeatherModal: () => void;
 }) {
-	const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
+	const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
 		endpoint: 'api/providers',
 	});
-	const [providerData, setProviderData] = useState<Provider[]>([]);
-	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
-		endpoint: 'api/apps',
+	const [providers, setProviders] = useState<Provider[]>([]);
+	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
+		endpoint: 'api/enabledApplications',
 	});
-	const [applicationData, setApplicationData] = useState<Application[]>([]);
-	const { data: history, isFetched: historyIsFetched } = useQueryAPI({
-		endpoint: 'api/searchHistory',
+	const [applications, setApplications] = useState<Application[]>([]);
+	const searchEndpoint = 'api/searchHistory';
+	const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
+		endpoint: searchEndpoint,
 	});
 	const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
 	const [filteredHistory, setFilteredHistory] = useState<SearchHistoryItem[]>([]);
@@ -69,7 +70,7 @@ export default function Search({
 
 	const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
 		const url =
-			providers.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
+			providerData.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
 			'https://www.google.com/search?q=';
 		open(`${url}${option.searchTerm}`, '_self');
 	};
@@ -99,7 +100,7 @@ export default function Search({
 			} else if (item.target.value.startsWith('/')) {
 				mutateAsync({
 					method: 'POST',
-					endpoint: 'api/searchHistory',
+					endpoint: searchEndpoint,
 					body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
 				}).then(() => {
 					open(`${providerURL}${subtext}`, '_self');
@@ -107,7 +108,7 @@ export default function Search({
 			} else if (providerLabel === 'Show weather') {
 				openWeatherModal();
 			} else if (providerLabel.startsWith('Launch')) {
-				const url = applicationData.find(
+				const url = applications.find(
 					(app: Application) =>
 						app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
 				)?.url;
@@ -123,7 +124,7 @@ export default function Search({
 			} else {
 				mutateAsync({
 					method: 'POST',
-					endpoint: 'api/searchHistory',
+					endpoint: searchEndpoint,
 					body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
 				}).then(() => {
 					open(`${providerURL}${subtext}`, '_self');
@@ -221,7 +222,7 @@ export default function Search({
 			setProviderURL('https://www.google.com/search?q=');
 			setProviderPrefix('/g');
 		} else if (item.target.value.startsWith('/')) {
-			const provider = providerData?.find(
+			const provider = providers?.find(
 				(p: Provider) => p.prefix === item.target.value.split(' ')[0],
 			);
 			setProviderLabel(provider?.name ?? 'Invalid Search');
@@ -231,7 +232,7 @@ export default function Search({
 			if (item.target.value === '!w' || item.target.value === '!weather') {
 				setProviderLabel('Show weather');
 			} else if (
-				applicationData?.find(
+				applications?.find(
 					(app: Application) =>
 						app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
 				)
@@ -250,7 +251,7 @@ export default function Search({
 	const optionsFilter: OptionsFilter = ({ options, search }) => {
 		const splittedSearch = search.toLowerCase().trim().split(' ');
 		if (splittedSearch[0].startsWith('!')) {
-			return apps
+			return applicationData
 				.filter((app: Application) =>
 					app.name.toLowerCase().includes(splittedSearch[0].substring(1).toLowerCase()),
 				)
@@ -341,7 +342,7 @@ export default function Search({
 								e.stopPropagation();
 								mutateAsync({
 									method: 'DELETE',
-									endpoint: 'api/searchHistory',
+									endpoint: searchEndpoint,
 									body: { id: item.option.id },
 								});
 							}}
@@ -392,25 +393,25 @@ export default function Search({
 	}
 
 	useEffect(() => {
-		if (providers && providersIsFetched) {
-			setProviderData(providers);
+		if (providerData && providerDataIsFetched) {
+			setProviders(providerData);
 		}
-	}, [providers, providersIsFetched]);
+	}, [providerData, providerDataIsFetched]);
 
 	useEffect(() => {
-		if (apps && !isAppsFetching) {
-			setApplicationData(apps);
+		if (applicationData && !isApplicationDataFetching) {
+			setApplications(applicationData);
 		}
-	}, [apps, isAppsFetching]);
+	}, [applicationData, isApplicationDataFetching]);
 
 	useEffect(() => {
-		if (history && historyIsFetched) {
-			setSearchHistory(history);
+		if (historyData && historyDataIsFetched) {
+			setSearchHistory(historyData);
 			if (filteredHistory.length === 0) {
-				setFilteredHistory(history.slice(0, 10));
+				setFilteredHistory(historyData.slice(0, 10));
 			}
 		}
-	}, [history, historyIsFetched]);
+	}, [historyData, historyDataIsFetched]);
 
 	useEffect(() => {
 		if (dropdownOpened) {
@@ -494,8 +495,8 @@ export default function Search({
 				setSearchValue={setSearchValue}
 				setProviderLabel={setProviderLabel}
 				setProviderURL={setProviderURL}
-				applicationData={applicationData}
-				providerData={providerData}
+				applicationData={applications}
+				providerData={providers}
 				providerModalOpened={providerModalOpened}
 				closeProviderModal={closeProviderModal}
 			/>

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)]),