Refactoring theme files

src/pages/homepage/Homepage.tsx

@@ -19,6 +19,25 @@ import Search from './components/Search/Search';
 import SettingsButton from './components/SettingsButton/SettingsButton';
 
 export function Homepage() {
+	const {
+		appFilter,
+		bookmarkFilter,
+		isMobile,
+		setCurrentUser,
+		currentLocation,
+		setCurrentLocation,
+	} = useCommonHooks();
+	const dateOptions: Intl.DateTimeFormatOptions = !isMobile
+		? {
+				weekday: 'long',
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric',
+			}
+		: {};
+
+	const date = new Date().toLocaleDateString('en-US', dateOptions);
+
 	const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({
 		endpoint: 'api/personalData',
 	});
@@ -29,58 +48,6 @@ export function Homepage() {
 	} = useQueryAPI({
 		endpoint: 'api/displayedGreeting',
 	});
-	const {
-		appFilter,
-		bookmarkFilter,
-		isMobile,
-		setCurrentUser,
-		currentLocation,
-		setCurrentLocation,
-	} = useCommonHooks();
-	const [personal, setPersonal] = useState<PersonalData>();
-	const [message, setMessage] = useState<Message>();
-	const [displayedGreeting, setDisplayedGreeting] = useState<string | undefined>('');
-	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 (messageData && isMessagesFetched) {
-			setMessage(messageData[0]);
-		}
-	}, [messageData, isMessagesFetched]);
-	useEffect(() => {
-		if (personalData && personalIsFetched) {
-			setCurrentUser(personalData[0]);
-			setPersonal(personalData[0]);
-		}
-	}, [personalData, personalIsFetched]);
-	useEffect(() => {
-		if (personal) {
-			setDisplayedGreeting(() => {
-				if (Math.floor(Math.random() * 100) > 10 || message === undefined) {
-					switch (Math.floor(new Date().getHours() / 6)) {
-						case 0:
-							return `Good night, ${personal?.firstName}!`;
-						case 1:
-							return `Good morning, ${personal?.firstName}!`;
-						case 2:
-							return `Good afternoon, ${personal?.firstName}!`;
-						case 3:
-							return `Good evening, ${personal?.firstName}!`;
-					}
-				}
-				return message?.message;
-			});
-		}
-	}, [message, personal, isMessagesFetching]);
 	const { data: weatherMetadata } = useOSMAPI({
 		address: personalData?.[0]?.physicalAddress,
 	});
@@ -112,6 +79,10 @@ export function Homepage() {
 		x: points?.properties.gridX ?? currentLocation.x,
 		y: points?.properties.gridY ?? currentLocation.y,
 	});
+
+	const [personal, setPersonal] = useState<PersonalData>();
+	const [message, setMessage] = useState<Message>();
+	const [displayedGreeting, setDisplayedGreeting] = useState<string | undefined>('');
 	const [current, setCurrent] = useState<CW>({
 		icon: '',
 		textDescription: '',
@@ -126,7 +97,6 @@ export function Homepage() {
 		windDirection: 0,
 		pressure: 0,
 	});
-
 	const [extendedForecast, setExtendedForecast] = useState<EF[]>([
 		{
 			detailedForecast: '',
@@ -137,6 +107,39 @@ export function Homepage() {
 			temperatureUnit: 'F',
 		},
 	]);
+	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
+		useDisclosure(false);
+
+	useEffect(() => {
+		if (messageData && isMessagesFetched) {
+			setMessage(messageData[0]);
+		}
+	}, [messageData, isMessagesFetched]);
+	useEffect(() => {
+		if (personalData && personalIsFetched) {
+			setCurrentUser(personalData[0]);
+			setPersonal(personalData[0]);
+		}
+	}, [personalData, personalIsFetched]);
+	useEffect(() => {
+		if (personal) {
+			setDisplayedGreeting(() => {
+				if (Math.floor(Math.random() * 100) > 10 || message === undefined) {
+					switch (Math.floor(new Date().getHours() / 6)) {
+						case 0:
+							return `Good night, ${personal?.firstName}!`;
+						case 1:
+							return `Good morning, ${personal?.firstName}!`;
+						case 2:
+							return `Good afternoon, ${personal?.firstName}!`;
+						case 3:
+							return `Good evening, ${personal?.firstName}!`;
+					}
+				}
+				return message?.message;
+			});
+		}
+	}, [message, personal, isMessagesFetching]);
 	useEffect(() => {
 		if (weather !== undefined && basicWeather !== undefined) {
 			setCurrent({
@@ -221,9 +224,6 @@ export function Homepage() {
 						greet={displayedGreeting}
 						date={date}
 						current={current}
-						setCurrent={setCurrent}
-						weather={weather}
-						basicWeather={basicWeather}
 						openWeatherModal={openWeatherModal}
 					/>
 					<Applications contentType={appFilter} />
@@ -232,13 +232,7 @@ export function Homepage() {
 			) : (
 				<>
 					<Stack align='center'>
-						<LargeHeader
-							greet={displayedGreeting}
-							date={date}
-							weather={weather}
-							basicWeather={basicWeather}
-							setCurrent={setCurrent}
-						/>
+						<LargeHeader greet={displayedGreeting} date={date} />
 						<Grid grow columns={24} pos={'absolute'} bottom={'1rem'} w={'50%'}>
 							<CurrentWeather current={current} />
 						</Grid>

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

@@ -15,29 +15,35 @@ function Applications({ contentType }: { contentType: string[] }) {
 	useEffect(() => {
 		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;
-					}
-				}),
+				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;
+						}
+					})
+					?.filter(
+						(application: Application) =>
+							contentType.includes(application.filterName) || contentType.includes('All'),
+					),
 			);
 		}
-	}, [applicationData, isApplicationDataFetching, appSort]);
+	}, [applicationData, isApplicationDataFetching, appSort, contentType]);
+
 	return (
 		<>
 			{applications.length > 0 && contentType.length > 0 && (
@@ -60,25 +66,19 @@ function Applications({ contentType }: { contentType: string[] }) {
 							gridTemplateColumns: `repeat(${appDensity}, 1fr)`,
 						}}
 					>
-						{applications
-							?.filter(
-								(application: Application) =>
-									contentType.includes(application.filterName) ||
-									contentType.includes('All'),
-							)
-							.map((application: Application) => {
-								return (
-									<AppItem
-										key={application.name}
-										name={application.name}
-										url={application.url}
-										icon={application.icon}
-										enabled={application.enabled}
-										scale={appScale}
-										linksActive
-									/>
-								);
-							})}
+						{applications.map((application: Application) => {
+							return (
+								<AppItem
+									key={application.name}
+									name={application.name}
+									url={application.url}
+									icon={application.icon}
+									enabled={application.enabled}
+									scale={appScale}
+									linksActive
+								/>
+							);
+						})}
 					</Stack>
 				</Stack>
 			)}

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

@@ -28,29 +28,34 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 				return category;
 			});
 			setGroups(
-				groupList.sort((a: BookmarkGroup, b: BookmarkGroup) => {
-					switch (bookmarkSort) {
-						case 'A>Z':
-							return a.categoryName > b.categoryName ? 1 : -1;
-						case 'Z>A':
-							return a.categoryName < b.categoryName ? 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.categoryIndex > b.categoryIndex ? 1 : -1;
-					}
-				}),
+				groupList
+					.sort((a: BookmarkGroup, b: BookmarkGroup) => {
+						switch (bookmarkSort) {
+							case 'A>Z':
+								return a.categoryName > b.categoryName ? 1 : -1;
+							case 'Z>A':
+								return a.categoryName < b.categoryName ? 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.categoryIndex > b.categoryIndex ? 1 : -1;
+						}
+					})
+					?.filter(
+						(category: BookmarkGroup) =>
+							contentType.includes(category.filterName) || contentType.includes('All'),
+					),
 			);
 		}
-	}, [groupData, groupsIsFetched, bookmarkSort]);
+	}, [groupData, groupsIsFetched, bookmarkSort, contentType]);
 
 	return (
 		<>
@@ -79,26 +84,18 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 								gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
 							}}
 						>
-							{groups
-								?.filter(
-									(category: BookmarkGroup) =>
-										contentType.includes(category.filterName) ||
-										contentType.includes('All'),
-								)
-
-								.map((category: BookmarkGroup) => {
-									return (
-										<BookmarkGroups
-											key={category.categoryName}
-											category={category.categoryName}
-											bookmarks={bookmarks.filter(
-												(bookmark: Bookmark) =>
-													bookmark.category === category.categoryName,
-											)}
-											bookmarkScale={bookmarkScale}
-										/>
-									);
-								})}
+							{groups.map((category: BookmarkGroup) => {
+								return (
+									<BookmarkGroups
+										key={category.categoryName}
+										category={category.categoryName}
+										bookmarks={bookmarks.filter(
+											(bookmark: Bookmark) => bookmark.category === category.categoryName,
+										)}
+										bookmarkScale={bookmarkScale}
+									/>
+								);
+							})}
 						</Stack>
 					</Stack>
 				)}

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

@@ -8,17 +8,11 @@ function Header({
 	greet,
 	date,
 	current,
-	setCurrent,
-	weather,
-	basicWeather,
 	openWeatherModal,
 }: {
 	greet: string | undefined;
 	date: string;
 	current: CurrentWeather;
-	setCurrent: (current: CurrentWeather) => void;
-	weather: any;
-	basicWeather: any;
 	openWeatherModal: () => void;
 }) {
 	const [time, setTime] = useState(new Date());
@@ -30,43 +24,6 @@ function Header({
 			setTime(newDate);
 		}, 1000);
 	}, []);
-	useEffect(() => {
-		if (weather !== undefined && basicWeather !== undefined) {
-			setCurrent({
-				icon: weather.features[0]?.properties.icon?.replace('medium', 'large') ?? '',
-				textDescription: weather.features[0]?.properties.textDescription,
-				temperature: Math.round(
-					(weather.features[0]?.properties.temperature.value * 9) / 5 + 32,
-				),
-				highTemp: Math.round(
-					(basicWeather.properties.maxTemperature.values[0].value * 9) / 5 + 32,
-				),
-				lowTemp: Math.round(
-					(basicWeather.properties.minTemperature.values[0].value * 9) / 5 + 32,
-				),
-				precipitation:
-					weather.features[0]?.properties.precipitationLastHour.value ?? 'N/A',
-				humidity: Math.round(weather.features[0]?.properties.relativeHumidity.value),
-				heatIndex:
-					basicWeather.properties.heatIndex?.values[0].value === null
-						? null
-						: Math.round(
-								(basicWeather.properties.heatIndex.values[0].value * 9) / 5 + 32,
-							),
-				windChill:
-					basicWeather.properties.windChill?.values[0].value === null
-						? null
-						: Math.round(
-								(basicWeather.properties.windChill.values[0].value * 9) / 5 + 32,
-							),
-				windSpeed: Math.round(weather.features[0]?.properties.windSpeed.value / 1.60934),
-				windDirection: weather.features[0]?.properties.windDirection.value,
-				pressure: Math.round(
-					weather.features[0]?.properties.barometricPressure.value / 3386.38,
-				),
-			});
-		}
-	}, [weather, basicWeather]);
 
 	return (
 		<Stack

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

@@ -2,21 +2,8 @@ import { Stack, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
-import type { CurrentWeather as CW } from 'types';
 
-function LargeHeader({
-	greet,
-	date,
-	setCurrent,
-	weather,
-	basicWeather,
-}: {
-	greet: string | undefined;
-	date: string;
-	weather: any;
-	basicWeather: any;
-	setCurrent: (current: CW) => void;
-}) {
+function LargeHeader({ greet, date }: { greet: string | undefined; date: string }) {
 	const [time, setTime] = useState(new Date());
 	const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
 
@@ -27,44 +14,6 @@ function LargeHeader({
 		}, 1000);
 	}, []);
 
-	useEffect(() => {
-		if (weather !== undefined && basicWeather !== undefined) {
-			setCurrent({
-				icon: weather.features[0]?.properties.icon?.replace('medium', 'large') ?? '',
-				textDescription: weather.features[0]?.properties.textDescription,
-				temperature: Math.round(
-					(weather.features[0]?.properties.temperature.value * 9) / 5 + 32,
-				),
-				highTemp: Math.round(
-					(basicWeather.properties.maxTemperature.values[0].value * 9) / 5 + 32,
-				),
-				lowTemp: Math.round(
-					(basicWeather.properties.minTemperature.values[0].value * 9) / 5 + 32,
-				),
-				precipitation:
-					weather.features[0]?.properties.precipitationLastHour.value ?? 'N/A',
-				humidity: Math.round(weather.features[0]?.properties.relativeHumidity.value),
-				heatIndex:
-					basicWeather.properties.heatIndex?.values[0].value === null
-						? null
-						: Math.round(
-								(basicWeather.properties.heatIndex.values[0].value * 9) / 5 + 32,
-							),
-				windChill:
-					basicWeather.properties.windChill?.values[0].value === null
-						? null
-						: Math.round(
-								(basicWeather.properties.windChill.values[0].value * 9) / 5 + 32,
-							),
-				windSpeed: Math.round(weather.features[0]?.properties.windSpeed.value / 1.60934),
-				windDirection: weather.features[0]?.properties.windDirection.value,
-				pressure: Math.round(
-					weather.features[0]?.properties.barometricPressure.value / 3386.38,
-				),
-			});
-		}
-	}, [weather, basicWeather]);
-
 	return (
 		<Stack gap={0} pos={'absolute'} align='center' justify='center' top={0}>
 			<Text