feat: filter by season now works 🎉

client/src/components/Summoner/FilterSeason.vue

@@ -6,6 +6,7 @@
       dir="rtl"
       class="block appearance-none bg-transparent w-full px-4 pr-8 rounded-md cursor-pointer focus:outline-none group-hover:text-white"
     >
+      <option :value="null" class="bg-blue-800">All seasons</option>
       <option v-for="(s, index) in seasons" :key="index" :value="s" class="bg-blue-800">Season {{ s }}</option>
     </select>
     <div
@@ -19,7 +20,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 
 export default {
   data() {
@@ -42,7 +43,9 @@ export default {
   methods: {
     filterSeason() {
       console.log('filter season', this.season)
-    }
+      this.updateSeason(this.season)
+    },
+    ...mapActions('summoner', ['updateSeason'])
   }
 }
 </script>

client/src/plugins/axios.js

@@ -1,4 +1,6 @@
 import axiosHttp from 'axios'
+import router from '../router'
+import store from '../store'
 
 export const axios = axiosHttp
 
@@ -11,8 +13,16 @@ const axiosSource = CancelToken.source()
 axios.defaults.axiosSource = axiosSource
 axios.defaults.cancelToken = axiosSource.token
 
+// Add season number to data if the route need it
+axios.interceptors.request.use(function (config) {
+  if (config.url !== 'summoner-basic' && router.currentRoute.meta.season) {
+    config.data.season = store.state.summoner.basic.currentSeason
+  }
+  return config
+})
+
 export default {
-  install (Vue) {
+  install(Vue) {
     Vue.prototype.$axios = axiosHttp
   }
 }

client/src/router.js

@@ -25,17 +25,26 @@ const router = new Router({
     {
       path: '/summoner/:region/:name',
       name: 'summoner',
-      component: Summoner
+      component: Summoner,
+      meta: {
+        season: true
+      }
     },
     {
       path: '/summoner/:region/:name/champions',
       name: 'summonerChampions',
-      component: SummonerChampions
+      component: SummonerChampions,
+      meta: {
+        season: true
+      }
     },
     {
       path: '/summoner/:region/:name/records',
       name: 'summonerRecords',
-      component: SummonerRecords
+      component: SummonerRecords,
+      meta: {
+        season: true
+      }
     },
     {
       path: '/summoner/:region/:name/live',

client/src/store/modules/summoner.js

@@ -6,7 +6,7 @@ export const namespaced = true
 export const state = {
   basic: {
     account: {},
-    currentSeason: 10,
+    currentSeason: null,
     matchList: [],
     ranked: {},
     seasons: [],
@@ -37,6 +37,7 @@ export const state = {
 export const mutations = {
   BASIC_REQUEST(state) {
     state.basic.status = 'loading'
+    state.basic.currentSeason = null
     state.champions.championsLoaded = false
     state.records.recordsLoaded = false
     state.overview.loaded = false
@@ -93,7 +94,14 @@ export const mutations = {
     state.live.match = {}
     state.live.playing = false
     state.live.liveLoaded = false
-  }
+  },
+  UPDATE_SEASON(state, { season }) {
+    state.basic.currentSeason = season
+
+    state.overview.loaded = false
+    state.champions.championsLoaded = false
+    state.records.recordsLoaded = false
+  },
 }
 
 export const actions = {
@@ -171,6 +179,9 @@ export const actions = {
     const records = resp.data ? createRecordsData(resp.data) : {}
 
     commit('RECORDS_FOUND', { records })
+  },
+  updateSeason({ commit }, season) {
+    commit('UPDATE_SEASON', { season })
   }
 }
 

client/src/views/Summoner.vue

@@ -63,6 +63,9 @@ export default {
   },
 
   watch: {
+    overviewLoaded() {
+      this.fetchData()
+    },
     summonerFound() {
       this.fetchData()
     }

client/src/views/SummonerChampions.vue

@@ -24,6 +24,7 @@ export default {
 
   data() {
     return {
+      queue: null,
       searchChampions: ''
     }
   },
@@ -53,6 +54,9 @@ export default {
   },
 
   watch: {
+    championsLoaded() {
+      this.fetchData()
+    },
     summonerFound() {
       this.fetchData()
     }
@@ -65,13 +69,13 @@ export default {
   methods: {
     fetchData() {
       if (!this.championsLoaded && this.summonerFound) {
-        this.championsRequest()
+        this.championsRequest(this.queue)
       }
     },
     filterByQueue(queue) {
       queue = Number(queue)
-      queue = queue === -1 ? null : queue
+      this.queue = queue === -1 ? null : queue
-      this.championsRequest(queue)
+      this.championsRequest(this.queue)
     },
     updateSearch(search) {
       this.searchChampions = search

client/src/views/SummonerRecords.vue

@@ -1,7 +1,6 @@
 <template>
-  <div key="records" class="">
+  <div key="records">
     <template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
-      <div class="">
       <div class="mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">basics</div>
       <div class="-mx-2 flex flex-wrap">
         <template v-if="recordsLoaded">
@@ -145,7 +144,6 @@
           </div>
         </template>
       </div>
-      </div>
     </template>
     <template v-if="recordsLoaded && !records.maxKda">
       <div class="mt-4 flex flex-col items-center">
@@ -176,6 +174,9 @@ export default {
   },
 
   watch: {
+    recordsLoaded() {
+      this.fetchData()
+    },
     summonerFound() {
       this.fetchData()
     }

server/app/Controllers/Http/SummonerController.js

@@ -87,12 +87,17 @@ class SummonerController {
     )
 
     // MATCHES BASIC
-    const gameIds = summonerDB.matchList.slice(0, 10).map(({ gameId }) => gameId)
+    const gameIds = summonerDB.matchList.slice(0)
+      .filter(m => {
+        return season ? m.seasonMatch === season : true
+      })
+      .slice(0, 10)
+      .map(({ gameId }) => gameId)
     finalJSON.matchesDetails = await MatchService.getMatches(account, gameIds, summonerDB)
 
     // STATS
     console.time('STATS')
-    finalJSON.stats = await StatsService.getSummonerStats(account)
+    finalJSON.stats = await StatsService.getSummonerStats(account, season)
     console.timeEnd('STATS')
 
     // SAVE IN DB
@@ -108,8 +113,9 @@ class SummonerController {
   async champions({ request, response }) {
     const puuid = request.input('puuid')
     const queue = request.input('queue')
+    const season = request.input('season')
     console.time('championsRequest')
-    const championStats = await MatchRepository.championCompleteStats(puuid, queue)
+    const championStats = await MatchRepository.championCompleteStats(puuid, queue, season)
     console.timeEnd('championsRequest')
     return response.json(championStats)
   }
@@ -119,8 +125,9 @@ class SummonerController {
    */
   async records({ request, response }) {
     const puuid = request.input('puuid')
+    const season = request.input('season')
     console.time('recordsRequest')
-    const records = await MatchRepository.records(puuid)
+    const records = await MatchRepository.records(puuid, season)
     console.timeEnd('recordsRequest')
     return response.json(records[0])
   }

server/app/Repositories/MatchRepository.js

@@ -18,6 +18,7 @@ class MatchRepository {
       summoner_puuid: puuid,
       result: { $not: { $eq: 'Remake' } },
       gamemode: { $nin: [800, 810, 820, 830, 840, 850] },
+      season: this.season ? this.season : { $exists: true }
     }
   }
 
@@ -92,11 +93,15 @@ class MatchRepository {
    * Get Summoner's complete statistics for the all played champs
    * @param puuid of the summoner
    * @param queue of the matches to fetch, if null get all matches
+   * @param season of the matches to fetch, if null get all seasons
    */
-  championCompleteStats(puuid, queue) {
+  championCompleteStats(puuid, queue, season) {
-    const matchParams = queue ? {
+    const matchParams = {}
-      gamemode: { $eq: Number(queue) },
+    if (queue) {
-    } : {}
+      matchParams.gamemode = { $eq: Number(queue) }
+    }
+    this.season = season
+
     const groupParams = {
       time: { $sum: '$time' },
       gameLength: { $avg: '$time' },
@@ -145,8 +150,11 @@ class MatchRepository {
   /**
   * Get Summoner's all records
   * @param puuid of the summoner
+  * @param season of the matches to fetch, if null get all seasons
   */
-  records(puuid) {
+  records(puuid, season) {
+    this.season = season
+
     return this.Match.query().aggregate([
       {
         $match: {
@@ -235,6 +243,8 @@ class MatchRepository {
    * @param puuid of the summoner
    */
   seasons(puuid) {
+    this.season = null
+
     return this.Match.query().aggregate([
       {
         $match: {

server/app/Services/StatsService.js

@@ -8,7 +8,8 @@ class StatsService {
     this.matchRepository = MatchRepository
   }
 
-  async getSummonerStats(account) {
+  async getSummonerStats(account, season) {
+    this.matchRepository.season = season
     const globalStats = await this.matchRepository.globalStats(account.puuid)
     const gamemodeStats = await this.matchRepository.gamemodeStats(account.puuid)
     const roleStats = await this.matchRepository.roleStats(account.puuid)