feat: update stats without a reload when summoner load more matches

client/src/components/Summoner/SummonerStats.vue

@@ -23,7 +23,6 @@
               </div>
               <div class="mt-2 leading-tight text-xs text-blue-100 font-normal italic">
                 Load more matches
-                <br />and refresh the page
                 <br />to have better results.
               </div>
             </div>

client/src/helpers/summoner.js

@@ -52,20 +52,6 @@ export function createMatchData(matches) {
   return matches
 }
 
-/**
- * Return the list of teammates of the summoner in a nice way
- * @param {Object} mates : mates list from the API
- */
-export function createMatesData(mates) {
-  return mates
-    .map(mate => {
-      mate.total = mate.wins + mate.losses
-      mate.winrate = +(100 * mate.wins / mate.total).toFixed(1) + '%'
-      return mate
-    })
-    .sort((a, b) => (a.total < b.total) ? 1 : -1)
-}
-
 /**
  * Return all the infos about a summoner built with the Riot API data
  * @param {Object} RiotData : all data from the Riot API

client/src/store/modules/summoner.js

@@ -1,5 +1,5 @@
 import { axios } from '@/plugins/axios'
-import { createMatchData, createMatesData, createSummonerData } from '@/helpers/summoner'
+import { createMatchData, createSummonerData } from '@/helpers/summoner'
 
 export const namespaced = true
 
@@ -11,6 +11,7 @@ export const state = {
     matches: [],
     mates: [],
     ranked: {},
+    stats: {},
     playing: false
   },
   matchesLoading: false,
@@ -21,14 +22,14 @@ export const mutations = {
   MATCHES_LOADING(state) {
     state.matchesLoading = true
   },
-  MATCHES_FOUND(state, { newMatches, mates }) {
+  MATCHES_FOUND(state, { newMatches, stats }) {
     state.matchesLoading = false
 
     state.infos.matches = [...state.infos.matches, ...newMatches]
 
     state.infos.matchIndex += newMatches.length
 
-    state.infos.mates = mates
+    state.infos.stats = stats
   },
   SUMMONER_REQUEST(state) {
     state.status = 'loading'
@@ -59,8 +60,7 @@ export const actions = {
     console.log('--- MATCHES INFOS ---')
     console.log(resp.data)
     const newMatches = createMatchData(resp.data.matches)
-    const mates = createMatesData(resp.data.mates)
+    commit('MATCHES_FOUND', { newMatches, stats: resp.data.stats })
-    commit('MATCHES_FOUND', { newMatches, mates })
   },
   async summonerRequest({ commit, dispatch, rootState }, { summoner, region }) {
     region = rootState.regionsList[region]

server/app/Controllers/Http/MatchController.js

@@ -21,9 +21,36 @@ class MatchController {
 
     await summonerDB.save()
 
+    // Stats
+    const globalStats = await Match.globalStats(account.puuid)
+    const gamemodeStats = await Match.gamemodeStats(account.puuid)
+    const roleStats = await Match.roleStats(account.puuid)
+    // Check if all roles are in the array
+    const roles = ['TOP', 'JUNGLE', 'MIDDLE', 'BOTTOM', 'SUPPORT']
+    for (const role of roles) {
+      if (!roleStats.find(r => r.role === role)) {
+        roleStats.push({
+          count: 0,
+          losses: 0,
+          role,
+          wins: 0
+        })
+      }
+    }
+    const championClassStats = await Match.championClassStats(account.puuid)
+    const mates = await Match.mates(account.puuid, account.name)
+
+    const stats = {
+      global: globalStats[0],
+      league: gamemodeStats,
+      role: roleStats.sort(MatchHelper.sortTeamByRole),
+      class: championClassStats,
+      mates,
+    }
+
     return response.json({
       matches,
-      mates: await Match.mates(account.puuid, account.name)
+      stats,
     })
   }