fix: update error response status and improve success message handling in weather fetching

README.md

@@ -6,7 +6,7 @@ You can find the web version of the Weather App at [https://weather.the1s.de](ht
 
 ## Version
 
-Currently hosted version: **1.0.1**
+Currently hosted version: **development branch (latest)**
 
 ## Dev info
 

backend/routes/api.js

@@ -14,7 +14,7 @@ router.get("/fetchWeather", async (req, res) => {
       `https://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
     );
     if (!locationResponse.ok) {
-      return res.status(404).json({
+      return res.status(500).json({
         error: "Error fetching location data. (Error: x32)",
         success: "false",
         data: null,

docker-compose.yml

@@ -1,26 +1,29 @@
 services:
-  #  frontend:
-  #    container_name: weather-frontend
-  #    build: ./frontend
-  #    ports:
-  #      - "7002:7002"
-  #    # networks:
-  #    #   - proxynet
-  #    environment:
-  #      - CHOKIDAR_USEPOLLING=true
-  #    volumes:
-  #      - ./frontend:/app
-  #      - /app/node_modules
-  #    restart: unless-stopped
+  frontend:
+    container_name: weather-frontend
+    build: ./frontend
+    ports:
+      - "7002:7002"
+    networks:
+      - proxynet
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    restart: unless-stopped
   backend:
     container_name: weather-backend
     build: ./backend
+    networks:
+      - proxynet
     ports:
       - "7001:7001"
     volumes:
       - ./backend:/app
       - /app/node_modules
     restart: unless-stopped
-#networks:
-#  proxynet:
-#    external: true
+
+networks:
+  proxynet:
+    external: true

frontend/src/components/WeatherData.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Sunrise, Sunset } from "lucide-react";
+import { getDateTime } from "../utils/utils";
 
 const WeatherData: React.FC = () => {
   const weatherRaw = localStorage.getItem("weather");
@@ -75,6 +76,11 @@ const WeatherData: React.FC = () => {
                 : "--:--"}
             </span>
           </div>
+          <div className="flex items-center gap-3">
+            <span className="text-base text-gray-600 italic font-semibold">
+              Last updated: {getDateTime()}
+            </span>
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/WeatherForm.tsx

@@ -21,9 +21,6 @@ const WeatherCard: React.FC = () => {
     toast
       .promise(fetchWeather(city, getUnit()), {
         pending: "Fetching weather data...",
-        success: "Weather data loaded successfully!",
-        error:
-          "Failed to load weather data. Please check your entered city name. (Error: x4040)",
       })
       .then(() => {
         if (localStorage.getItem("weather")) {

frontend/src/utils/apiFunc.ts

@@ -3,7 +3,7 @@ import { myToast } from "./toastify";
 export const fetchWeather = async (city: string, units: string) => {
   try {
     const response = await fetch(
-      `http://localhost:7001/api/fetchWeather?city=${encodeURIComponent(
+      `https://backend.weather.the1s.de/api/fetchWeather?city=${encodeURIComponent(
         city
       )}&units=${encodeURIComponent(units)}`,
       {
@@ -21,6 +21,7 @@ export const fetchWeather = async (city: string, units: string) => {
       return;
     }
     localStorage.setItem("weather", JSON.stringify(responseData.data));
+    myToast(responseData.success, "success");
     return;
   } catch (error) {
     const errorMsg = JSON.stringify(error);

frontend/src/utils/utils.ts

@@ -0,0 +1,24 @@
+export const getDateTime = () => {
+  const now = new Date();
+  const day = now.getDate();
+  const month = now.toLocaleString("en-GB", { month: "long" });
+  const hours = now.getHours().toString().padStart(2, "0");
+  const minutes = now.getMinutes().toString().padStart(2, "0");
+
+  // Ordinal suffix
+  const getOrdinal = (n: number) => {
+    if (n > 3 && n < 21) return "th";
+    switch (n % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
+  };
+
+  return `${day}${getOrdinal(day)} ${month}, ${hours}:${minutes}`;
+};