feat: added sunset and sunrise data

package.json

@@ -17,6 +17,7 @@
 		"@graphql-codegen/introspection": "4.0.0",
 		"@graphql-codegen/typescript": "4.0.1",
 		"@graphql-codegen/typescript-operations": "4.0.1",
+		"@types/suncalc": "^1.9.2",
 		"@typescript-eslint/eslint-plugin": "^6.6.0",
 		"@typescript-eslint/parser": "^6.6.0",
 		"autoprefixer": "^10.4.15",
@@ -48,7 +49,8 @@
 		"solid-headless": "^0.13.1",
 		"solid-icons": "1.0.4",
 		"solid-js": "^1.7.11",
-		"solid-slider": "^1.3.15"
+		"solid-slider": "^1.3.15",
+		"suncalc": "^1.9.0"
 	},
 	"volta": {
 		"node": "18.15.0"

src/components/WeatherElements.tsx

@@ -16,6 +16,7 @@ import WindElement from './weather-elements/WindElement'
 interface ParsedWeatherElementsProps {
 	airport: AirportSearchFragment
 	lastRefreshed: Date
+	isNight: boolean
 }
 
 const WeatherElements: Component<ParsedWeatherElementsProps> = props => {
@@ -138,6 +139,7 @@ const WeatherElements: Component<ParsedWeatherElementsProps> = props => {
 								skyConditions={latestMetar()!.skyConditions!}
 								previousSkyConditions={previousMetar()?.skyConditions ?? undefined}
 								airport={props.airport}
+								isNight={props.isNight}
 							/>
 						</Show>
 

src/components/weather-elements/SkyConditionsElement.tsx

@@ -101,6 +101,7 @@ interface SkyConditionsElementProps {
 	skyConditions: SkyConditionFragment[]
 	previousSkyConditions?: SkyConditionFragment[]
 	airport: AirportSearchFragment
+	isNight: boolean
 }
 
 const SkyConditionsElement: Component<SkyConditionsElementProps> = props => {
@@ -119,15 +120,7 @@ const SkyConditionsElement: Component<SkyConditionsElementProps> = props => {
 		() => props.previousSkyConditions?.map(x => x).sort((a, b) => (b.cloudBase ?? 0) - (a.cloudBase ?? 0))
 	)
 
-	const localHour = createMemo(() =>
-		parseInt(
-			new Date()
-				.toLocaleTimeString('en', { hour: '2-digit', hourCycle: 'h24', timeZone: props.airport.timezone ?? '' })
-				.substring(0, 2)
-		)
-	)
-
-	const isDayTime = () => localHour() >= 6 && localHour() <= 18
+	const isDayTime = () => !props.isNight
 
 	const unitConfiguration = (): ParsedWeatherElementLayoutProps['unitType'] => {
 		const configs: ParsedWeatherElementLayoutProps['unitType'] = []

src/layouts/WeatherElementLayout.tsx

@@ -107,7 +107,7 @@ const WeatherElementLayout: ParentComponent<ParsedWeatherElementLayoutProps> = p
 
 	return (
 		<div
-			class={`relative flex h-auto w-auto flex-grow flex-col justify-center gap-2 rounded-2xl bg-gray-50 px-8 py-6 text-black shadow-sm transition-colors dark:bg-black-200 dark:text-white-light md:mx-0 md:px-12 ${
+			class={`relative flex h-auto w-auto flex-grow flex-col justify-center gap-2 rounded-2xl bg-gray-50 px-8 py-6 text-black shadow-sm transition-colors dark:bg-black-200 dark:text-white-light md:mx-0 ${
 				props.class ?? ''
 			}`}>
 			<label class="mx-auto flex gap-1 text-xs font-semibold uppercase text-gray-500 transition-colors dark:text-white-darker">

src/pages/AirportSearchDetail.tsx

@@ -1,14 +1,16 @@
 import { debounce } from '@solid-primitives/scheduled'
 import { createScriptLoader } from '@solid-primitives/script-loader'
+import { Link } from '@solidjs/meta'
 import { useNavigate, useParams } from '@solidjs/router'
 import { CgWebsite } from 'solid-icons/cg'
 import { FiExternalLink } from 'solid-icons/fi'
 import { HiSolidClock } from 'solid-icons/hi'
 import { ImSpinner5 } from 'solid-icons/im'
 import { IoLocationSharp } from 'solid-icons/io'
-import { TbMountain } from 'solid-icons/tb'
+import { TbMountain, TbSunrise, TbSunset } from 'solid-icons/tb'
 import { Component, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
 import { createStore, reconcile } from 'solid-js/store'
+import * as SunCalc from 'suncalc'
 import AirportClassification from '../components/AirportClassification'
 import AirportsInVicinity from '../components/AirportsInVicinity'
 import DarkModeToggle from '../components/DarkModeToggle'
@@ -28,7 +30,6 @@ import {
 	GetSingleAirportQuery,
 	GetSingleAirportQueryVariables,
 } from '../queries/generated/graphql'
-import { Link, Meta } from '@solidjs/meta'
 
 const AirportSearchDetail: Component = () => {
 	const params = useParams()
@@ -44,6 +45,30 @@ const AirportSearchDetail: Component = () => {
 		airport: undefined,
 	})
 
+	const sunEvents = createMemo(() => {
+		if (!airportStore.airport || !airportStore.airport.latitude || !airportStore.airport.longitude) {
+			return undefined
+		}
+
+		const tomorrow = new Date()
+		tomorrow.setDate(tomorrow.getDate() + 1)
+
+		const suntimes = SunCalc.getTimes(now(), airportStore.airport?.latitude, airportStore.airport?.longitude)
+		const suntimesTomorrow = SunCalc.getTimes(
+			tomorrow,
+			airportStore.airport?.latitude,
+			airportStore.airport?.longitude
+		)
+
+		const nextSunrise = suntimes.sunrise.getTime() > now().getTime() ? suntimes.sunrise : suntimesTomorrow.sunrise
+		const nextSunset = suntimes.sunset.getTime() > now().getTime() ? suntimes.sunset : suntimesTomorrow.sunset
+
+		return { nextSunrise, nextSunset } as const
+	})
+
+	const isNight = () =>
+		sunEvents()!.nextSunrise.getTime() - now().getTime() < sunEvents()!.nextSunset.getTime() - now().getTime()
+
 	const [lastRefreshed, setLastRefreshed] = createSignal<Date>(new Date())
 	const [airportIdentifier, setAirportIdentifier] = createSignal<GetSingleAirportQueryVariables | false>(false)
 	const [airportRequest, { mutate, refetch: refetchAirport }] = newQuery<
@@ -267,6 +292,36 @@ const AirportSearchDetail: Component = () => {
 									{selectedHeightUnit().symbol}
 								</Tag>
 							</Show>
+
+							<Show when={sunEvents()}>
+								<Switch>
+									<Match when={isNight()}>
+										<Tag>
+											<TbSunrise class="my-auto" />
+											Sunrise{' '}
+											{sunEvents()!.nextSunrise.toLocaleTimeString([], {
+												hour: 'numeric',
+												minute: '2-digit',
+												timeZone: airportStore.airport!.timezone ?? 'UTC',
+											})}{' '}
+											local
+										</Tag>
+									</Match>
+									<Match when={true}>
+										<Tag>
+											<TbSunset class="my-auto" />
+											Sunset{' '}
+											{sunEvents()!.nextSunset.toLocaleTimeString([], {
+												hour: 'numeric',
+												minute: '2-digit',
+												timeZone: airportStore.airport!.timezone ?? 'UTC',
+											})}{' '}
+											local
+										</Tag>
+									</Match>
+								</Switch>
+							</Show>
+
 							<Show when={airportStore.airport!.website}>
 								<LinkTag href={airportStore.airport!.website!}>
 									<CgWebsite class="my-auto" />
@@ -276,7 +331,11 @@ const AirportSearchDetail: Component = () => {
 							</Show>
 						</div>
 					</div>
-					<WeatherElements airport={airportStore.airport!} lastRefreshed={lastRefreshed()} />
+					<WeatherElements
+						airport={airportStore.airport!}
+						lastRefreshed={lastRefreshed()}
+						isNight={isNight()}
+					/>
 					<ForecastElements
 						airport={airportStore.airport!}
 						taf={airportStore.airport!.station?.tafs.edges[0]?.node}