Refactor

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

@@ -0,0 +1,162 @@
+import { Group, Stack, Text } from '@mantine/core';
+import { WeatherModal } from 'components';
+import { useEffect, useState } from 'react';
+import { textClasses } from 'styles';
+
+function Header({
+	greet,
+	date,
+	isMobile,
+	current,
+	setCurrent,
+	weather,
+	basicWeather,
+	outlook,
+	hourly,
+	weatherModalOpened,
+	closeWeatherModal,
+	openWeatherModal,
+	setValue,
+	setProviderLabel,
+	setProviderURL,
+}: any) {
+	const [time, setTime] = useState(new Date());
+	function fixDigits(k: any) {
+		if (k < 10) {
+			return `0${k}`;
+		}
+		return k;
+	}
+
+	useEffect(() => {
+		setInterval(() => {
+			const nwDate = new Date();
+			setTime(nwDate);
+		}, 1000);
+	}, []);
+
+	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]);
+
+	return (
+		<Stack
+			style={{
+				borderBottom: '0px solid',
+				zIndex: '1',
+				clear: 'both',
+				display: 'flex',
+				flexDirection: isMobile ? 'column' : 'row',
+				gap: 0,
+			}}
+		>
+			<Stack
+				style={{
+					display: 'grid',
+					width: '100%',
+				}}
+			>
+				<Text
+					className={textClasses.greeting}
+					classNames={textClasses}
+					fz={isMobile && 24}
+				>
+					{greet}
+				</Text>
+			</Stack>
+			<Stack
+				style={{
+					display: 'flex',
+					float: 'right',
+					justifyContent: 'right',
+					width: 'auto',
+					gap: 0,
+					flexDirection: isMobile ? 'row' : 'column',
+				}}
+			>
+				<Text
+					className={textClasses.dateTime}
+					classNames={textClasses}
+					style={{ width: 'max-content' }}
+				>
+					{date}
+				</Text>
+				<Group
+					style={{
+						justifyContent: isMobile ? 'right' : 'space-between',
+						width: '100%',
+						gap: 0,
+					}}
+				>
+					{!isMobile && (
+						<Group
+							gap={0}
+							align='end'
+							style={{ display: 'flex' }}
+							onClick={openWeatherModal}
+						>
+							<Text
+								component='h2'
+								mr={4}
+								className={textClasses.dateTime}
+								classNames={textClasses}
+							>
+								{current.temperature}°F
+							</Text>
+							<Text
+								mb={6}
+								className={textClasses.dateTime}
+								classNames={textClasses}
+								fz={14}
+							>
+								{current.highTemp}°F/{current.lowTemp}°F
+							</Text>
+						</Group>
+					)}
+					<Text component='h2' 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>
+			<WeatherModal
+				current={current}
+				outlook={outlook}
+				hourly={hourly}
+				closeWeatherModal={closeWeatherModal}
+				weatherModalOpened={weatherModalOpened}
+				setValue={setValue}
+				setProviderLabel={setProviderLabel}
+				setProviderURL={setProviderURL}
+			/>
+		</Stack>
+	);
+}
+
+export default Header;