fetching data

src/App.jsx

@@ -5,13 +5,15 @@ import { uid } from "uid";
 import useLocalStorageState from "use-local-storage-state";
 import List from "./components/list/List.jsx";
 import { useEffect, useState } from "react";
+import Weather from "./components/weather/Weather.jsx";
 
 function App() {
   const [activities, setActivities] = useLocalStorageState("activities", {
     defaultValue: [],
   });
-  const [weather, setWeather] = useState(null);
-  const isGoodWeather = true; // In the App.js, add a variable const isGoodWeather = true.
+  const [weather, setWeather] = useState("");
+  // const isGoodWeather = true; // In the App.js, add a variable const isGoodWeather = true.
+  const [isGoodWeather, setIsGoodWeather] = useState({});
   const filteredActivities = activities.filter(
     (activity) => activity.isGoodWeather === isGoodWeather
   ); //Filter the activities for those whose key isForGoodWeather is equal to the global isGoodWeather variable.
@@ -23,15 +25,15 @@ function App() {
         const response = await fetch(weatherUrl);
         if (response.ok) {
           const weatherData = await response.json();
-
-          setWeatherData(weatherData);
+          setWeather(weatherData);
         } else {
-          console.error("");
+          console.error("Failed to fetch weather data.");
         }
       } catch (error) {
-        console.error("Error!");
+        console.error("Error while fetching weather data:", error);
       }
     }
+    fetchWeatherData();
 
     const intervalID = setInterval(fetchWeatherData, 5000);
     return () => {
@@ -56,8 +58,13 @@ function App() {
   }
   return (
     <>
+      <Weather weather={weather} />
+      <List
+        activities={filteredActivities}
+        deleteActivity={handleDeleteActivity}
+        isGoodWeather={weather}
+      />
       <Form onAddActivity={handleAddActivity} />
-      <List activities={activities} deleteActivity={handleDeleteActivity} />
     </>
   );
 }

src/components/list/List.jsx

@@ -1,23 +1,22 @@
-import "./List.css";
 // import React from "react";
-// import useLocalStorageState from "react";
+import "./List.css";
+
+// eslint-disable-next-line react/prop-types
 export default function List({ activities, deleteActivity, isGoodWeather }) {
   return (
     <ul className="activity-list">
-      {activities.map((activity) => {
-        return (
-          <li className="list_item" key={activity.id}>
-            {activity.name} {activity.isGoodWeather ? "🌤" : "⚡️"} weather
-            activity
-            <button
-              className="delete-button"
-              onClick={() => deleteActivity(activity.id)}
-            >
-              x
-            </button>
-          </li>
-        );
-      })}
+      {activities.map((activity) => (
+        <li className="list_item" key={activity.id}>
+          {activity.name} {activity.isGoodWeather ? "🌤" : "⚡️"} weather
+          activity
+          <button
+            className="delete-button"
+            onClick={() => deleteActivity(activity.id)}
+          >
+            x
+          </button>
+        </li>
+      ))}
     </ul>
   );
 }

src/components/weather/Weather.css

@@ -0,0 +1,21 @@
+.weather-details {
+  margin-top: 20px;
+}
+
+.weather-details div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.weather-details h1 {
+  font-size: 48px;
+  margin-right: 10px;
+}
+
+.weather-details h2 {
+  font-size: 20px;
+  color: #333;
+  margin-top: 10px;
+}

src/components/weather/Weather.jsx

@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+import "./Weather.css";
+export default function Weather({ weather }) {
+  return (
+    <div className="weather-details">
+      {!weather && <h2>weather is loading...</h2>}
+      {weather && (
+        <>
+          <h1>{weather.condition}</h1>
+          <h1>{weather.temperature}</h1>
+        </>
+      )}
+    </div>
+  );
+}