Hourly forecast

src/pages/homepage/Homepage.tsx

@@ -1,13 +1,14 @@
 import { Stack } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
+import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
-import { useQueryAPI } from '../../hooks/useAPI';
+import { useQueryAPI, useWeatherAPI } from '../../hooks/useAPI';
 import stackClasses from '../../styles/Stack.module.css';
 import Applications from './components/Applications';
 import Bookmarks from './components/Bookmarks';
 import Header from './components/Header';
 import Search from './components/Search';
 import SettingsButton from './components/SettingsButton';
+import type { CurrentWeather, OutlookWeather } from './types/weather';
 
 export default function Homepage({ theme }: any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
@@ -20,6 +21,34 @@ export default function Homepage({ theme }: any) {
 		key: 'bookmarkFilter',
 		defaultValue: ['All'],
 	});
+	const { data: basicWeather } = useWeatherAPI({ endpoint: 'baseline' });
+	const { data: weather } = useWeatherAPI({ endpoint: 'current' });
+	const [current, setCurrent] = useState<CurrentWeather>({
+		icon: '',
+		temperature: 0,
+		highTemp: 0,
+		lowTemp: 0,
+		precipitation: 'N/A',
+		humidity: 0,
+		heatIndex: 0,
+		windSpeed: 0,
+		windDirection: 0,
+	});
+	const [outlook, setOutlook] = useState<OutlookWeather[]>([
+		{
+			name: '',
+			icon: '',
+			isDayTime: true,
+			temperature: 0,
+			precipitation: 0,
+			windSpeed: '0 mph',
+			windDirection: 'N',
+		},
+	]);
+	const { data: forecast } = useWeatherAPI({ endpoint: 'forecast' });
+	const { data: hourly } = useWeatherAPI({ endpoint: 'hourly' });
+	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
+		useDisclosure(false);
 	const isMobile = window.matchMedia('(max-width: 600px)').matches;
 	function date() {
 		const currentDate = new Date();
@@ -59,10 +88,90 @@ export default function Homepage({ theme }: any) {
 		}
 	}, [isFetching]);
 
+	useEffect(() => {
+		if (weather && basicWeather) {
+			setCurrent({
+				icon: weather.features[0].properties.icon?.replace('medium', 'large') || '',
+				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: Math.round(
+					(weather.features[0].properties.heatIndex.value * 9) / 5 + 32,
+				),
+				windSpeed: Math.round(weather.features[0].properties.windSpeed.value / 1.60934),
+				windDirection: weather.features[0].properties.windDirection.value,
+			});
+		}
+	}, [weather, basicWeather]);
+
+	useEffect(() => {
+		if (forecast) {
+			setOutlook([
+				{
+					name: forecast.properties.periods[0].name,
+					icon: forecast.properties.periods[0].icon.replace('medium', 'large'),
+					isDayTime: forecast.properties.periods[0].isDaytime,
+					temperature: forecast.properties.periods[0].temperature,
+					precipitation: Math.round(
+						forecast.properties.periods[0].probabilityOfPrecipitation.value,
+					),
+					windSpeed: forecast.properties.periods[0].windSpeed,
+					windDirection: forecast.properties.periods[0].windDirection,
+				},
+				{
+					name: forecast.properties.periods[1].name,
+					icon: forecast.properties.periods[1].icon.replace('medium', 'large'),
+					isDayTime: forecast.properties.periods[1].isDaytime,
+					temperature: forecast.properties.periods[1].temperature,
+					precipitation: Math.round(
+						forecast.properties.periods[1].probabilityOfPrecipitation.value,
+					),
+					windSpeed: forecast.properties.periods[1].windSpeed,
+					windDirection: forecast.properties.periods[1].windDirection,
+				},
+			]);
+		}
+	}, [forecast]);
+
 	return (
 		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
-			<Search />
-			<Header date={date()} greet={displayedGreeting} isMobile={isMobile} />
+			<Search
+				current={current}
+				setCurrent={setCurrent}
+				outlook={outlook}
+				setOutlook={setOutlook}
+				weather={weather}
+				basicWeather={basicWeather}
+				forecast={forecast}
+				hourly={hourly}
+				weatherModalOpened={weatherModalOpened}
+				closeWeatherModal={closeWeatherModal}
+				openWeatherModal={openWeatherModal}
+			/>
+			<Header
+				date={date()}
+				greet={displayedGreeting}
+				isMobile={isMobile}
+				current={current}
+				outlook={outlook}
+				setCurrent={setCurrent}
+				weather={weather}
+				basicWeather={basicWeather}
+				forecast={forecast}
+				hourly={hourly}
+				weatherModalOpened={weatherModalOpened}
+				closeWeatherModal={closeWeatherModal}
+				openWeatherModal={openWeatherModal}
+			/>
 			<Applications contentType={appFilter} isMobile={isMobile} />
 			<Bookmarks contentType={bookmarkFilter} isMobile={isMobile} />
 			<SettingsButton