add process.env and state only changes when response is valid

.eslintcache

@@ -1 +1 @@
-[{"/home/yusuf/Programming/React/homepage/src/index.js":"1","/home/yusuf/Programming/React/homepage/src/App.js":"2","/home/yusuf/Programming/React/homepage/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx":"4","/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx":"5","/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx":"6","/home/yusuf/Programming/React/homepage/src/data/card1.js":"7","/home/yusuf/Programming/React/homepage/src/data/card2.js":"8"},{"size":500,"mtime":1611166245620,"results":"9","hashOfConfig":"10"},{"size":721,"mtime":1611333181726,"results":"11","hashOfConfig":"10"},{"size":362,"mtime":1611166245620,"results":"12","hashOfConfig":"10"},{"size":496,"mtime":1611233470447,"results":"13","hashOfConfig":"10"},{"size":962,"mtime":1611338778196,"results":"14","hashOfConfig":"10"},{"size":289,"mtime":1611337653419,"results":"15","hashOfConfig":"10"},{"size":445,"mtime":1611333725539,"results":"16","hashOfConfig":"10"},{"size":282,"mtime":1611315056757,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"p1t955",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/homepage/src/index.js",[],"/home/yusuf/Programming/React/homepage/src/App.js",[],"/home/yusuf/Programming/React/homepage/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx",[],"/home/yusuf/Programming/React/homepage/src/data/card1.js",[],"/home/yusuf/Programming/React/homepage/src/data/card2.js",[]]
+[{"/home/yusuf/custom-homepage/src/index.js":"1","/home/yusuf/custom-homepage/src/reportWebVitals.js":"2","/home/yusuf/custom-homepage/src/App.js":"3","/home/yusuf/custom-homepage/src/data/card1.js":"4","/home/yusuf/custom-homepage/src/data/card2.js":"5","/home/yusuf/custom-homepage/src/components/time/time-component.jsx":"6","/home/yusuf/custom-homepage/src/components/fetch weather/weather-fetch.jsx":"7","/home/yusuf/custom-homepage/src/components/card/card-component.jsx":"8"},{"size":500,"mtime":1618363915733,"results":"9","hashOfConfig":"10"},{"size":362,"mtime":1618363915733,"results":"11","hashOfConfig":"10"},{"size":721,"mtime":1618363915733,"results":"12","hashOfConfig":"10"},{"size":445,"mtime":1618363915733,"results":"13","hashOfConfig":"10"},{"size":282,"mtime":1618363915733,"results":"14","hashOfConfig":"10"},{"size":496,"mtime":1618363915733,"results":"15","hashOfConfig":"10"},{"size":1302,"mtime":1618366700095,"results":"16","hashOfConfig":"10"},{"size":289,"mtime":1618363915733,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1f40gwp",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/custom-homepage/src/index.js",[],"/home/yusuf/custom-homepage/src/reportWebVitals.js",[],"/home/yusuf/custom-homepage/src/App.js",[],"/home/yusuf/custom-homepage/src/data/card1.js",[],"/home/yusuf/custom-homepage/src/data/card2.js",[],"/home/yusuf/custom-homepage/src/components/time/time-component.jsx",[],"/home/yusuf/custom-homepage/src/components/fetch weather/weather-fetch.jsx",[],"/home/yusuf/custom-homepage/src/components/card/card-component.jsx",[]]

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

src/components/fetch weather/weather-fetch.jsx

@@ -5,34 +5,54 @@ class Forecast extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      weather: null,
+      weather: {
+        response: 1,
+        weather: [
+          {
+            icon: "04n",
+          },
+        ],
+        main: {
+          temp: 285.66,
+        },
+      },
     };
   }
 
   async componentDidMount() {
+    try {
       const response = await fetch(
-      "https://api.openweathermap.org/data/2.5/weather?q=istanbul&appid=yourapikey"
+        `https://api.openweathermap.org/data/2.5/weather?q=istanbul&appid=${process.env.REACT_APP_API_KEY}`
       );
       const json = await response.json();
+      if (json.cod !== 401) {
         this.setState({ weather: json });
       }
 
-  render() {
+      this.setState({ response: 1 });
-    if (!this.state.weather) {
+    } catch (err) {
-      return <div />;
+      console.log("Error:", err);
     }
+  }
+
+  render() {
     function kelvinToCelsius(kel) {
       let celsius = kel - 273.15;
       return celsius.toFixed(2);
     }
 
+    if (this.state.weather.response === 1) {
+      return <div />;
+    }
+
     return (
       <div className="forecast">
         <img
           src={`https://openweathermap.org/img/wn/${this.state.weather.weather[0].icon}@2x.png`}
           alt=""
         />
-        İstanbul Hava Durumu: {kelvinToCelsius(this.state.weather.main.temp)}°С
+        İstanbul Hava Durumu: {kelvinToCelsius(this.state.weather.main.temp)}
+        °С
       </div>
     );
   }