SearchBox.jsx

import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import { useState } from "react";
import "./SearchBox.css";

const SearchBox = ({ updateInfo }) => {
  const [city, setCity] = useState("");
  const [error, setError] = useState("");

  const API_URL = "https://api.openweathermap.org/data/2.5/weather";
  const API_KEY = "ADD_HERE_YOUR_OWN_OPEN_WEATHER_API_KEY";

  const getWeatherInfo = async () => {
    const response = await fetch(
      `${API_URL}?q=${city}&appid=${API_KEY}&units=metric`,
    );
    const jsonResponse = await response.json();

    // Check API response before accessing data
    if (!response.ok) {
      throw new Error(jsonResponse.message);
    }

    // TODO: Debugg the Code
    // console.log(jsonResponse);

    const result = {
      city: city,
      temp: jsonResponse.main.temp,
      tempMin: jsonResponse.main.temp_min,
      tempMax: jsonResponse.main.temp_max,
      humidity: jsonResponse.main.humidity,
      feelsLike: jsonResponse.main.feels_like,
      weather: jsonResponse.weather[0].description,
    };

    // TODO: Debugg the Code
    // console.log(result);

    return result;
  };

  const handleChange = (e) => {
    setCity(e.target.value);
  };

  // Don't call updateInfo() when fetch fails
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const newInfo = await getWeatherInfo();
      updateInfo(newInfo);
      setError("");
      setCity("");
    } catch (err) {
      if (err.message === "city not found") {
        setError("❌ City not found. Please enter a valid city name.");
      } else {
        setError("⚠️ Something went wrong. Please try again.");
      }
    }
  };

  return (
    <div className="SearchBox">
      <form onSubmit={handleSubmit} className="InputField">
        <TextField
          id="city"
          label="City Name"
          variant="outlined"
          required
          value={city}
          onChange={handleChange}
          className="outlined-basic"
        />
        <Button variant="contained" type="submit">
          Search
        </Button>
      </form>
      <br />
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
};

export default SearchBox;