Lee Zhao Yi Charles - Weather App Bootcamp

[charlesleezhaoyi]

Questions:

1. I understand that we should not need more than 1 level of nesting for .thens, but in this specific case; wouldn't nesting create more efficiency i.e. by parsing the response of the first API call to the next directly?

`handleSubmit = (event) => {
  event.preventDefault();
  axios
    .get(
      `https://api.openweathermap.org/geo/1.0/direct?q=${this.state.cityInputValue}&limit=1&appid=${OPEN_WEATHER_API_KEY}`
    )
    // City geo data is in response.data[0]
    // Arrow functions with no curly braces return value after arrow
    .then((response) => response.data[0])
    .then((cityGeoData) =>
      axios.get(
        `https://api.openweathermap.org/data/2.5/weather?lat=${cityGeoData.lat}&lon=${cityGeoData.lon}&appid=${OPEN_WEATHER_API_KEY}&units=metric`
      )
    )
    .then((response) => {
      const { data: weatherData } = response;
      console.log(weatherData);
    });
};`

In the code block above from Rocket's documentation, I tried the code but I think we only receive the promise but not the data in the second .then block. Not sure if my understanding is accurate/correct.

[Flashrob]

Questions:

1. I understand that we should not need more than 1 level of nesting for .thens, but in this specific case; wouldn't nesting create more efficiency i.e. by parsing the response of the first API call to the next directly?

`handleSubmit = (event) => {
  event.preventDefault();
  axios
    .get(
      `https://api.openweathermap.org/geo/1.0/direct?q=${this.state.cityInputValue}&limit=1&appid=${OPEN_WEATHER_API_KEY}`
    )
    // City geo data is in response.data[0]
    // Arrow functions with no curly braces return value after arrow
    .then((response) => response.data[0])
    .then((cityGeoData) =>
      axios.get(
        `https://api.openweathermap.org/data/2.5/weather?lat=${cityGeoData.lat}&lon=${cityGeoData.lon}&appid=${OPEN_WEATHER_API_KEY}&units=metric`
      )
    )
    .then((response) => {
      const { data: weatherData } = response;
      console.log(weatherData);
    });
};`

In the code block above from Rocket's documentation, I tried the code but I think we only receive the promise but not the data in the second .then block. Not sure if my understanding is accurate/correct.

Efficiency, depends on what you mean exactly. However, for your assumption below the code I am not sure if you are correct there. Did you try console logging? If you compare with the first api call, the second one follows the same pattern. You return the result of the axios api call, and then have access to the response. If you would use the fetch API instead of axios you might have to deal with promises however. That is my asumption here.

[Flashrob]

never ever commit your .env file. Always add the .env into the .gitignore file first before doing anything else. Check with git status if your .env is included in the changes before committing anything. If it is included, you set up your gitignore wrongly

[Flashrob]

Suggested change

	./env
	.env

the slash here will assume a directory called env but it is a single file in the root folder

[Flashrob]

I would place this outside of the component, so it is always available and not has to be looked up on every form submission.

[Flashrob]

Suggested change

	{error !== "" ? error : ""} <br />
	{error && error} <br />

[Flashrob]

Suggested change

	Temperature: {temperature === "" ? "" : temperature + " Celsius"}{" "}
	Temperature: {!temperature ? "" : temperature + " Celsius"}

[Flashrob]

Suggested change

	Humidity: {humidity === "" ? "" : humidity + "%"}
	Humidity: {!humidity ? "" : humidity + "%"}

[Flashrob]

Suggested change

	<button onClick={(event) => this.handleSubmit(event)}>
	<button onClick={this.handleSubmit}>

the function in the onClick will always have the event as argument. So if you directly pass handleSubmit as reference, the event argument is still valid