eSlayers part 6 - fetching matches... finally

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.