Standardized

src/App.tsx

@@ -28,16 +28,12 @@ function App() {
 		endpoint: 'api/themes',
 	});
 	const { theme, setTheme, themeName, handleThemeChange } = useCommonHooks();
-	useEffect(() => {
-		if (allThemes && themeName) {
-			if (themeName !== 'random') {
-				const temp = allThemes.find((t: any) => t.name === themeName);
-				setTheme(temp);
-			} else {
-				handleThemeChange(allThemes, false);
-			}
-		}
-	}, [isAllThemesFetched, themeName]);
+	const overrides = createTheme({
+		white: theme?.backgroundColor,
+		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
+	});
+	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
+
 	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
@@ -55,11 +51,18 @@ function App() {
 			</Route>,
 		),
 	);
-	const overrides = createTheme({
-		white: theme?.backgroundColor,
-		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
-	});
-	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
+
+	useEffect(() => {
+		if (allThemes && themeName) {
+			if (themeName !== 'random') {
+				const temp = allThemes.find((t: any) => t.name === themeName);
+				setTheme(temp);
+			} else {
+				handleThemeChange(allThemes, false);
+			}
+		}
+	}, [isAllThemesFetched, themeName]);
+
 	return (
 		<>
 			{theme && (

src/components/WeatherModal/WeatherModal.tsx

@@ -14,25 +14,27 @@ export function WeatherModal({
 	closeWeatherModal,
 	weatherModalOpened,
 }: any) {
-	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+	const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({
 		endpoint: 'api/personalData',
 	});
-	const [personalData, setPersonalData] = useState<any>([]);
 	const { data: hourly } = useWeatherAPI({
 		endpoint: 'hourly',
 		office: points?.properties.gridId,
 		x: points?.properties.gridX,
 		y: points?.properties.gridY,
 	});
-	useEffect(() => {
-		if (personal && personalIsFetched) {
-			setPersonalData(personal);
-		}
-	}, [personal, personalIsFetched]);
+	const [personal, setPersonal] = useState<any>([]);
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
 	const [sunset, setSunset] = useState(100);
 	const { theme, isMobile, setProviderLabel, setSearchValue, setProviderURL } =
 		useCommonHooks();
+
+	useEffect(() => {
+		if (personalData && personalIsFetched) {
+			setPersonal(personalData);
+		}
+	}, [personalData, personalIsFetched]);
+
 	useEffect(() => {
 		if (hourly) {
 			setHourlyForecast(hourly.properties.periods.slice(1, 13));
@@ -51,6 +53,7 @@ export function WeatherModal({
 					);
 		}
 	}, [hourlyForecast]);
+
 	return (
 		<Modal.Root
 			fullScreen={isMobile}
@@ -84,7 +87,7 @@ export function WeatherModal({
 								Weather Forecast for{' '}
 							</Text>
 							<Text fz={18} fw={600}>
-								{personalData?.[0]?.physicalAddress}
+								{personal?.[0]?.physicalAddress}
 							</Text>
 						</Group>
 					</Modal.Title>

src/hooks/useCommonHooks.ts

@@ -25,6 +25,7 @@ export function useCommonHooks() {
 	const [searchValue, setSearchValue] = useState('');
 	const [providerLabel, setProviderLabel] = useState('Google Search');
 	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
+
 	const handleThemeChange = (themes: any, save: any) => {
 		const enabled = themes
 			.filter((t: any) => t.randomEnabled)

src/pages/homepage/Homepage.tsx

@@ -14,7 +14,6 @@ export function Homepage() {
 	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
 		endpoint: 'api/personalData',
 	});
-	const [personalData, setPersonalData] = useState<any>([]);
 	const {
 		data: messageData,
 		isFetching: isMessagesFetching,
@@ -22,7 +21,21 @@ export function Homepage() {
 	} = useQueryAPI({
 		endpoint: 'api/messages',
 	});
+	const [personalData, setPersonalData] = useState<any>([]);
 	const [messages, setMessages] = useState<any>([]);
+	const [displayedGreeting, setDisplayedGreeting] = useState('');
+	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
+		useDisclosure(false);
+	const { appFilter, bookmarkFilter, isMobile } = useCommonHooks();
+	const dateOptions: Intl.DateTimeFormatOptions = !isMobile
+		? {
+				weekday: 'long',
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric',
+			}
+		: {};
+	const date = new Date().toLocaleDateString('en-US', dateOptions);
 
 	useEffect(() => {
 		if (messageData && isMessagesFetched) {
@@ -34,21 +47,6 @@ export function Homepage() {
 			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) {

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

@@ -8,14 +8,15 @@ function Applications({ contentType }: any) {
 	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
 		endpoint: 'api/apps',
 	});
-	const { isMobile } = useCommonHooks();
 	const [applicationData, setApplicationData] = useState<any>([]);
+	const { isMobile } = useCommonHooks();
 
 	useEffect(() => {
 		if (apps && !isAppsFetching) {
 			setApplicationData(apps);
 		}
 	}, [apps, isAppsFetching]);
+
 	return (
 		<>
 			{applicationData.length > 0 && contentType.length > 0 && (

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

@@ -12,8 +12,9 @@ function Links({ contentType }: any) {
 		endpoint: 'api/categories',
 	});
 	const [bookmarkData, setBookmarkData] = useState<any>([]);
-
 	const [groups, setGroups] = useState([]);
+	const { isMobile } = useCommonHooks();
+
 	useEffect(() => {
 		if (linkData && linksIsFetched) {
 			setBookmarkData(linkData);
@@ -28,7 +29,6 @@ function Links({ contentType }: any) {
 			setGroups(groupList);
 		}
 	}, [groupData, groupsIsFetched]);
-	const { isMobile } = useCommonHooks();
 
 	return (
 		<>

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

@@ -20,10 +20,10 @@ function Header({
 	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
 		endpoint: 'api/personalData',
 	});
-
 	const [personalData, setPersonalData] = useState<any>([]);
-	const { isMobile } = useCommonHooks();
 	const [time, setTime] = useState(new Date());
+	const { isMobile } = useCommonHooks();
+
 	function fixDigits(k: any) {
 		if (k < 10) {
 			return `0${k}`;
@@ -68,6 +68,7 @@ function Header({
 			});
 		}
 	}, [weather, basicWeather]);
+
 	return (
 		<Stack
 			style={{

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

@@ -16,15 +16,9 @@ export default function Search({
 	const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
 		endpoint: 'api/providers',
 	});
-
 	const [providerData, setProviderData] = useState<any>([]);
-
-	useEffect(() => {
-		if (providers && providersIsFetched) {
-			setProviderData(providers);
-		}
-	}, [providers, providersIsFetched]);
-
+	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
+		useDisclosure(false);
 	const {
 		providerLabel,
 		setProviderLabel,
@@ -34,9 +28,6 @@ export default function Search({
 		setSearchValue,
 	} = useCommonHooks();
 
-	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
-		useDisclosure(false);
-
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
@@ -78,6 +69,12 @@ export default function Search({
 		}
 	};
 
+	useEffect(() => {
+		if (providers && providersIsFetched) {
+			setProviderData(providers);
+		}
+	}, [providers, providersIsFetched]);
+
 	return (
 		<Stack
 			style={{

src/pages/homepage/components/SettingsButton.tsx

@@ -34,10 +34,14 @@ function SettingsButton() {
 	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
-	const [allThemeData, setAllThemeData] = useState<any>([]);
+
 	const { mutateAsync: wakeRequest } = useMutationAPI();
+	const [allThemeData, setAllThemeData] = useState<any>([]);
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
+	const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]);
+	const [overlayOpened, setOverlayOpened] = useState(false);
 	const navigate = useNavigate();
+	const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
 	const {
 		currentTheme,
 		setCurrentTheme,
@@ -50,10 +54,6 @@ function SettingsButton() {
 		isMobile,
 	} = useCommonHooks();
 
-	const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
-
-	const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]);
-	const [overlayOpened, setOverlayOpened] = useState(false);
 	const handleWakeRequest = () => {
 		wakeRequest({
 			method: 'POST',

src/pages/settings/Settings.tsx

@@ -25,6 +25,7 @@ import WolClients from './components/WolClients';
 export function Settings() {
 	const { isMobile } = useCommonHooks();
 	const navigate = useNavigate();
+
 	return (
 		<Stack px={'2rem'}>
 			<Group gap={0}>

src/pages/settings/components/Applications.tsx

@@ -11,7 +11,7 @@ const ApplicationSettings = () => {
 		isFetching: isAppsFetching,
 		isLoading: isAppsLoading,
 	} = useQueryAPI({
-		endpoint: 'api/apps',
+		endpoint: endpoint,
 	});
 	const [applicationData, setApplicationData] = useState<any>([]);
 

src/pages/settings/components/Bookmarks.tsx

@@ -11,14 +11,14 @@ const BookmarkSettings = () => {
 		isFetching: linksIsFetching,
 		isLoading: linksIsLoading,
 	} = useQueryAPI({
-		endpoint: 'api/links',
+		endpoint: endpoint,
 	});
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/categories',
 	});
 	const [bookmarkData, setBookmarkData] = useState<any>([]);
-
 	const [groups, setGroups] = useState([]);
+
 	useEffect(() => {
 		if (linkData && linksIsFetched) {
 			setBookmarkData(linkData);

src/pages/settings/components/Categories.tsx

@@ -13,7 +13,6 @@ const CategorySettings = () => {
 	} = useQueryAPI({
 		endpoint: endpoint,
 	});
-
 	const [groups, setGroups] = useState([]);
 
 	useEffect(() => {
@@ -24,6 +23,7 @@ const CategorySettings = () => {
 			setGroups(groupList);
 		}
 	}, [groupData, groupsIsFetched]);
+
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>

src/pages/settings/components/Messages.tsx

@@ -20,6 +20,7 @@ const MessageSettings = () => {
 			setMessages(messageData);
 		}
 	}, [messageData, isMessagesFetched]);
+
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>

src/pages/settings/components/Personalization.tsx

@@ -14,11 +14,13 @@ const PersonalizationSettings = () => {
 		endpoint: endpoint,
 	});
 	const [personal, setPersonal] = useState<any>([]);
+
 	useEffect(() => {
 		if (personalData && personalIsFetched) {
 			setPersonal(personalData);
 		}
 	}, [personalData, personalIsFetched]);
+
 	return (
 		<>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>

src/pages/settings/components/SearchProviders.tsx

@@ -14,7 +14,6 @@ const SearchProviderSettings = () => {
 	} = useQueryAPI({
 		endpoint: endpoint,
 	});
-
 	const [providerData, setProviderData] = useState<any>([]);
 
 	useEffect(() => {

src/pages/settings/components/ThemeCard.tsx

@@ -14,6 +14,7 @@ function ThemeCard({
 	const [hover, setHover] = useState(false);
 	const [shift, setShift] = useState<number>(0);
 	const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks();
+
 	return (
 		<Group
 			gap={0}

src/pages/settings/components/ThemeModal.tsx

@@ -33,6 +33,7 @@ function ThemeModal({
 	handleSaveTheme,
 }: any) {
 	const { theme } = useCommonHooks();
+
 	return (
 		<Modal.Root
 			size={'50%'}

src/pages/settings/components/ThemeModalContent.tsx

@@ -6,6 +6,7 @@ import { stackClasses } from 'styles';
 export default function ThemeModalContent({ selectedTheme }: any) {
 	const ExampleApp = (previewTheme: any) => {
 		const [textDecoration, setTextDecoration] = useState<string>('none');
+
 		return (
 			<Box
 				component='a'
@@ -69,6 +70,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 			</Box>
 		);
 	};
+
 	return (
 		<Stack
 			style={{

src/pages/settings/components/Themes.tsx

@@ -16,23 +16,15 @@ function ThemesSettings() {
 	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>('');
-	const [colorValue, setColorValue] = useState('#000000');
-
-	const [backgroundList, setBackgroundList] = useState<any>(['None']);
-	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	const { mutateAsync: createTheme } = useMutationAPI();
 	const { mutateAsync: deleteTheme } = useMutationAPI();
-
-	const { currentTheme, setCurrentTheme, isMobile, theme } = useCommonHooks();
-
-	useEffect(() => {
-		if (backgroundData && isBackgroundFetched) {
-			setBackgroundList(['None', ...backgroundData]);
-		}
-	}, [backgroundData, isBackgroundFetched]);
+	const [opened, { open, close }] = useDisclosure(false);
+	const [colorId, setColorId] = useState<string>('');
+	const [colorValue, setColorValue] = useState('#000000');
+	const [backgroundList, setBackgroundList] = useState<any>(['None']);
+	const [selectedTheme, setSelectedTheme] = useState<any>({});
+	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
+	const { currentTheme, setCurrentTheme, theme } = useCommonHooks();
 
 	const handleOpen = (theme: any) => {
 		setSelectedTheme(theme);
@@ -66,6 +58,12 @@ function ThemesSettings() {
 		openDeleteConfirmModal(theme);
 		close();
 	};
+
+	useEffect(() => {
+		if (backgroundData && isBackgroundFetched) {
+			setBackgroundList(['None', ...backgroundData]);
+		}
+	}, [backgroundData, isBackgroundFetched]);
 	return (
 		<>
 			<ThemeModal