detect-location-fix

Author: rafia-codes

.env.example

@@ -1 +1,2 @@
-VITE_OMDB_API_KEY=your_api_key_here
+VITE_OMDB_API_KEY=your_api_key_here
+VITE_WEATHER_API_KEY=your_api_key_here

package.json

@@ -9,13 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "idb": "^8.0.3",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.546.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",
     "react-leaflet": "^4.2.1",
-    "react-router-dom": "^6.27.0"
+    "react-router-dom": "^6.27.0",
+    "recharts": "^3.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",

src/pages/Weather.jsx

@@ -83,39 +83,42 @@ export default function Weather() {
       const data = await res.json();
       if (data && data.length > 0 && data[0].name) {
         setCity(data[0].name);
-        setError(null);
         setIsLocAllowed(true);
+        setError(null);
         localStorage.setItem("userLocation", JSON.stringify(data[0].name));
       } else {
         setCity("London");
         setError("Could not detect city from location.");
         setIsLocAllowed(false);
       }
     } catch (err) {
-      console.log(err);
       setCity("London");
-      setError(err.message);
+      setError("Failed to fetch city from coordinates.");
       setIsLocAllowed(false);
     }
   }
 
   function requestLocation() {
     setIsRequestingLoc(true);
+    if (!navigator.geolocation) {
+      setError("Geolocation is not supported by your browser.");
+      setIsLocAllowed(false);
+      setCity("London");
+      setIsRequestingLoc(false);
+      return;
+    }
+
     navigator.geolocation.getCurrentPosition(
-      async function onSuccess(position) {
+      async (position) => {
         await getCurrentCity(
           position.coords.latitude,
           position.coords.longitude
         );
         setIsRequestingLoc(false);
       },
-
-      function onError(err) {
-        console.log("Error", err);
+      (error) => {
+        setError("Location access denied or failed.");
         setIsLocAllowed(false);
-        setError(
-          "Location is blocked. Please enable location in your browser settings to detect automatically."
-        );
         setCity("London");
         setIsRequestingLoc(false);
       }