Weather Dashboard

// ErrorMessage.js
import React from 'react';

const ErrorMessage = ({ type, message, suggestions, onRetry }) => {
  const errorTypes = {
    'not-found': {
      title: 'City Not Found',
      icon: '🔍',
      color: 'red'
    },
    'network': {
      title: 'Network Error',
      icon: '🌐',
      color: 'orange'
    },
    'api': {
      title: 'API Error',
      icon: '🔑',
      color: 'yellow'
    },
    'default': {
      title: 'Error',
      icon: '❌',
      color: 'gray'
    }
  };

  const errorConfig = errorTypes[type] || errorTypes.default;

  return (
    <div className={`error-container ${errorConfig.color}`}>
      <div className="error-icon">{errorConfig.icon}</div>
      <div className="error-content">
        <h3>{errorConfig.title}</h3>
        <p>{message}</p>
        
        {suggestions && (
          <ul className="suggestions">
            {suggestions.map((suggestion, index) => (
              <li key={index}>{suggestion}</li>
            ))}
          </ul>
        )}
        
        <button onClick={onRetry}>Try Again</button>
      </div>
    </div>
  );
};

export default ErrorMessage;

// WeatherDashboard.js
import React, { useState, useEffect } from 'react';
import ErrorMessage from './ErrorMessage';
import { fetchWeatherData } from '../api/weatherService';

const WeatherDashboard = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [city, setCity] = useState('New York');

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    
    try {
      const result = await fetchWeatherData(city);
      setData(result);
    } catch (err) {
      if (err.response) {
        if (err.response.status === 404) {
          setError({
            type: 'not-found',
            message: `The city "${city}" could not be found.`,
            suggestions: [
              'Check for spelling mistakes',
              'Try adding a country code (e.g., "London,UK")',
              'Search for a larger city nearby'
            ]
          });
        } else if (err.response.status === 401) {
          setError({
            type: 'api',
            message: 'API key invalid or quota exceeded.',
            suggestions: [
              'Check API key validity',
              'You may have exceeded your daily limit'
            ]
          });
        } else {
          setError({
            type: 'default',
            message: 'An unexpected error occurred.',
            suggestions: ['Please try again later']
          });
        }
      } else if (err.request) {
        setError({
          type: 'network',
          message: 'Unable to connect to weather service.',
          suggestions: [
            'Check your internet connection',
            'The service might be temporarily down'
          ]
        });
      } else {
        setError({
          type: 'default',
          message: err.message,
          suggestions: ['Please try again later']
        });
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
    // Set up polling every 30 seconds
    const interval = setInterval(fetchData, 30000);
    return () => clearInterval(interval);
  }, [city]);

  const handleRetry = () => {
    fetchData();
  };

  return (
    <div className="weather-dashboard">
      {loading && <div className="loading-spinner">Loading...</div>}
      
      {error && (
        <ErrorMessage
          type={error.type}
          message={error.message}
          suggestions={error.suggestions}
          onRetry={handleRetry}
        />
      )}
      
      {!loading && !error && data && (
        <!-- Weather Data Display -->
      )}
    </div>
  );
};

export default WeatherDashboard;