diff --git a/src/components/WeatherModal/CurrentWeather.tsx b/src/components/WeatherModal/CurrentWeather.tsx
index 1857bf8..1a3c516 100644
--- a/src/components/WeatherModal/CurrentWeather.tsx
+++ b/src/components/WeatherModal/CurrentWeather.tsx
@@ -6,7 +6,7 @@ import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
import WeatherIcon from './WeatherIcon';
-export default function CurrentWeather({ weather }: any) {
+export default function CurrentWeather({ current }: any) {
const { currentLocation } = useCommonHooks();
const { data: sunStateData } = useSunStateAPI({
lat: currentLocation.lat,
@@ -28,184 +28,192 @@ export default function CurrentWeather({ weather }: any) {
);
}
}, [sunStateData]);
+
return (
-
-
-
+ {current ? (
+
- Current Weather
-
-
-
-
-
-
-
- {weather.temperature}°F
+
+
+ Current Weather
-
- {weather.textDescription}
-
-
-
-
- Feels like {weather.heatIndex ?? weather.windChill ?? weather.temperature}°
- F
-
-
-
-
+
+
+
+
+ {current.temperature}°F
+
+
+
-
-
-
-
-
- {weather.highTemp}°F
+ {current.textDescription}
-
-
-
-
-
-
-
+
+
- {weather.lowTemp}°F
+ Feels like {current.heatIndex ?? current.windChill ?? current.temperature}
+ °F
-
-
-
-
-
-
-
-
-
- {sunStates[0]?.sunrise}
-
-
-
-
-
-
-
- {sunStates[0]?.sunset}
-
-
-
-
-
-
-
-
-
- Humidity
-
-
- {weather.humidity}%
-
-
-
-
-
-
-
-
-
- Wind
-
-
- {weather.windSpeed}mph
-
-
-
-
-
-
-
-
-
- Pressure
-
-
- {weather.pressure} in
-
-
+
+
+
+
+
+
+
+
+ {current.highTemp}°F
+
+
+
+
+
+
+
+
+
+ {current.lowTemp}°F
+
+
+
+
+
+
+
+
+
+
+ {sunStates[0]?.sunrise}
+
+
+
+
+
+
+
+ {sunStates[0]?.sunset}
+
+
+
+
+
+
+
+
+
+ Humidity
+
+
+ {current.humidity}%
+
+
+
+
+
+
+
+
+
+ Wind
+
+
+ {current.windSpeed}mph
+
+
+
+
+
+
+
+
+
+ Pressure
+
+
+ {current.pressure} in
+
+
+
+
-
-
+ ) : (
+ <>
+ )}
+
);
}
diff --git a/src/components/WeatherModal/WeatherModal.tsx b/src/components/WeatherModal/WeatherModal.tsx
index 3d9bf07..e68065a 100644
--- a/src/components/WeatherModal/WeatherModal.tsx
+++ b/src/components/WeatherModal/WeatherModal.tsx
@@ -79,7 +79,7 @@ export function WeatherModal({
-
+
diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx
index a92ddad..a064f32 100644
--- a/src/pages/homepage/Homepage.tsx
+++ b/src/pages/homepage/Homepage.tsx
@@ -1,13 +1,15 @@
-import { Stack } from '@mantine/core';
+import { Grid, Stack } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
+import CurrentWeather from 'components/WeatherModal/CurrentWeather';
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 type { CurrentWeather as CW, OutlookWeather } from 'types';
+import type { ExtendedForecast as EF } from 'types/weather';
import Applications from './components/Applications/Applications';
import Bookmarks from './components/Bookmarks/Bookmarks';
import Header from './components/Header/Header';
+import LargeHeader from './components/Header/LargeHeader';
import Search from './components/Search/Search';
import SettingsButton from './components/SettingsButton';
@@ -105,7 +107,7 @@ export function Homepage() {
x: points?.properties.gridX || currentLocation.x,
y: points?.properties.gridY || currentLocation.y,
});
- const [current, setCurrent] = useState({
+ const [current, setCurrent] = useState({
icon: '',
textDescription: '',
temperature: 0,
@@ -130,7 +132,7 @@ export function Homepage() {
windDirection: 'N',
},
]);
- const [extendedForecast, setExtendedForecast] = useState([
+ const [extendedForecast, setExtendedForecast] = useState([
{
detailedForecast: '',
isDaytime: true,
@@ -224,34 +226,73 @@ export function Homepage() {
});
}
}, [forecast]);
-
return (
-
-
-
-
-
+ 0 || bookmarkFilter.length > 0 ? undefined : '100%'}
+ className={stackClasses.containerStack}
+ justify='center'
+ >
+ {appFilter.length > 0 || bookmarkFilter.length > 0 ? (
+ <>
+
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+ )}
);
diff --git a/src/pages/homepage/components/Header/Header.tsx b/src/pages/homepage/components/Header/Header.tsx
index 88f7208..daa81c4 100644
--- a/src/pages/homepage/components/Header/Header.tsx
+++ b/src/pages/homepage/components/Header/Header.tsx
@@ -38,6 +38,7 @@ function Header({
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,
),
@@ -50,11 +51,23 @@ function Header({
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,
- ),
+ 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]);
diff --git a/src/pages/homepage/components/Header/LargeHeader.tsx b/src/pages/homepage/components/Header/LargeHeader.tsx
new file mode 100644
index 0000000..dcac551
--- /dev/null
+++ b/src/pages/homepage/components/Header/LargeHeader.tsx
@@ -0,0 +1,103 @@
+import { Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import { useEffect, useState } from 'react';
+import { textClasses } from 'styles';
+
+function LargeHeader({ greet, date, setCurrent, weather, basicWeather }: any) {
+ const [time, setTime] = useState(new Date());
+ const { isMobile, currentUser } = useCommonHooks();
+
+ function fixDigits(k: any) {
+ if (k < 10) {
+ return `0${k}`;
+ }
+ return k;
+ }
+
+ useEffect(() => {
+ setInterval(() => {
+ const newDate = new Date();
+ 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 (
+
+
+ {greet
+ .replace('$firstName', currentUser.firstName)
+ .replace('$lastName', currentUser.lastName)
+ .replace('$^firstName', currentUser.firstName.toUpperCase())
+ .replace('$^lastName', currentUser.lastName.toUpperCase())}
+
+
+ {date}
+
+
+ {`${
+ time.getHours() === 0
+ ? 12
+ : time.getHours() > 12
+ ? time.getHours() - 12
+ : time.getHours()
+ }:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
+
+
+ );
+}
+
+export default LargeHeader;