TriggerFrontend/src/pages/homepage/Homepage.tsx

import { Stack } from '@mantine/core';
import { useDisclosure, useLocalStorage } from '@mantine/hooks';
import { useEffect, useState } from 'react';
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' });
	const [displayedGreeting, setDisplayedGreeting] = useState('');
	const [appFilter, setAppFilter] = useLocalStorage<[any]>({
		key: 'appFilter',
		defaultValue: ['All'],
	});
	const [bookmarkFilter, setBookmarkFilter] = useLocalStorage<[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();
		const dateOptions: Intl.DateTimeFormatOptions = !isMobile
			? {
					weekday: 'long',
					year: 'numeric',
					month: 'long',
					day: 'numeric',
				}
			: {};
		const date = currentDate.toLocaleDateString('en-US', dateOptions);
		return date;
	}
	function greet(list: any) {
		const currentTime = new Date();
		const greet = Math.floor(currentTime.getHours() / 6);
		const easterEggChance = Math.floor(Math.random() * 100);
		let timeBased: any = [];
		let customGreetings: any = [];
		for (const l of list) {
			if (l.customGreeting === 0) {
				timeBased = timeBased.concat(l);
			} else {
				customGreetings = customGreetings.concat(l);
			}
		}
		if (easterEggChance > 10 || customGreetings.length === 0) {
			return timeBased[greet].message;
		}
		return customGreetings[Math.floor(Math.random() * customGreetings.length)].message;
	}

	useEffect(() => {
		if (data) {
			setDisplayedGreeting(greet(data));
		}
	}, [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 !== null ?
					(weather.features[0].properties.heatIndex.value * 9) / 5 + 32
					: (weather.features[0].properties.temperature.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
				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
				theme={theme}
				setAppFilter={setAppFilter}
				appFilter={appFilter}
				setBookmarkFilter={setBookmarkFilter}
				bookmarkFilter={bookmarkFilter}
			/>
		</Stack>
	);
}