From 7e42c4036b66a8950d870dfe35201f068eca0492 Mon Sep 17 00:00:00 2001
From: harshitsharma2005 <work.harshitsharma8899@gmail.com>
Date: Sun, 19 Oct 2025 02:27:29 +0530
Subject: [PATCH] feat: Add retry button to ErrorMessage component for weather
 API failures

- Enhanced ErrorMessage component with retry functionality
- Added styled retry button with hover effects
- Fixed error prop handling in Weather.jsx
- Allows users to manually retry fetching weather data on API/network errors
- Improved error message display with better styling and UX
---
 src/components/ErrorMessage.jsx | 44 ++++++++++++++++++++++++++++++---
 src/pages/Weather.jsx           |  2 +-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/ErrorMessage.jsx b/src/components/ErrorMessage.jsx
index 0b14dd8..44ad492 100644
--- a/src/components/ErrorMessage.jsx
+++ b/src/components/ErrorMessage.jsx
@@ -1,4 +1,42 @@
-export default function ErrorMessage({ error }) {
-  if (!error) return null;
-  return <div className="error">Error: {error.toString()}</div>;
+export default function ErrorMessage({ message, error, onRetry }) {
+  const errorText = message || error?.toString() || "An error occurred";
+  
+  if (!message && !error) return null;
+  
+  return (
+    <div className="error" style={{ 
+      padding: '16px', 
+      margin: '16px 0',
+      backgroundColor: '#fee',
+      border: '1px solid #fcc',
+      borderRadius: '8px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '12px'
+    }}>
+      <span style={{ flex: 1 }}>
+        ⚠️ <strong>Error:</strong> {errorText}
+      </span>
+      {onRetry && (
+        <button 
+          onClick={onRetry}
+          style={{
+            padding: '8px 16px',
+            backgroundColor: '#ff4444',
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            fontWeight: 'bold',
+            transition: 'background-color 0.2s',
+          }}
+          onMouseOver={(e) => e.target.style.backgroundColor = '#cc0000'}
+          onMouseOut={(e) => e.target.style.backgroundColor = '#ff4444'}
+        >
+          🔄 Retry
+        </button>
+      )}
+    </div>
+  );
 }
diff --git a/src/pages/Weather.jsx b/src/pages/Weather.jsx
index 7c46851..941ff98 100644
--- a/src/pages/Weather.jsx
+++ b/src/pages/Weather.jsx
@@ -407,7 +407,7 @@ export default function Weather() {
 
         {loading && <Loading />}
         {error && (
-          <ErrorMessage message={error.message} onRetry={() => fetchWeather(city)} />
+          <ErrorMessage message={error} onRetry={() => fetchWeather(city)} />
         )}
 
         {data && !loading && (