From e505d9b0e8a3ee24530a4102aa82fba0fa5a6daa Mon Sep 17 00:00:00 2001
From: "theis.gaedigk" <theis.gaedigk@icloud.com>
Date: Wed, 30 Jul 2025 11:23:42 +0200
Subject: [PATCH] fix: increase autoClose duration for Toast notifications to
 improve user experience refactor: enhance error handling in fetchWeather
 function with detailed console messages

---
 frontend/src/Layout/Layout.tsx          | 2 +-
 frontend/src/components/WeatherCard.tsx | 4 +---
 frontend/src/utils/apiFunc.ts           | 4 +++-
 frontend/src/utils/toastify.ts          | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Layout/Layout.tsx b/frontend/src/Layout/Layout.tsx
index 211ff77..315b5ae 100644
--- a/frontend/src/Layout/Layout.tsx
+++ b/frontend/src/Layout/Layout.tsx
@@ -12,7 +12,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       <Header />
       <ToastContainer
         position="top-right"
-        autoClose={3000}
+        autoClose={5000}
         hideProgressBar={false}
         newestOnTop
         closeOnClick
diff --git a/frontend/src/components/WeatherCard.tsx b/frontend/src/components/WeatherCard.tsx
index 36e8a35..71bd0db 100644
--- a/frontend/src/components/WeatherCard.tsx
+++ b/frontend/src/components/WeatherCard.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { useState } from "react";
 import { fetchWeather } from "../utils/apiFunc";
 import Cookies from "js-cookie";
-import IsLoading from "./IsLoading"; // FIX ERRROR
 import { toast } from "react-toastify";
 
 const WeatherCard: React.FC = () => {
@@ -20,7 +19,7 @@ const WeatherCard: React.FC = () => {
     toast.promise(fetchWeather(city, getAPIKey()), {
       pending: "Fetching weather data...",
       success: "Weather data loaded successfully!",
-      error: "Error loading weather data!",
+      error: "Error loading weather data! (Check console for details)",
     });
     setLoading(false);
   };
@@ -42,7 +41,6 @@ const WeatherCard: React.FC = () => {
         />
         <button type="submit">Get Weather</button>
       </form>
-      {loading && <IsLoading message="Loading weather data..." />}
     </div>
   );
 };
diff --git a/frontend/src/utils/apiFunc.ts b/frontend/src/utils/apiFunc.ts
index 85d3193..62d3bb4 100644
--- a/frontend/src/utils/apiFunc.ts
+++ b/frontend/src/utils/apiFunc.ts
@@ -4,9 +4,11 @@ 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) {
-      throw new Error("Network response was not ok");
+      console.error("You are not authorized to access this resource. Please check your API key.");
     } else if (response.ok) {
       return response.json();
+    } else {
+      console.error("Error fetching location data: ", response.statusText);
     }
   });
   const lat = location[0].lat;
diff --git a/frontend/src/utils/toastify.ts b/frontend/src/utils/toastify.ts
index c30c9a8..3607ed8 100644
--- a/frontend/src/utils/toastify.ts
+++ b/frontend/src/utils/toastify.ts
@@ -5,7 +5,7 @@ export type ToastType = "success" | "error" | "info" | "warning";
 export const myToast = (message: string, msgType: ToastType) => {
   let config: ToastOptions = {
     position: "top-right",
-    autoClose: 3000,
+    autoClose: 5000,
     hideProgressBar: false,
     closeOnClick: true,
     pauseOnHover: true,