Closed mattinger closed 4 years ago
I agree, even with modern async await you have to nest the calls and it gets pretty messy eg:
async componentDidMount() {
const pokeName = await axios.get('https://pokeapi.co/api/v2/pokemon/')
const pokeArray = [];
for (let i = 0; i < pokeName.data.results.length; i++) {
const poke = pokeName.data.results[i];
const pokeImage = await axios.get(poke.url);
const pokeObj = {
name: poke.name,
image: pokeImage.data.sprites.front_default
}
pokeArray.push(pokeObj);
}
this.setState({
pokemon: pokeArray,
apiDataLoaded: true
})
}
Hey @mattinger thanks for the issue.
I tend to favour the "true RESTfulness" approach of the API. That is why it is built, after all. Using the hypermedia links to access each pokemon individually from the base url is part of REST. Yes, it's not efficient.
We could take your request and add an icon. But then someone tomorrow may ask for another attribute on the base page. And then someone might ask in a month's time for another attribute. And then the convention will be broken.
Who decides what goes on the base page? We added a name resource and a url at the start, and so we decided that was enough. Developers can call each resource as they please for the values they need. Given this is a teaching tool first and foremost, I think we should keep it as it is.
@phalt a good proposal would be to have another list on another endpoint with pokemon names or ids and sprites, that way it would be easy to match the endpoint https://pokeapi.co/api/v2/pokemon/
The current /pokemon endpoint returns only the name and url for the various pokemon. This makes it extremely difficult to present the user with a list of pokemon along with an icon to represent it.
In order to do that you'd have to load each pokemon individually, and then pick which sprite you'd like to show. This would overburden the api, and tax the system resources of the device trying to show this list.
Having at least some sort of thumbnail sprite in the list response would be very helpful.