50 lines
3.2 KiB
TypeScript
50 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { DEFAULT_STATION_NAME } from "@/lib/constants";
|
|
import { useWeatherStore } from "@/lib/store";
|
|
import { useWeatherStations } from "@/hooks/use-weather-stations";
|
|
import { WeatherHero } from "@/components/weather/weather-hero";
|
|
import { FavoritesSection } from "@/components/weather/favorites-section";
|
|
import { LocationSearch } from "@/components/weather/location-search";
|
|
import { FeaturedStationsSection } from "@/components/weather/featured-stations-section";
|
|
import { PageLoadingSkeleton } from "@/components/states/loading-skeleton";
|
|
import { ErrorState } from "@/components/states/error-state";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { useMeteoStationPositions } from "@/hooks/use-meteo-stations";
|
|
import { useCurrentWeather } from "@/hooks/use-current-weather";
|
|
import { ForecastPanel } from "@/components/forecast/forecast-panel";
|
|
import { locateSynopStations } from "@/lib/location-utils";
|
|
|
|
export function DashboardPage() {
|
|
const { t } = useI18n();
|
|
const { data: stations, isPending, isError, refetch } = useWeatherStations();
|
|
const { data: positions = [] } = useMeteoStationPositions();
|
|
const selectedStationId = useWeatherStore((state) => state.selectedStationId);
|
|
const selectedLocation = useWeatherStore((state) => state.selectedLocation);
|
|
const selectedStation = stations?.find((station) => station.id === selectedStationId)
|
|
?? stations?.find((station) => station.name === DEFAULT_STATION_NAME)
|
|
?? stations?.[0];
|
|
const activeLocation = selectedLocation?.stationId === selectedStation?.id ? selectedLocation : null;
|
|
const stationPosition = selectedStation
|
|
? locateSynopStations(stations ?? [], positions).find((station) => station.id === selectedStation.id)
|
|
: null;
|
|
const hasActiveLocationCoordinates = Number.isFinite(activeLocation?.latitude) && Number.isFinite(activeLocation?.longitude);
|
|
const forecastLatitude = hasActiveLocationCoordinates ? activeLocation?.latitude : stationPosition?.latitude;
|
|
const forecastLongitude = hasActiveLocationCoordinates ? activeLocation?.longitude : stationPosition?.longitude;
|
|
const forecastLocationName = hasActiveLocationCoordinates ? activeLocation?.name ?? selectedStation?.name : selectedStation?.name;
|
|
const { data: currentWeather, isPending: isCurrentWeatherPending } = useCurrentWeather(forecastLatitude, forecastLongitude);
|
|
const isCurrentWeatherLoading = Number.isFinite(forecastLatitude) && Number.isFinite(forecastLongitude) && isCurrentWeatherPending;
|
|
if (isPending) return <PageLoadingSkeleton />;
|
|
if (isError || !stations?.length || !selectedStation) return <ErrorState onRetry={() => refetch()} description={t("dashboard.error")} />;
|
|
|
|
return (
|
|
<div className="space-y-10">
|
|
<LocationSearch stations={stations} positions={positions} />
|
|
<WeatherHero station={selectedStation} currentWeather={currentWeather} currentWeatherLoading={isCurrentWeatherLoading} locationName={activeLocation?.name} distanceKm={activeLocation?.distanceKm} />
|
|
<ForecastPanel latitude={forecastLatitude} longitude={forecastLongitude} locationName={forecastLocationName ?? selectedStation.name} />
|
|
<FavoritesSection stations={stations} />
|
|
<FeaturedStationsSection stations={stations} />
|
|
</div>
|
|
);
|
|
}
|