add react-toastify for notifications and implement weather fetching functionality

frontend/src/utils/apiFunc.ts

@@ -0,0 +1,24 @@
+import { myToast } from "./toastify";
+
+export const fetchWeather = async (city: string, apiKey: string) => {
+  // Get location data
+  const location = await fetch(
+    `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
+  ).then((response) => {
+    if (response.status === 401) {
+      myToast("Request Failed! Check API key and city name.", "error");
+      throw new Error("Network response was not ok");
+    } else if (response.ok) {
+      return response.json();
+    }
+  });
+  const lat = location[0].lat;
+  const lon = location[0].lon;
+
+  // Get weather data
+  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);
+  myToast("Successfully fetched weather data", "success");
+};

frontend/src/utils/toastify.ts

@@ -0,0 +1,17 @@
+import { toast, type ToastOptions } from "react-toastify";
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export const myToast = (message: string, msgType: ToastType) => {
+  let config: ToastOptions = {
+    position: "top-right",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+    theme: "dark",
+  };
+  toast[msgType](message, config);
+};