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

@@ -12,7 +12,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       <Header />
       <ToastContainer
         position="top-right"
-        autoClose={3000}
+        autoClose={5000}
         hideProgressBar={false}
         newestOnTop
         closeOnClick

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>
   );
 };

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;

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,