Creation of a button to display 50 matchs

This commit is contained in:
moinnet 2021-11-28 21:13:12 +01:00
parent db92410398
commit 56b569f27e
2 changed files with 40 additions and 2 deletions

View file

@ -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,

View file

@ -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() {