Slight refactor

src/pages/homepage/Homepage.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mantine/core';
-import { useDisclosure, useLocalStorage } from '@mantine/hooks';
-import { date, greet, useQueryAPI, useWeatherAPI } from 'hooks';
+import { useDisclosure } from '@mantine/hooks';
+import { date, greet, useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { stackClasses } from 'styles';
 import type { CurrentWeather, OutlookWeather } from 'types';
@@ -10,21 +10,18 @@ import Header from './components/Header/Header';
 import Search from './components/Search/Search';
 import SettingsButton from './components/SettingsButton';
 
-export function Homepage({ theme }: any) {
-	const [appFilter, setAppFilter] = useLocalStorage<[any]>({
-		key: 'appFilter',
-		defaultValue: ['All'],
-	});
-	const [bookmarkFilter, setBookmarkFilter] = useLocalStorage<[any]>({
-		key: 'bookmarkFilter',
-		defaultValue: ['All'],
-	});
-	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
-	const { data: basicWeather } = useWeatherAPI({ endpoint: 'baseline' });
-	const { data: weather } = useWeatherAPI({ endpoint: 'current' });
-	const { data: forecast } = useWeatherAPI({ endpoint: 'forecast' });
-	const { data: hourly } = useWeatherAPI({ endpoint: 'hourly' });
+export function Homepage() {
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
+	const {
+		appFilter,
+		bookmarkFilter,
+		isMobile,
+		messages,
+		isMessagesFetching,
+		weather,
+		basicWeather,
+		forecast,
+	} = useCommonHooks();
 	const [current, setCurrent] = useState<CurrentWeather>({
 		icon: '',
 		temperature: 0,
@@ -47,17 +44,14 @@ export function Homepage({ theme }: any) {
 			windDirection: 'N',
 		},
 	]);
-	const isMobile = window.matchMedia('(max-width: 600px)').matches;
 	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
 		useDisclosure(false);
-	const [providerLabel, setProviderLabel] = useState('Google Search');
-	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
-	const [value, setValue] = useState('');
+
 	useEffect(() => {
-		if (data) {
-			setDisplayedGreeting(greet(data));
+		if (messages) {
+			setDisplayedGreeting(greet(messages));
 		}
-	}, [data, isFetching]);
+	}, [messages, isMessagesFetching]);
 
 	useEffect(() => {
 		if (weather && basicWeather) {
@@ -119,19 +113,7 @@ export function Homepage({ theme }: any) {
 		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search
 				current={current}
-				setCurrent={setCurrent}
 				outlook={outlook}
-				setOutlook={setOutlook}
-				weather={weather}
-				basicWeather={basicWeather}
-				forecast={forecast}
-				hourly={hourly}
-				providerLabel={providerLabel}
-				setProviderLabel={setProviderLabel}
-				providerURL={providerURL}
-				setProviderURL={setProviderURL}
-				value={value}
-				setValue={setValue}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}
@@ -139,30 +121,16 @@ export function Homepage({ theme }: any) {
 			<Header
 				date={date(isMobile)}
 				greet={displayedGreeting}
-				isMobile={isMobile}
 				current={current}
 				setCurrent={setCurrent}
 				outlook={outlook}
-				weather={weather}
-				basicWeather={basicWeather}
-				forecast={forecast}
-				hourly={hourly}
-				setProviderLabel={setProviderLabel}
-				setProviderURL={setProviderURL}
-				setValue={setValue}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}
 			/>
-			<Applications contentType={appFilter} isMobile={isMobile} />
-			<Bookmarks contentType={bookmarkFilter} isMobile={isMobile} />
-			<SettingsButton
-				theme={theme}
-				setAppFilter={setAppFilter}
-				appFilter={appFilter}
-				setBookmarkFilter={setBookmarkFilter}
-				bookmarkFilter={bookmarkFilter}
-			/>
+			<Applications contentType={appFilter} />
+			<Bookmarks contentType={bookmarkFilter} />
+			<SettingsButton />
 		</Stack>
 	);
 }