150 lines
4.0 KiB
TypeScript
150 lines
4.0 KiB
TypeScript
import { Group, Stack, Text } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { textClasses } from 'styles';
|
|
import type { CurrentWeather } from 'types';
|
|
|
|
function Header({
|
|
greet,
|
|
date,
|
|
current,
|
|
setCurrent,
|
|
weather,
|
|
basicWeather,
|
|
openWeatherModal,
|
|
}: {
|
|
greet: string | undefined;
|
|
date: string;
|
|
current: CurrentWeather;
|
|
setCurrent: (current: CurrentWeather) => void;
|
|
weather: any;
|
|
basicWeather: any;
|
|
openWeatherModal: () => void;
|
|
}) {
|
|
const [time, setTime] = useState(new Date());
|
|
const { isMobile, currentUser, fixDigits } = useCommonHooks();
|
|
|
|
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 (
|
|
<Stack
|
|
style={{
|
|
flexDirection: isMobile ? 'column' : 'row',
|
|
}}
|
|
justify='space-between'
|
|
>
|
|
<Stack w={'fit-content'} pos={'relative'}>
|
|
<Text
|
|
className={textClasses.greeting}
|
|
classNames={textClasses}
|
|
fz={isMobile ? 24 : undefined}
|
|
>
|
|
{greet
|
|
?.replace('$firstName', currentUser.firstName)
|
|
.replace('$lastName', currentUser.lastName)
|
|
.replace('$^firstName', currentUser.firstName.toUpperCase())
|
|
.replace('$^lastName', currentUser.lastName.toUpperCase())}
|
|
</Text>
|
|
</Stack>
|
|
<Stack
|
|
style={{
|
|
gap: 0,
|
|
flexDirection: isMobile ? 'row' : 'column',
|
|
}}
|
|
>
|
|
<Text
|
|
className={textClasses.dateTime}
|
|
classNames={textClasses}
|
|
style={{ width: 'max-content' }}
|
|
>
|
|
{date}
|
|
</Text>
|
|
<Group
|
|
style={{
|
|
position: 'relative',
|
|
justifyContent: isMobile ? 'right' : 'space-between',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Group
|
|
align='end'
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: isMobile ? -32 : 0,
|
|
right: 4,
|
|
cursor: 'pointer',
|
|
gap: 0,
|
|
}}
|
|
onClick={openWeatherModal}
|
|
>
|
|
<Text className={textClasses.dateTime} classNames={textClasses} mr={'.25rem'}>
|
|
{current.temperature}°F
|
|
</Text>
|
|
<Text
|
|
className={textClasses.dateTime}
|
|
classNames={textClasses}
|
|
fz={'.875rem'}
|
|
mb={'.375rem'}
|
|
>
|
|
{current.highTemp}°F/{current.lowTemp}°F
|
|
</Text>
|
|
</Group>
|
|
<Text className={textClasses.dateTime} classNames={textClasses}>
|
|
{`${
|
|
time.getHours() === 0
|
|
? 12
|
|
: time.getHours() > 12
|
|
? time.getHours() - 12
|
|
: time.getHours()
|
|
}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
|
|
</Text>
|
|
</Group>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default Header;
|