React

by Matthew Vasallo

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const {useState, useEffect} = React;
const WeatherCard = ({tempMin, tempMax, description, humidity, setIsRefresh}) => {
console.log('setIsRefresh', setIsRefresh);
    return (<div className="weather-card">
        <div>
            Low of {tempMin}, high of {tempMax}, humidity of {humidity}%
        </div>
        <div>
            {description}
        </div>
        <button onClick={setIsRefresh}>Refresh</button>
    </div>);
}

const getWeather = async (setWeather, setIsLoading) => {
    const url = "https://api.openweathermap.org/data/2.5/weather?zip=33157&appid=c578e51b5c67f8bdf1ae434b0c59e365&units=imperial";
    const json = await (await fetch(url)).json();
    console.log('got here');
    setWeather({
        tempMin: json.main.temp_min,
        tempMax: json.main.temp_max,
        humidity: json.main.humidity,
        description: json.weather[0].description
    });
    setIsLoading(false);
};

const WeatherApp = () => {
    console.log('weather app render');
    const [weather, setWeather] = useState({
        tempMin: 59, tempMax: 65, description: "Cold, clear"
    });

    const [isLoading, setIsLoading] = useState(true);
    
    function refreshWeather() {
     setIsLoading(true);
     getWeather(setWeather, setIsLoading);
    }

    useEffect(() => {
    console.log('getting weather');
     refreshWeather();   
    }, []);

    return (<div className="weather-app-body">
        <div className="weather-card">
            <h2>Weather:</h2>
            {isLoading ? <div>Loading...</div> : <WeatherCard {...weather} setIsRefresh={refreshWeather}/>}
        </div>
    </div>)
}

ReactDOM.render(<WeatherApp/>, document.querySelector("#app"))