From 526611a51730360dfe08c7ad97001accad80cef9 Mon Sep 17 00:00:00 2001 From: Valentin Kaelin Date: Fri, 27 Dec 2019 18:38:43 +0100 Subject: [PATCH] refactor: make api call only when needed for each view --- .../Summoner/Overview/SummonerChampions.vue | 2 +- .../Summoner/Overview/SummonerMates.vue | 2 +- .../Summoner/Overview/SummonerStats.vue | 2 +- client/src/helpers/summoner.js | 12 +- client/src/layouts/Default.vue | 20 +-- client/src/store/modules/summoner.js | 146 +++++++++--------- client/src/views/Summoner.vue | 16 +- client/src/views/SummonerChampions.vue | 8 +- .../Controllers/Http/SummonerController.js | 60 ++++--- server/start/routes.js | 5 +- 10 files changed, 154 insertions(+), 119 deletions(-) diff --git a/client/src/components/Summoner/Overview/SummonerChampions.vue b/client/src/components/Summoner/Overview/SummonerChampions.vue index ad5ca6a..ef03d38 100644 --- a/client/src/components/Summoner/Overview/SummonerChampions.vue +++ b/client/src/components/Summoner/Overview/SummonerChampions.vue @@ -105,7 +105,7 @@ export default { return this.stats.champion.reduce((a, b) => a.count > b.count ? a : b).count }, ...mapState({ - stats: state => state.summoner.infos.stats + stats: state => state.summoner.overview.stats }), }, diff --git a/client/src/components/Summoner/Overview/SummonerMates.vue b/client/src/components/Summoner/Overview/SummonerMates.vue index 654192e..2662d1e 100644 --- a/client/src/components/Summoner/Overview/SummonerMates.vue +++ b/client/src/components/Summoner/Overview/SummonerMates.vue @@ -82,7 +82,7 @@ export default { return this.mates.length > 0 }, ...mapState({ - mates: state => state.summoner.infos.stats.mates + mates: state => state.summoner.overview.stats.mates }), }, diff --git a/client/src/components/Summoner/Overview/SummonerStats.vue b/client/src/components/Summoner/Overview/SummonerStats.vue index c017e7e..8815252 100644 --- a/client/src/components/Summoner/Overview/SummonerStats.vue +++ b/client/src/components/Summoner/Overview/SummonerStats.vue @@ -248,7 +248,7 @@ export default { return rest }, ...mapState({ - stats: state => state.summoner.infos.stats + stats: state => state.summoner.overview.stats }), }, diff --git a/client/src/helpers/summoner.js b/client/src/helpers/summoner.js index 48411b2..a66e207 100644 --- a/client/src/helpers/summoner.js +++ b/client/src/helpers/summoner.js @@ -15,7 +15,7 @@ export function createMatchData(matches) { const date = new Date(match.date) const dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' } - const timeOptions = { hour12: false, hour: '2-digit', minute:'2-digit' } + const timeOptions = { hour12: false, hour: '2-digit', minute: '2-digit' } match.fullDate = { date: date.toLocaleString('fr', dateOptions), time: date.toLocaleString('fr', timeOptions) } match.date = timeDifference(match.date) @@ -28,10 +28,10 @@ export function createMatchData(matches) { } /** - * Return all the infos about a summoner built with the Riot API data + * Return the basic infos about a summoner built with the Riot API data * @param {Object} RiotData : all data from the Riot API */ -export function createSummonerData(RiotData) { +export function createBasicSummonerData(RiotData) { // Ranked Stats RiotData.ranked.soloQ = getLeagueData(RiotData.ranked.soloQ, 'Solo/Duo') if (!RiotData.ranked.soloQ) delete RiotData.ranked.soloQ @@ -57,11 +57,9 @@ export function createSummonerData(RiotData) { return { account: RiotData.account, - ranked: RiotData.ranked, matchList: RiotData.allMatches, - matches: createMatchData(RiotData.matchesDetails), + ranked: RiotData.ranked, playing: RiotData.playing, - stats: RiotData.stats, } } @@ -82,7 +80,7 @@ export function getRankImg(leagueData) { } function getSummonerLink(id) { - if(id === 0) return null + if (id === 0) return null const spellName = summonersJSON.find(s => s.id === id).iconPath.split('/assets/')[1].toLowerCase() return `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/${spellName}` } diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue index 54a824a..102b4be 100644 --- a/client/src/layouts/Default.vue +++ b/client/src/layouts/Default.vue @@ -24,8 +24,8 @@

- {{ summonerInfos.account.name[0] }} - {{ summonerInfos.account.name.substring(1) }} + {{ basic.account.name[0] }} + {{ basic.account.name.substring(1) }}

{{ summonerInfos.account.summonerLevel }}
+ >{{ basic.account.summonerLevel }}
- +
@@ -128,7 +128,7 @@ export default { return `${this.summoner}|${this.region}` }, ...mapState({ - summonerInfos: state => state.summoner.infos + basic: state => state.summoner.basic }), ...mapGetters('summoner', ['playing', 'summonerFound', 'summonerNotFound', 'summonerLoading']) }, @@ -148,13 +148,13 @@ export default { methods: { apiCall() { - this.summonerRequest({ summoner: this.summoner, region: this.region }) + this.basicRequest({ summoner: this.summoner, region: this.region }) }, redirect(summoner, region) { this.$router.push(`/summoner/${region}/${summoner}`) }, ...mapActions(['updateCurrentRegion']), - ...mapActions('summoner', ['summonerRequest']), + ...mapActions('summoner', ['basicRequest']), } } diff --git a/client/src/store/modules/summoner.js b/client/src/store/modules/summoner.js index c525252..fb4c67a 100644 --- a/client/src/store/modules/summoner.js +++ b/client/src/store/modules/summoner.js @@ -1,96 +1,76 @@ import { axios } from '@/plugins/axios' -import { createMatchData, createSummonerData } from '@/helpers/summoner' +import { createMatchData, createBasicSummonerData } from '@/helpers/summoner' export const namespaced = true export const state = { - infos: { + basic: { account: {}, - champions: [], - matchIndex: 0, matchList: [], - matches: [], - mates: [], ranked: {}, - stats: {}, - playing: false + playing: false, + status: '', + }, + overview: { + matchIndex: 0, + matches: [], + stats: {}, + loaded: false, + matchesLoading: false, + }, + champions: { + list: [], + championsLoaded: false }, - championsLoaded: false, - matchesLoading: false, - status: '', } export const mutations = { + BASIC_REQUEST(state) { + state.basic.status = 'loading' + }, CHAMPIONS_FOUND(state, { champions }) { - state.infos.champions = champions - state.championsLoaded = true + state.champions.list = champions + state.champions.championsLoaded = true }, MATCHES_LOADING(state) { - state.matchesLoading = true + state.overview.matchesLoading = true }, MATCHES_FOUND(state, { newMatches, stats }) { - state.matchesLoading = false - - state.infos.matches = [...state.infos.matches, ...newMatches] - - state.infos.matchIndex += newMatches.length - - state.infos.stats = stats - - state.championsLoaded = false + state.overview.matchesLoading = false + state.overview.matches = [...state.infos.matches, ...newMatches] + state.overview.matchIndex += newMatches.length + state.overview.stats = stats + state.champions.championsLoaded = false }, - SUMMONER_REQUEST(state) { - state.status = 'loading' + OVERVIEW_FOUND(state, infos) { + state.overview.matches = infos.matches + state.overview.matchIndex = infos.matches.length + state.overview.stats = infos.stats + state.overview.loaded = true }, SUMMONER_FOUND(state, infos) { - state.infos.account = infos.account - state.infos.matchList = infos.matchList - state.infos.matches = infos.matches - state.infos.ranked = infos.ranked - state.infos.matchIndex = infos.matches.length - state.infos.playing = infos.playing - state.infos.stats = infos.stats - state.status = 'found' - state.championsLoaded = false + state.basic.account = infos.account + state.basic.matchList = infos.matchList + state.basic.ranked = infos.ranked + state.basic.playing = infos.playing + state.basic.status = 'found' + state.champions.championsLoaded = false }, SUMMONER_NOT_FOUND(state) { - state.status = 'error' - } + state.basic.status = 'error' + }, } export const actions = { - async championStats({ commit }, queue = null) { - if (Number(queue) === -1) - queue = null - const resp = await axios(({ url: 'champions', data: { puuid: state.infos.account.puuid, queue: queue }, method: 'POST' })).catch(() => { }) - console.log('CHAMPIONS STATS') - console.log('queue: ', queue) - console.log(resp.data) - - commit('CHAMPIONS_FOUND', { champions: resp.data }) - }, - async moreMatches({ commit }) { - commit('MATCHES_LOADING') - - 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(() => { }) - console.log('--- MATCHES INFOS ---') - console.log(resp.data) - const newMatches = createMatchData(resp.data.matches) - commit('MATCHES_FOUND', { newMatches, stats: resp.data.stats }) - }, - async summonerRequest({ commit, dispatch, rootState }, { summoner, region }) { + async basicRequest({ commit, dispatch, rootState }, { summoner, region }) { region = rootState.regionsList[region] - commit('SUMMONER_REQUEST') + commit('BASIC_REQUEST') try { - const resp = await axios(({ url: 'api', data: { summoner, region }, method: 'POST' })) + const resp = await axios(({ url: 'summoner-basic', data: { summoner, region }, method: 'POST' })) if (resp.data) { console.log('--- SUMMONER INFOS ---') console.log(resp.data) - dispatch('ddragon/getVersion', resp.data.version, { root: true }) - const infos = createSummonerData(resp.data) + const infos = createBasicSummonerData(resp.data) commit('SUMMONER_FOUND', infos) } else { commit('SUMMONER_NOT_FOUND') @@ -105,14 +85,42 @@ export const actions = { commit('SUMMONER_NOT_FOUND') console.log(error) } + }, + async championStats({ commit }, queue = null) { + const resp = await axios(({ url: 'summoner-champions', data: { puuid: state.basic.account.puuid, queue: queue }, method: 'POST' })).catch(() => { }) + console.log('CHAMPIONS STATS') + console.log('queue: ', queue) + console.log(resp.data) + + commit('CHAMPIONS_FOUND', { champions: resp.data }) + }, + async moreMatches({ commit }) { + commit('MATCHES_LOADING') + + const account = state.basic.account + const gameIds = state.basic.matchList.slice(state.overview.matchIndex, state.overview.matchIndex + 10).map(({ gameId }) => gameId) + + const resp = await axios(({ url: 'match', data: { account, gameIds }, method: 'POST' })).catch(() => { }) + console.log('--- MATCHES INFOS ---') + console.log(resp.data) + const newMatches = createMatchData(resp.data.matches) + commit('MATCHES_FOUND', { newMatches, stats: resp.data.stats }) + }, + async overviewRequest({ commit }) { + const resp = await axios(({ url: 'summoner-overview', data: { account: state.basic.account }, method: 'POST' })).catch(() => { }) + console.log('OVERVIEW') + console.log(resp.data) + resp.data.matches = createMatchData(resp.data.matchesDetails) + commit('OVERVIEW_FOUND', resp.data) } } export const getters = { - matchesLoading: state => state.matchesLoading, - moreMatchesToFetch: state => state.infos.matchIndex < state.infos.matchList.length, - playing: state => state.infos.playing, - summonerFound: state => state.status === 'found', - summonerNotFound: state => state.status === 'error', - summonerLoading: state => state.status === 'loading', + matchesLoading: state => state.overview.matchesLoading, + moreMatchesToFetch: state => state.overview.matchIndex < state.basic.matchList.length, + overviewLoaded: state => state.overview.loaded, + playing: state => state.basic.playing, + summonerFound: state => state.basic.status === 'found', + summonerNotFound: state => state.basic.status === 'error', + summonerLoading: state => state.basic.status === 'loading', } diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue index e06236d..d8ecf95 100644 --- a/client/src/views/Summoner.vue +++ b/client/src/views/Summoner.vue @@ -1,5 +1,5 @@