eSlayers part 4 - More user info

New name because I would like this web app to be more than just auto battlers. I figure I could eventually break this out to show stats for many different games. The name is still a WIP (work in progress) but for now, we just keep coding.

Alright, so part 3 was all about transferring logic from the home page into the summoner page.

• I got the summoner name passed into the URL from the home page as a query param.
• Grabbed the query param from the URL within the summoner page component and displayed it on screen

Now I want to start building out the summoner info page with... You guessed it, more summoner info.

I'm going get a few things to display

• Summoner Name (got it)
• League - Tier, Rank, LP, W/L (win rate)
• Match History This will be part 5

How do we get Rank?
Riot API has TFT-LEAGUE-V1 which has a few GET requests

The one we want right now is /tft/league/v1/entries/by-summoner/{encryptedSummonerId}

And we get {encryptedSummonerId} from our first request in /tft/summoner/v1/summoners/by-name/{summonerName}

Got the {encryptedSummonerId} and added that to the query param at the end of /tft/league/v1/entries/by-summoner/{encryptedSummonerId}.

Here is the response

From this response, I am going to extract: tier, rank, leaguePoints, wins, losses, and create some logic for win rate %.

Looking through what Match History returns and it's a lot of data. Going to leave that for its own blog post and just return the users rank data for now.

So now my summoner page component looks like

and my summoner page looks like

I know there is someone (maybe not) out there thinking my code is cringe, just wait, there will be more cringe before I get to cleaning up the code and making it look nice. I try to get to MVP as quickly as possible and then go back through the code, optimize it, add ESLint, add Prettier, and all the goodies for maintaining quality code.

Parts 1, 2, 3

@rembrandtreyes