App.js

import React, { useSate, useState, useEffect } from "react";
import "./App.css";
import WeatherCard from "./components/WeatherCard/WeatherCard";

function App() {
  const location = "Enniscorthy, IE";
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);

  const [weather, setWeather] = useState({
    temp: null,
    city: null,
    condition: null,
    country: null,
  });

  const getWeather = async (query) => {
    setLoading(true);
    const res = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${query}&units=metric&APPID=398370e94f7cfbf0edb8e0120b1e06cb`
    );

    const resJson = await res.json();
    setWeather({
      temp: resJson.main.temp,
      city: resJson.name,
      condition: resJson.weather[0].main,
      country: resJson.sys.country,
    });

    setLoading(false);
  };

  const handleSearch = (e) => {
    e.preventDefault();
    getWeather(query);
  };

  useEffect(() => {
    getWeather(location);
  }, [location]);

  return (
    <div className="App">
      {!loading ? (
        <div>
          <WeatherCard
            tempature={weather.temp}
            condition={weather.condition}
            city={weather.city}
            country={weather.country}
          ></WeatherCard>
          <form>
            <input value={query} onChange={(e) => setQuery(e.target.value)} />
            <button onClick={(e) => handleSearch(e)}>Search</button>
          </form>
        </div>
      ) : (
        <div style={{ colour: "black" }}>loading</div>
      )}
    </div>
  );
}

export default App;