/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useCallback, useMemo } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function WeatherApp() { const [location, setLocation] = useState(''); const [weatherData, setWeatherData] = useState(null); const [forecastData, setForecastData] = useState(null); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); // Type-safe error handling function const handleError = useCallback((err: unknown) => { let errorMessage = 'Could not fetch weather data. Please try again.'; // Check if err is an Error object if (err instanceof Error) { errorMessage = err.message; } // Check if err is a string else if (typeof err === 'string') { errorMessage = err; } // For any other type, use a generic error message console.error('Weather fetch error:', err); setError(errorMessage); setWeatherData(null); setForecastData(null); }, []); // Weather fetching function const fetchWeather = useCallback(async (locationQuery) => { if (!locationQuery) return; setIsLoading(true); setError(null); try { const response = await fetch(`/api/weather?location=${encodeURIComponent(locationQuery)}`); if (!response.ok) { const errorText = await response.text(); throw new Error(errorText || 'Weather fetch failed'); } const data = await response.json(); setWeatherData(data.current); setForecastData(data.forecast); } catch (err) { handleError(err); } finally { setIsLoading(false); } }, [handleError]); // Handle form submission const handleSearch = async (e) => { e.preventDefault(); fetchWeather(location); }; // Render weather icon const getWeatherIcon = (weatherCode) => { const iconMap = { 0: '☀️', // Clear sky 1: '⛅', // Mainly clear 2: '🌤️', // Partly cloudy 3: '☁️', // Overcast 45: '🌫️', // Foggy 51: '🌧️', // Light drizzle 53: '🌧️', // Moderate drizzle 55: '🌧️', // Dense drizzle 61: '🌧️', // Slight rain 63: '🌧️', // Moderate rain 65: '🌧️', // Heavy rain 71: '❄️', // Slight snow 73: '❄️', // Moderate snow 75: '❄️', // Heavy snow 95: '⛈️' // Thunderstorm }; return iconMap[weatherCode] || '🌡️'; }; return (

🌍 Global Weather Finder

{error &&

{error}

} {weatherData && (

{weatherData.locationName} {getWeatherIcon(weatherData.weatherCode)}

{Math.round(weatherData.temperature)}°F

🌬️ Wind: {Math.round(weatherData.windSpeed)} mph

🧭 Wind Direction: {weatherData.windDirection}°

☁️ Condition: {weatherData.weatherDescription}

)} {forecastData && (

5-Day Forecast

{forecastData.map((day, index) => (

{new Date(day.time * 1000).toLocaleDateString('en-US', { weekday: 'short' })}

{getWeatherIcon(day.weatherCode)}

{Math.round(day.temperature)}°F

))}

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); // Predefined coordinates for common cities const cityCoordinates = { 'new york': { lat: 40.7128, lon: -74.0060, name: 'New York, USA' }, 'london': { lat: 51.5074, lon: -0.1278, name: 'London, UK' }, 'paris': { lat: 48.8566, lon: 2.3522, name: 'Paris, France' }, 'tokyo': { lat: 35.6762, lon: 139.6503, name: 'Tokyo, Japan' }, 'sydney': { lat: -33.8688, lon: 151.2093, name: 'Sydney, Australia' } }; // Handle weather data request if (url.pathname === '/api/weather') { const locationQuery = url.searchParams.get('location'); if (locationQuery) { try { // Find coordinates for the location const normalizedLocation = locationQuery.toLowerCase().split(',')[0].trim(); const locationData = cityCoordinates[normalizedLocation]; if (!locationData) { return new Response(JSON.stringify({ error: 'Location not found. Please try a different city.' }), { status: 404, headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }); } // Fetch current weather from Open-Meteo const weatherResponse = await fetch( `https://api.open-meteo.com/v1/forecast?latitude=${locationData.lat}&longitude=${locationData.lon}¤t_weather=true&hourly=weathercode,temperature_2m&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto&temperature_unit=fahrenheit` ); // Check if the response is OK if (!weatherResponse.ok) { throw new Error(`HTTP error! status: ${weatherResponse.status}`); } const weatherData = await weatherResponse.json(); // Map weather codes to descriptions const weatherDescriptions = { 0: 'Clear sky', 1: 'Mainly clear', 2: 'Partly cloudy', 3: 'Overcast', 45: 'Foggy', 51: 'Light drizzle', 53: 'Moderate drizzle', 55: 'Dense drizzle', 61: 'Slight rain', 63: 'Moderate rain', 65: 'Heavy rain', 71: 'Slight snow', 73: 'Moderate snow', 75: 'Heavy snow', 95: 'Thunderstorm' }; // Prepare forecast data const forecastData = weatherData.daily.time.map((time, index) => ({ time: new Date(time).getTime() / 1000, temperature: weatherData.daily.temperature_2m_max[index], weatherCode: weatherData.daily.weathercode[index] })).slice(1, 6); // Exclude today, take next 5 days return new Response(JSON.stringify({ current: { locationName: locationData.name, temperature: weatherData.current_weather.temperature, windSpeed: weatherData.current_weather.windspeed, windDirection: weatherData.current_weather.winddirection, weatherCode: weatherData.current_weather.weathercode, weatherDescription: weatherDescriptions[weatherData.current_weather.weathercode] || 'Unknown' }, forecast: forecastData }), { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }); } catch (error: unknown) { // Type-safe error handling let errorMessage = 'Error fetching weather data'; if (error instanceof Error) { errorMessage = error.message; } else if (typeof error === 'string') { errorMessage = error; } console.error('Weather fetch error:', error); return new Response(JSON.stringify({ error: errorMessage }), { status: 500, headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }); } } } // Serve initial HTML (unchanged) return new Response(` Global Weather Finder

`, { headers: { "content-type": "text/html" } }); }

sris3