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>