feat: add button to load 10 more matches

client/src/components/Match.vue

@@ -41,11 +41,11 @@
               </div>
               <div class="ml-1 flex flex-row sm:flex-col sm:justify-around">
                 <div
-                  :style="{background: `url(${data.primaryRune}) center/cover`}"
+                  :style="[data.primaryRune ? {background: `url(${data.primaryRune}) center/cover`} : '']"
                   class="w-6 h-6 bg-blue-1000 rounded-md"
                 ></div>
                 <div
-                  :style="{background: `url(${data.secondaryRune}) center/cover`}"
+                  :style="[data.secondaryRune ? {background: `url(${data.secondaryRune}) center/cover`} : '']"
                   class="w-6 h-6 bg-blue-1000 rounded-md"
                 ></div>
               </div>
@@ -110,7 +110,7 @@
         </div>
 
         <div class="third w-1/3 py-1 flex items-center">
-          <div>
+          <div v-if="data.allyTeam.length > 1">
             <div
               v-for="(ally, index) in data.allyTeam"
               :key="'player-' + index"

client/src/helpers/summoner.js

@@ -3,28 +3,10 @@ import { maps, gameModes } from '@/data/data.js'
 import summonersJSON from '@/data/summoner.json'
 
 /**
- * Return all the infos about a summoner built with the Riot API data
+ * Return all the infos about a list of matches built with the Riot API data
  * @param {Object} RiotData : all data from the Riot API
- * @param {Object} championsInfos : champions data from the Riot API
  */
-export function createSummonerData(RiotData) {
-  console.log('--- ALL INFOS ---')
-  console.log(RiotData)
-
-  const userStats = RiotData.account
-  const soloQStats = RiotData.soloQ
-  const matches = RiotData.matchesDetails
-
-  const soloQ = soloQStats ? {} : null
-  if (soloQ) {
-    soloQ.rank = `${soloQStats.tier} ${soloQStats.rank}`
-    soloQ.rankImgLink = getRankImg(soloQStats)
-    soloQ.wins = soloQStats.wins
-    soloQ.losses = soloQStats.losses
-    soloQ.winrate = +(soloQ.wins * 100 / (soloQ.wins + soloQ.losses)).toFixed(1) + '%'
-    soloQ.lp = soloQStats.leaguePoints
-  }
-
+export function createMatchData(matches) {
   for (const match of matches) {
     for (let i = 0; i < match.items.length; i++) {
       match.items[i] = getItemLink(match.items[i])
@@ -40,14 +22,34 @@ export function createSummonerData(RiotData) {
     if (!match.gamemode) match.gamemode = 'Undefined gamemode'
   } // end loop matches
 
+  return matches
+}
+
+/**
+ * Return all the infos about a summoner built with the Riot API data
+ * @param {Object} RiotData : all data from the Riot API
+ */
+export function createSummonerData(RiotData) {
+  console.log('--- ALL INFOS ---')
+  console.log(RiotData)
+
+  // Ranked Stats
+  const soloQStats = RiotData.soloQ
+  const soloQ = soloQStats ? {} : null
+  if (soloQ) {
+    soloQ.rank = `${soloQStats.tier} ${soloQStats.rank}`
+    soloQ.rankImgLink = getRankImg(soloQStats)
+    soloQ.wins = soloQStats.wins
+    soloQ.losses = soloQStats.losses
+    soloQ.winrate = +(soloQ.wins * 100 / (soloQ.wins + soloQ.losses)).toFixed(1) + '%'
+    soloQ.lp = soloQStats.leaguePoints
+  }
+
   return {
-    accountId: userStats.accountId,
-    allMatches: RiotData.allMatches,
-    matches: RiotData.matchesDetails,
-    profileIconId: userStats.profileIconId,
-    name: userStats.name,
-    level: userStats.summonerLevel,
+    account: RiotData.account,
     soloQ,
+    matchList: RiotData.allMatches,
+    matches: createMatchData(RiotData.matchesDetails)
   }
 }
 

client/src/store/modules/summoner.js

@@ -1,19 +1,34 @@
 import { axios } from '@/plugins/axios'
-import { createSummonerData } from '@/helpers/summoner'
+import { createMatchData, createSummonerData } from '@/helpers/summoner'
 
 export const namespaced = true
 
 export const state = {
-  infos: [],
+  infos: {
+    account: {},
+    matchIndex: 0,
+    matchList: [],
+    matches: [],
+    soloQ: {}
+  },
   status: '',
 }
 
 export const mutations = {
+  MATCHES_FOUND(state, newMatches) {
+    state.infos.matches = [...state.infos.matches, ...newMatches]
+
+    state.infos.matchIndex += newMatches.length
+  },
   SUMMONER_REQUEST(state) {
     state.status = 'loading'
   },
   SUMMONER_FOUND(state, infos) {
-    state.infos = infos
+    state.infos.account = infos.account
+    state.infos.matchList = infos.matchList
+    state.infos.matches = infos.matches
+    state.infos.soloQ = infos.soloQ
+    state.infos.matchIndex = infos.matches.length
     state.status = 'found'
   },
   SUMMONER_NOT_FOUND(state) {
@@ -22,6 +37,13 @@ export const mutations = {
 }
 
 export const actions = {
+  async moreMatches({ commit }) {
+    const account = state.infos.account
+    const gameIds = state.infos.matchList.slice(state.infos.matchIndex, state.infos.matchIndex + 10).map(({ gameId }) => gameId)
+
+    const resp = await axios(({ url: 'match', data: { account, gameIds }, method: 'POST' })).catch(() => { })
+    commit('MATCHES_FOUND', createMatchData(resp.data))
+  },
   async summonerRequest({ commit, dispatch, rootState }, { summoner, region }) {
     region = rootState.regionsList[region]
     commit('SUMMONER_REQUEST')
@@ -47,6 +69,7 @@ export const actions = {
 }
 
 export const getters = {
+  moreMatchesToFetch: state => state.infos.matchIndex < state.infos.matchList.length,
   summonerFound: state => state.status === 'found',
   summonerNotFound: state => state.status === 'error',
   summonerLoading: state => state.status === 'loading',

client/src/views/Summoner.vue

@@ -23,8 +23,8 @@
           <div class="flex justify-between xl:px-12">
             <div>
               <h1 class="text-4xl font-extrabold uppercase">
-                <span class="text-5xl">{{ summonerInfos.name[0] }}</span>
-                <span>{{ summonerInfos.name.substring(1) }}</span>
+                <span class="text-5xl">{{ summonerInfos.account.name[0] }}</span>
+                <span>{{ summonerInfos.account.name.substring(1) }}</span>
               </h1>
               <div class="flex">
                 <div>
@@ -34,7 +34,7 @@
                   >
                     <div
                       class="absolute left-0 bottom-0 w-8 h-8 flex items-center justify-center bg-blue-900 rounded-full text-xs text-teal-500 font-extrabold border-2 border-teal-400"
-                    >{{ summonerInfos.level }}</div>
+                    >{{ summonerInfos.account.summonerLevel }}</div>
                   </div>
                 </div>
                 <div v-if="summonerInfos.soloQ" class="ml-6 leading-none">
@@ -73,7 +73,7 @@
             </div>
 
             <div>
-              <RecentActivity :matches="summonerInfos.allMatches" />
+              <RecentActivity :matches="summonerInfos.matchList" />
             </div>
           </div>
 
@@ -86,6 +86,12 @@
               />
             </ul>
           </div>
+
+          <button
+            v-if="moreMatchesToFetch"
+            @click="moreMatches"
+            class="mt-4 block mx-auto bg-blue-800 px-4 py-2 rounded-md font-semibold hover:bg-blue-1000 shadow-lg"
+          >More matches</button>
         </div>
       </template>
 
@@ -121,7 +127,7 @@ export default {
 
   computed: {
     getSummonerIcon() {
-      return `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${this.summonerInfos.profileIconId}.png) center/cover`
+      return `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${this.summonerInfos.account.profileIconId}.png) center/cover`
     },
     summoner() {
       return this.$route.params.name
@@ -132,7 +138,7 @@ export default {
     ...mapState({
       summonerInfos: state => state.summoner.infos
     }),
-    ...mapGetters('summoner', ['summonerFound', 'summonerNotFound', 'summonerLoading'])
+    ...mapGetters('summoner', ['moreMatchesToFetch', 'summonerFound', 'summonerNotFound', 'summonerLoading'])
   },
 
   watch: {
@@ -153,7 +159,7 @@ export default {
     redirect(summoner, region) {
       this.$router.push(`/summoner/${region}/${summoner}`)
     },
-    ...mapActions('summoner', ['summonerRequest'])
+    ...mapActions('summoner', ['summonerRequest', 'moreMatches']),
   }
 }
 </script>

server/app/Controllers/Http/MatchController.js

@@ -0,0 +1,19 @@
+'use strict'
+
+const MatchHelper = use('App/Helpers/MatchHelper')
+
+class MatchController {
+  /**
+   *  POST - Return data from matches searched by gameIds
+   */
+  async index({ request, response }) {
+    console.log('More Matches Request')
+    const account = request.input('account')
+    const gameIds = request.input('gameIds')
+
+    const result = await MatchHelper.getMatches(account, gameIds)
+    return response.json(result)
+  }
+}
+
+module.exports = MatchController

server/app/Controllers/Http/SummonerController.js

@@ -4,7 +4,6 @@ const Jax = use('Jax')
 const MatchHelper = use('App/Helpers/MatchHelper')
 
 class SummonerController {
-
   /**
    *  POST Endpoint : get summoner data
    */

server/app/Transformers/MatchTransformer.js

@@ -55,17 +55,20 @@ class MatchTransformer extends BumblebeeTransformer {
     }, 0)
     const kp = +((kills + assists) * 100 / totalKills).toFixed(1) + '%'
 
-    const primaryRuneCategory = runes.find(r => r.id === player.stats.perkPrimaryStyle)
-    let primaryRune
-    for (const subCat of primaryRuneCategory.slots) {
-      primaryRune = subCat.runes.find(r => r.id === player.stats.perk0)
-      if (primaryRune) {
-        break
+    let primaryRune = null
+    let secondaryRune = null
+    if(player.stats.perkPrimaryStyle) {
+      const primaryRuneCategory = runes.find(r => r.id === player.stats.perkPrimaryStyle)
+      for (const subCat of primaryRuneCategory.slots) {
+        primaryRune = subCat.runes.find(r => r.id === player.stats.perk0)
+        if (primaryRune) {
+          break
+        }
       }
+      primaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${primaryRune.icon}`
+      secondaryRune = runes.find(r => r.id === player.stats.perkSubStyle)
+      secondaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${secondaryRune.icon}`
     }
-    primaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${primaryRune.icon}`
-    let secondaryRune = runes.find(r => r.id === player.stats.perkSubStyle)
-    secondaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${secondaryRune.icon}`
 
     const items = []
     for (let i = 0; i < 6; i++) {

server/start/routes.js

@@ -27,3 +27,4 @@ Route.get('/', async () => {
 
 Route.post('/api', 'SummonerController.api')
 Route.post('/ddragon', 'DDragonController.index')
+Route.post('/match', 'MatchController.index')