refactor: fetch soloQ ranks in a 2nd request in match details

client/src/components/Match/DetailedMatchTeam.vue

@@ -66,11 +66,11 @@
               </div>
               <div class="ml-1 flex flex-col justify-around">
                 <div
-                  :style="{backgroundImage: `url(${player.firstSum})`}"
+                  :style="{backgroundImage: `url(${player.firstSum.icon})`}"
                   class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
                 ></div>
                 <div
-                  :style="{backgroundImage: `url(${player.secondSum})`}"
+                  :style="{backgroundImage: `url(${player.secondSum.icon})`}"
                   class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
                 ></div>
               </div>

client/src/helpers/summoner.js

@@ -4,24 +4,6 @@ import summonersJSON from '@/data/summoner.json'
 
 const leaguesNumbers = { 'I': 1, 'II': 2, 'III': 3, 'IV': 4 }
 
-/**
- * Return all the infos about a detailed match
- * @param  detailedMatch : all data about the match from the Riot API
- */
-export function createDetailedMatchData(detailedMatch) {
-  detailedMatch.blueTeam.players = detailedMatch.blueTeam.players.map(p => getPlayerData(p))
-  detailedMatch.redTeam.players = detailedMatch.redTeam.players.map(p => getPlayerData(p))
-
-  function getPlayerData(p) {
-    // Summoner Spells
-    p.firstSum = getSummonerLink(p.firstSum)
-    p.secondSum = getSummonerLink(p.secondSum)
-    return p
-  }
-
-  return detailedMatch
-}
-
 /**
  * Return all the infos about a list of matches built with the Riot API data
  * @param {Object} RiotData : all data from the Riot API

client/src/store/modules/detailedMatch.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import { axios } from '@/plugins/axios'
-import { createDetailedMatchData } from '@/helpers/summoner'
 
 export const namespaced = true
 
@@ -21,6 +20,11 @@ export const mutations = {
     const index = state.matches.findIndex(m => m.gameId === matchDetails.gameId)
     Vue.set(state.matches, index, matchDetails)
   },
+  MATCHE_RANKS_FOUND(state, { gameId, blueTeam, redTeam }) {
+    const match = state.matches.find(m => m.gameId === gameId)
+    match.blueTeam.players = blueTeam
+    match.redTeam.players = redTeam
+  },
 }
 
 export const actions = {
@@ -31,8 +35,16 @@ export const actions = {
     const resp = await axios(({ url: 'match-details', data: { gameId, region: rootState.currentRegion }, method: 'POST' })).catch(() => { })
     console.log('--- DETAILS INFOS ---')
     console.log(resp.data)
-    const detailedMatch = createDetailedMatchData(resp.data.matchDetails)
-    commit('MATCHE_FOUND', detailedMatch)
+    // const detailedMatch = createDetailedMatchData(resp.data.matchDetails)
+    commit('MATCHE_FOUND', resp.data.matchDetails)
+
+    // If the ranks of the players are not yet known
+    if (resp.data.matchDetails.blueTeam.players[0].rank === undefined) {
+      const ranks = await axios(({ url: 'match-details-ranks', data: { gameId, region: rootState.currentRegion }, method: 'POST' })).catch(() => { })
+      console.log('--- RANK OF MATCH DETAILS ---')
+      console.log(ranks.data)
+      commit('MATCHE_RANKS_FOUND', { gameId, ...ranks.data })
+    }
   }
 }
 

server/app/Controllers/Http/MatchController.js

@@ -5,9 +5,27 @@ const DetailedMatch = use('App/Models/DetailedMatch')
 const DetailedMatchTransformer = use('App/Transformers/DetailedMatchTransformer')
 const MatchService = use('App/Services/MatchService')
 const StatsService = use('App/Services/StatsService')
+const SummonerService = use('App/Services/SummonerService')
 const Summoner = use('App/Models/Summoner')
 
 class MatchController {
+  /**
+   * Get the soloQ rank of all the players of the team
+   * @param summoner all the data of the summoner
+   * @param region of the match
+   */
+  async _getPlayerRank(summoner, region) {
+    const account = await SummonerService.getAccount(summoner.name, region)
+    if (account) {
+      const ranked = await SummonerService.getRanked(account)
+      summoner.rank = ranked.soloQ ? (({ tier, shortName }) => ({ tier, shortName }))(ranked.soloQ) : null
+    } else {
+      summoner.rank = null
+    }
+
+    return summoner
+  }
+
   /**
    *  POST - Return data from matches searched by gameIds
    */
@@ -50,13 +68,40 @@ class MatchController {
       await DetailedMatch.create(matchDetails)
     }
 
-
     console.timeEnd('MatchDetails')
 
     return response.json({
       matchDetails
     })
   }
+
+  /**
+   * POST - Return ranks of players for a specific game
+   */
+  async showRanks({ request, response }) {
+    console.time('Ranks')
+    const gameId = request.input('gameId')
+    const region = request.input('region')
+
+    let matchDetails = await DetailedMatch.where({ gameId, region }).first()
+    if (!matchDetails) {
+      return response.json(null)
+    }
+
+    const requestsBlue = matchDetails.blueTeam.players.map(p => this._getPlayerRank(p, region))
+    matchDetails.blueTeam.players = await Promise.all(requestsBlue)
+
+    const requestsRed = matchDetails.redTeam.players.map(p => this._getPlayerRank(p, region))
+    matchDetails.redTeam.players = await Promise.all(requestsRed)
+
+    matchDetails.save()
+    console.timeEnd('Ranks')
+
+    return response.json({
+      blueTeam: matchDetails.blueTeam.players,
+      redTeam: matchDetails.redTeam.players,
+    })
+  }
 }
 
 module.exports = MatchController

server/app/Transformers/DetailedMatchTransformer.js

@@ -20,8 +20,8 @@ class DetailedMatchTransformer extends MatchTransformer {
     const globalInfos = super.getGameInfos(match)
 
     // Teams
-    const firstTeam = await this.getTeamData(match, match.teams[0])
-    const secondTeam = await this.getTeamData(match, match.teams[1])
+    const firstTeam = this.getTeamData(match, match.teams[0])
+    const secondTeam = this.getTeamData(match, match.teams[1])
 
     return {
       gameId: match.gameId,
@@ -37,7 +37,7 @@ class DetailedMatchTransformer extends MatchTransformer {
    * @param match raw match data from Riot API
    * @param team raw team data from Riot API
    */
-  async getTeamData(match, team) {
+  getTeamData(match, team) {
     let win = team.win
     if (match.gameDuration < 300) {
       win = 'Remake'
@@ -75,11 +75,13 @@ class DetailedMatchTransformer extends MatchTransformer {
     // Players
     let players = teamPlayers
       .map(p => super.getPlayerData(match, p, true, teamStats))
+      .map(p => {
+        p.firstSum = super.getSummonerSpell(p.firstSum)
+        p.secondSum = super.getSummonerSpell(p.secondSum)
+        return p
+      })
       .sort(this.sortTeamByRole)
 
-    const requests = players.map(p => this.getPlayerRank(p, match.platformId))
-    players = await Promise.all(requests)
-
     return {
       bans,
       barons: team.baronKills,
@@ -93,23 +95,6 @@ class DetailedMatchTransformer extends MatchTransformer {
       towers: team.towerKills,
     }
   }
-
-  /**
-   * Get the soloQ rank of all the players of the team
-   * @param summoner all the data of the summoner
-   * @param region of the match
-   */
-  async getPlayerRank(summoner, region) {
-    const account = await SummonerService.getAccount(summoner.name, region)
-    if (account) {
-      const ranked = await SummonerService.getRanked(account)
-      summoner.rank = ranked.soloQ ? (({ tier, shortName }) => ({ tier, shortName }))(ranked.soloQ) : null
-    } else {
-      summoner.rank = null
-    }
-
-    return summoner
-  }
 }
 
 module.exports = new DetailedMatchTransformer()

server/app/Transformers/MatchTransformer.js

@@ -17,11 +17,13 @@ class MatchTransformer {
     const champions = await Jax.CDragon.champions()
     const perks = await Jax.CDragon.perks()
     const perkstyles = await Jax.CDragon.perkstyles()
+    const summonerSpells = await Jax.CDragon.summonerSpells()
 
     this.champions = champions
     this.items = items
     this.perks = perks
     this.perkstyles = perkstyles.styles
+    this.summonerSpells = summonerSpells
     this.sortTeamByRole = Helpers.sortTeamByRole
   }
 
@@ -165,6 +167,21 @@ class MatchTransformer {
     }
     return timeline.lane
   }
+
+  /**
+   * Get Summoner Spell Data from CDragon
+   * @param id of the summonerSpell
+   */
+  getSummonerSpell(id) {
+    if (id === 0) return null
+    const spell = this.summonerSpells.find(s => s.id === id)
+    const spellName = spell.iconPath.split('/assets/')[1].toLowerCase()
+    return {
+      name: spell.name,
+      description: spell.description,
+      icon: `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/${spellName}`
+    }
+  }
 }
 
 module.exports = MatchTransformer

server/providers/Jax/src/Endpoints/CDragonEndpoint.js

@@ -16,6 +16,10 @@ class CDragonEndpoint {
   perkstyles() {
     return new CDragonRequest('perkstyles.json').execute()
   }
+
+  summonerSpells() {
+    return new CDragonRequest('summoner-spells.json').execute()
+  }
 }
 
 module.exports = CDragonEndpoint

server/start/routes.js

@@ -29,3 +29,4 @@ Route.post('/api', 'SummonerController.api')
 Route.post('/ddragon', 'DDragonController.index')
 Route.post('/match', 'MatchController.index')
 Route.post('/match-details', 'MatchController.show')
+Route.post('/match-details-ranks', 'MatchController.showRanks')