loading...
Cover image for eSlayers part 6 - fetching matches... finally

eSlayers part 6 - fetching matches... finally

rembrandtreyes profile image Rembrandt Reyes (He/Him) ・2 min read

Finally made it to fetching some sort of match history. There is definitely a lot of refactoring that needs to be done, but for now, I am pretty content with what I got.

Things I completed today

  • Modified server.ts to add an additional proxy route.
  • Added a Match.tsx component which returns game_date and participants.
  • Added a Participant.tsx component which will return a summoner's name from their puuid.
  • Modified Summoner.tsx to test newly fetched data.
  • Modify fetchLeague.ts URL to the updated proxy API.
  • Modify fetchSummoner.ts URL to the updated proxy API and add in a new function to fetch summoner based on use puuid.
  • Add a new fetch to get data of a single TFT match.
  • Add a new fetch to get an array of matches.

Pain points

There were a lot of issues at first because I was trying to do some data manipulation on stuff that was not fully fetched yet. I thought I was doing things right with useSWR conditional fetching, but I just fooled myself, sorta. Lot's of console.logs and chrome debugger to see what was happening and where my code was breaking. I landed on a solution that seems to work 100% of the time now. I think once I start breaking things down even further the pieces will start to come together and things will play nicer with each other.

For the future

At some point, I am going to want to save this data to some sort of state manager. Deciding between redux or React.Context. I am also wondering if this app will be possible with just useState. I don't have a clear picture yet since I can do everything with fetching. Once I get to a "finalized" state of data that I am going to display I will decide on a state manager.

Posted on by:

rembrandtreyes profile

Rembrandt Reyes (He/Him)

@rembrandtreyes

I am here to make myself a better engineer. I create things for the web using the ReactJS ecosystem.

Discussion

markdown guide