Creation of a button to display 50 matchs

client/src/store/modules/summoner.js

@@ -75,6 +75,15 @@ export const mutations = {
     state.champions.championsLoaded = false
     state.records.recordsLoaded = false
   },
+  MATCHES_FOUND50(state, { newMatches, stats }) {
+    state.basic.recentActivity = stats.recentActivity
+    state.overview.matchesLoading = false
+    state.overview.matches = [...state.overview.matches, ...newMatches]
+    state.overview.matchIndex += 50
+    state.overview.stats = stats
+    state.champions.championsLoaded = false
+    state.records.recordsLoaded = false
+  },
   OVERVIEW_FOUND(state, infos) {
     state.basic.recentActivity = infos.stats.recentActivity
     state.overview.matches = infos.matches
@@ -200,6 +209,26 @@ export const actions = {
     const newMatches = createMatchData(resp.data.matches)
     commit('MATCHES_FOUND', { newMatches, stats: resp.data.stats })
   },
+  async more50Matches({ commit, getters, rootState }) {
+    commit('MATCHES_LOADING')
+
+    const matchIds = getters.filteredMatchList
+      .slice(state.overview.matchIndex, state.overview.matchIndex + 50)
+
+    const resp = await axios(({
+      url: 'match',
+      data: {
+        puuid: state.basic.account.puuid,
+        region: rootState.regionsList[rootState.settings.region],
+        matchIds
+      },
+      method: 'POST'
+    })).catch(() => { })
+    console.log('---MATCHES INFOS---')
+    console.log(resp.data)
+    const newMatches = createMatchData(resp.data.matches)
+    commit('MATCHES_FOUND50', { newMatches, stats: resp.data.stats })
+  },
   async overviewRequest({ commit, rootState }) {
     const resp = await axios(({
       url: 'summoner/overview',
@@ -240,6 +269,9 @@ export const getters = {
   moreMatchesToFetch: (state, getters) => {
     return state.overview.matchIndex < getters.filteredMatchList.length
   },
+  more50MatchesToFetch: (state, getters) => {
+    return state.overview.matchIndex < getters.filteredMatchList.length
+  },
   overviewLoaded: state => state.overview.loaded,
   playing: state => state.live.playing,
   regionFilterApplied: state => !!state.basic.currentSeason,

client/src/views/Summoner.vue

@@ -33,6 +33,12 @@
           :loading="matchesLoading"
           btn-class="block px-4 py-2 mx-auto mt-4 font-semibold bg-blue-800 rounded-md shadow-lg hover:bg-blue-1000"
         >More matches</LoadingButton>
+        <LoadingButton
+          v-if="more50MatchesToFetch"
+          @clicked="more50Matches"
+          :loading="matchesLoading"
+          btn-class="block px-4 py-2 mx-auto mt-4 font-semibold bg-blue-800 rounded-md shadow-lg hover:bg-blue-1000"
+        >More 50 matches</LoadingButton>
       </div>
       <div v-else>
         <div class="flex justify-center">
@@ -78,7 +84,7 @@ export default {
       current: state => state.summoner.live.match,
       overview: state => state.summoner.overview,
     }),
-    ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])
+    ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'more50MatchesToFetch', 'overviewLoaded', 'summonerFound'])
   },
 
   watch: {
@@ -107,7 +113,7 @@ export default {
       }
     },
     ...mapActions('cdragon', ['getRunes']),
-    ...mapActions('summoner', ['moreMatches', 'overviewRequest', 'sliceOverviewMatches']),
+    ...mapActions('summoner', ['moreMatches', 'more50Matches', 'overviewRequest', 'sliceOverviewMatches']),
   },
 
   metaInfo() {