Fixed issues with newer version

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -17,8 +17,8 @@
     "skycons": "^1.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
+    "build": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import CurrentLocation from "./currentLocation";
 import "./App.css";
 
@@ -13,11 +13,11 @@ function App() {
           Download Source Code
         </a>{" "}
         | Developed by{" "}
-        <a target="_blank" href="https://www.gauravghai.dev/">
+        <a target="_blank" rel="noopener noreferrer" href="https://www.gauravghai.dev/">
           Gaurav Ghai
         </a>{" "}
         | Powered by{" "}
-        <a target="_blank" href="https://www.htmlhints.com/">
+        <a target="_blank" rel="noopener noreferrer" href="https://www.htmlhints.com/">
           HTML HINTS
         </a>
       </div>

src/apiKeys.js

@@ -1,5 +1,5 @@
 // Visit https://api.openweathermap.org & then signup to get our API keys for free
 module.exports = {
-  key: "{Your API Key Here}",
+  key: {your_api_key},
   base: "https://api.openweathermap.org/data/2.5/",
 };

src/currentLocation.js

@@ -102,53 +102,62 @@ class Weather extends React.Component {
     });
   };
   getWeather = async (lat, lon) => {
-    const api_call = await fetch(
-      `${apiKeys.base}weather?lat=${lat}&lon=${lon}&units=metric&APPID=${apiKeys.key}`
-    );
-    const data = await api_call.json();
-    this.setState({
-      lat: lat,
-      lon: lon,
-      city: data.name,
-      temperatureC: Math.round(data.main.temp),
-      temperatureF: Math.round(data.main.temp * 1.8 + 32),
-      humidity: data.main.humidity,
-      main: data.weather[0].main,
-      country: data.sys.country,
-      // sunrise: this.getTimeFromUnixTimeStamp(data.sys.sunrise),
-
-      // sunset: this.getTimeFromUnixTimeStamp(data.sys.sunset),
-    });
-    switch (this.state.main) {
-      case "Haze":
-        this.setState({ icon: "CLEAR_DAY" });
-        break;
-      case "Clouds":
-        this.setState({ icon: "CLOUDY" });
-        break;
-      case "Rain":
-        this.setState({ icon: "RAIN" });
-        break;
-      case "Snow":
-        this.setState({ icon: "SNOW" });
-        break;
-      case "Dust":
-        this.setState({ icon: "WIND" });
-        break;
-      case "Drizzle":
-        this.setState({ icon: "SLEET" });
-        break;
-      case "Fog":
-        this.setState({ icon: "FOG" });
-        break;
-      case "Smoke":
-        this.setState({ icon: "FOG" });
-        break;
-      case "Tornado":
-        this.setState({ icon: "WIND" });
-        break;
-      default:
-        this.setState({ icon: "CLEAR_DAY" });
+    try {
+      if (typeof lat === "undefined" || typeof lon === "undefined") {
+        return;
+      }
+      const res = await fetch(
+        `${apiKeys.base}weather?lat=${lat}&lon=${lon}&units=metric&APPID=${apiKeys.key}`
+      );
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data && data.message ? data.message : `Request failed: ${res.status}`);
+      }
+      const main = data && data.weather && data.weather[0] ? data.weather[0].main : "";
+      let icon = "CLEAR_DAY";
+      switch (main) {
+        case "Haze":
+          icon = "CLEAR_DAY";
+          break;
+        case "Clouds":
+          icon = "CLOUDY";
+          break;
+        case "Rain":
+          icon = "RAIN";
+          break;
+        case "Snow":
+          icon = "SNOW";
+          break;
+        case "Dust":
+          icon = "WIND";
+          break;
+        case "Drizzle":
+          icon = "SLEET";
+          break;
+        case "Fog":
+        case "Smoke":
+          icon = "FOG";
+          break;
+        case "Tornado":
+          icon = "WIND";
+          break;
+        default:
+          icon = "CLEAR_DAY";
+      }
+      this.setState({
+        lat: lat,
+        lon: lon,
+        city: data && data.name,
+        temperatureC: data && data.main ? Math.round(data.main.temp) : undefined,
+        temperatureF: data && data.main ? Math.round(data.main.temp * 1.8 + 32) : undefined,
+        humidity: data && data.main ? data.main.humidity : undefined,
+        main: main,
+        country: data && data.sys ? data.sys.country : undefined,
+        icon: icon,
+        errorMsg: undefined,
+      });
+    } catch (err) {
+      this.setState({ errorMsg: err.message || "Unable to fetch weather data", temperatureC: undefined });
     }
   };
 
@@ -194,7 +203,7 @@ class Weather extends React.Component {
     } else {
       return (
         <React.Fragment>
-          <img src={loader} style={{ width: "50%", WebkitUserDrag: "none" }} />
+          <img alt="Loading weather" src={loader} style={{ width: "50%", WebkitUserDrag: "none" }} />
           <h3 style={{ color: "white", fontSize: "22px", fontWeight: "600" }}>
             Detecting your location
           </h3>

src/forcast.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Component } from "react";
+import React, { useState, useEffect } from "react";
 import axios from "axios";
 import apiKeys from "./apiKeys";
 import ReactAnimatedWeather from "react-animated-weather";
@@ -9,29 +9,24 @@ function Forcast(props) {
   const [weather, setWeather] = useState({});
 
   const search = (city) => {
+    const q = typeof city === "string" && city.trim() ? city : query;
+    if (!q) return;
     axios
       .get(
-        `${apiKeys.base}weather?q=${
-          city != "[object Object]" ? city : query
-        }&units=metric&APPID=${apiKeys.key}`
+        `${apiKeys.base}weather?q=${encodeURIComponent(q)}&units=metric&APPID=${apiKeys.key}`
       )
       .then((response) => {
         setWeather(response.data);
         setQuery("");
+        setError("");
       })
-      .catch(function (error) {
-        console.log(error);
-        setWeather("");
+      .catch(function (err) {
+        console.log(err);
+        setWeather({});
         setQuery("");
-        setError({ message: "Not Found", query: query });
+        setError({ message: "Not Found", query: q });
       });
   };
-  function checkTime(i) {
-    if (i < 10) {
-      i = "0" + i;
-    } // add zero in front of numbers < 10
-    return i;
-  }
 
   const defaults = {
     color: "white",
@@ -40,7 +35,18 @@ function Forcast(props) {
   };
 
   useEffect(() => {
-    search("Delhi");
+    axios
+      .get(
+        `${apiKeys.base}weather?q=${encodeURIComponent("Delhi")}&units=metric&APPID=${apiKeys.key}`
+      )
+      .then((response) => {
+        setWeather(response.data);
+      })
+      .catch(function (err) {
+        console.log(err);
+        setWeather({});
+        setError({ message: "Not Found", query: "Delhi" });
+      });
   }, []);
 
   return (
@@ -66,20 +72,22 @@ function Forcast(props) {
           <div className="img-box">
             {" "}
             <img
+              alt="Search"
               src="https://images.avishkaar.cc/workflow/newhp/search-white.png"
-              onClick={search}
+              onClick={() => search(query)}
             />
           </div>
         </div>
         <ul>
-          {typeof weather.main != "undefined" ? (
+          {typeof weather.main !== "undefined" ? (
             <div>
               {" "}
               <li className="cityHead">
                 <p>
                   {weather.name}, {weather.sys.country}
                 </p>
                 <img
+                  alt={`Weather icon ${weather.weather[0].main}`}
                   className="temp"
                   src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}.png`}
                 />