gdirk07 / PokemonChecker

Playing around with APIs
https://gdirk07.github.io/PokemonChecker/
0 stars 0 forks source link

Big push for ability localization (sorry) #77

Closed gdirk07 closed 2 years ago

gdirk07 commented 2 years ago
  1. removed Tachyons (was used as some quick way to write CSS when I was still learning) from the project and updated SearchBar.tsx
  2. Fix an error where there was a white bar at top of the app (overflow in APP.css)
  3. Added new value to Ability "localizedName" which we can build off of for multi language support
  4. Cleaned up App.tsx to remove unneeded states, and functions, will help with future optimizations on renders since most of the clutter is gone
  5. fetchAbilities moved outside into its own function to allow async solution
  6. Made it so abilities now render the localized name instead of the generic name from the API

The reason this commit was long was because I was struggling to have the localizedName load because of the new hooks in PokemonDisplay, this caused me searching for a solution in App.tsx which got me cleaning it up. The solution now is before the pokemon renders we fetch the mon's abilities. I don't like this solution because now pokemon load slowly while it waits for up to 3 fetches.

Alternative solution would be a blank placeholder until the promise resolves and then re-render the ability display. I wasn't able to get far with it because of how the flow exists. First we fetch pokemon (async) -> create pokemon -> create abilities (async)-> display, while it did work, I couldn't get the hooks to re render the object when the promise resolved for abilities (get useEffect to detect that pokemonObject.abilities changed for example) , except for one time but then it continued to render loop forever. This is something we should look at as it will also effect future components like moves.

jeremy-jtlo commented 2 years ago

Managed to run this locally after updating node on my laptop. No big issues and all unit tests pass. Good stuff.