Added weather data component to display weather data - also added function to display data

frontend/src/components/WeatherCard.tsx

@@ -3,11 +3,14 @@ import { useState } from "react";
 import { fetchWeather } from "../utils/apiFunc";
 import Cookies from "js-cookie";
 import { toast } from "react-toastify";
+import WeatherData from "./WeatherData";
+import { useEffect } from "react";
 
 const WeatherCard: React.FC = () => {
   const [city, setCity] = useState("");
   const [loading, setLoading] = useState(false);
-  console.log(loading);
+  const [weatherData, setWeatherData] = useState(false);
+  console.log(loading); // only for better reading because a syntax error would appear
   const getAPIKey = () => Cookies.get("apiKey") || "";
 
   const handleCityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -17,16 +20,33 @@ const WeatherCard: React.FC = () => {
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setLoading(true);
-    toast.promise(fetchWeather(city, getAPIKey()), {
+    toast
-      pending: "Fetching weather data...",
+      .promise(fetchWeather(city, getAPIKey()), {
-      success: "Weather data loaded successfully!",
+        pending: "Fetching weather data...",
-      error: "Error loading weather data! (Check console for details)",
+        success: "Weather data loaded successfully!",
-    });
+        error: "Error loading weather data! (Check console for details)",
-    setLoading(false);
+      })
+      .then(() => {
+        if (localStorage.getItem("weather")) {
+          setWeatherData(true);
+        } else {
+          setWeatherData(false);
+        }
+        setLoading(false);
+      });
   };
 
+  // Check if weather data is already in localStorage - when entering the page via URL/reload
+  useEffect(() => {
+    if (localStorage.getItem("weather")) {
+      setWeatherData(true);
+    } else {
+      setWeatherData(false);
+    }
+  }, []);
+
   return (
-    <div>
+    <>
       <h2>Weather Card</h2>
       <p>Current Weather will be displayed here</p>
       <form onSubmit={handleSubmit}>
@@ -42,7 +62,8 @@ const WeatherCard: React.FC = () => {
         />
         <button type="submit">Get Weather</button>
       </form>
-    </div>
+      {weatherData && <WeatherData />}
+    </>
   );
 };
 

frontend/src/components/WeatherData.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const WeatherData: React.FC = () => {
+  return (
+    <>
+      <p>Weather</p>
+    </>
+  );
+};
+
+export default WeatherData;

frontend/src/utils/apiFunc.ts

@@ -4,7 +4,9 @@ export const fetchWeather = async (city: string, apiKey: string) => {
     `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
   ).then((response) => {
     if (response.status === 401) {
-      console.error("You are not authorized to access this resource. Please check your API key.");
+      console.error(
+        "You are not authorized to access this resource. Please check your API key."
+      );
     } else if (response.ok) {
       return response.json();
     } else {
@@ -18,5 +20,5 @@ export const fetchWeather = async (city: string, apiKey: string) => {
   const weather = await fetch(
     `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}`
   ).then((response) => response.json());
-  console.log(weather);
+  localStorage.setItem("weather", JSON.stringify(weather));
 };