New Weather Modal

src/pages/homepage/Homepage.tsx

@@ -4,6 +4,7 @@ import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { stackClasses } from 'styles';
 import type { CurrentWeather, OutlookWeather } from 'types';
+import type { ExtendedForecast } from 'types/weather';
 import Applications from './components/Applications/Applications';
 import Bookmarks from './components/Bookmarks/Bookmarks';
 import Header from './components/Header/Header';
@@ -106,14 +107,17 @@ export function Homepage() {
 	});
 	const [current, setCurrent] = useState<CurrentWeather>({
 		icon: '',
+		textDescription: '',
 		temperature: 0,
 		highTemp: 0,
 		lowTemp: 0,
 		precipitation: 'N/A',
 		humidity: 0,
-		heatIndex: 0,
+		heatIndex: null,
+		windChill: null,
 		windSpeed: 0,
 		windDirection: 0,
+		pressure: 0,
 	});
 	const [outlook, setOutlook] = useState<OutlookWeather[]>([
 		{
@@ -126,11 +130,22 @@ export function Homepage() {
 			windDirection: 'N',
 		},
 	]);
+	const [extendedForecast, setExtendedForecast] = useState<ExtendedForecast[]>([
+		{
+			detailedForecast: '',
+			isDaytime: true,
+			name: '',
+			shortForecast: '',
+			temperature: 0,
+			temperatureUnit: 'F',
+		},
+	]);
 
 	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,
 				),
@@ -143,13 +158,23 @@ export function Homepage() {
 				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 !== null
-						? (weather.features[0]?.properties.heatIndex.value * 9) / 5 + 32
-						: (weather.features[0]?.properties.temperature.value * 9) / 5 + 32,
-				),
+				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]);
@@ -179,6 +204,16 @@ export function Homepage() {
 					windDirection: forecast.properties.periods[1].windDirection,
 				},
 			]);
+			setExtendedForecast(
+				forecast.properties.periods.map((item: any) => ({
+					detailedForecast: item.detailedForecast,
+					isDaytime: item.isDaytime,
+					name: item.name,
+					shortForecast: item.shortForecast,
+					temperature: item.temperature,
+					temperatureUnit: item.temperatureUnit,
+				})),
+			);
 			setCurrentLocation({
 				office: points?.properties.gridId,
 				station: stations?.features[0].properties.stationIdentifier,
@@ -189,11 +224,13 @@ export function Homepage() {
 			});
 		}
 	}, [forecast]);
+
 	return (
 		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search
 				current={current}
 				outlook={outlook}
+				extendedForecast={extendedForecast}
 				weather={weather}
 				basicWeather={basicWeather}
 				weatherModalOpened={weatherModalOpened}
@@ -206,6 +243,7 @@ export function Homepage() {
 				current={current}
 				setCurrent={setCurrent}
 				outlook={outlook}
+				extendedForecast={extendedForecast}
 				weather={weather}
 				basicWeather={basicWeather}
 				weatherModalOpened={weatherModalOpened}

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

@@ -10,6 +10,7 @@ function Header({
 	current,
 	setCurrent,
 	outlook,
+	extendedForecast,
 	weather,
 	basicWeather,
 	weatherModalOpened,
@@ -154,6 +155,7 @@ function Header({
 			<WeatherModal
 				current={current}
 				outlook={outlook}
+				extendedForecast={extendedForecast}
 				closeWeatherModal={closeWeatherModal}
 				weatherModalOpened={weatherModalOpened}
 			/>

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

@@ -8,6 +8,7 @@ import { textInputClasses } from 'styles';
 export default function Search({
 	current,
 	outlook,
+	extendedForecast,
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
@@ -161,6 +162,7 @@ export default function Search({
 			<WeatherModal
 				current={current}
 				outlook={outlook}
+				extendedForecast={extendedForecast}
 				closeWeatherModal={closeWeatherModal}
 				weatherModalOpened={weatherModalOpened}
 			/>