feat: save last searched region in localStorage

client/src/App.vue

@@ -31,10 +31,11 @@ export default {
 
   created() {
     this.updatePercent()
+    this.updateSettings({name: 'region'})
   },
 
   methods: {
-    ...mapActions('settings', ['updatePercent']),
+    ...mapActions('settings', ['updatePercent', 'updateSettings']),
   }
 }
 </script>

client/src/components/SearchForm.vue

@@ -14,7 +14,7 @@
           :class="{'border-teal-200': dropdown}"
           class="border-2 border-transparent cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
         >
-          <span class="selected font-bold select-none">{{ selectedRegion }}</span>
+          <span class="selected font-bold uppercase select-none">{{ selectedRegion }}</span>
           <svg class="ml-1 -mr-1 w-4 h-4">
             <use xlink:href="#caret-down" />
           </svg>
@@ -36,12 +36,12 @@
           <div
             v-for="(region, index) in regions"
             :key="region"
-            @click="selectedRegion = region"
+            @click="updateSettings({name: 'region', value: region.toLowerCase()})"
             :class="classRegions(index)"
             class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 hover:bg-blue-800"
           >
             <svg
-              v-if="region === selectedRegion"
+              v-if="region.toLowerCase() === selectedRegion"
               class="absolute vertical-center offsetIcon w-3 h-3 fill-current"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 512 512"
@@ -68,6 +68,8 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'vuex'
+
 export default {
   props: {
     size: {
@@ -92,7 +94,6 @@ export default {
         'TR',
         'RU'
       ],
-      selectedRegion: 'EUW'
     }
   },
   computed: {
@@ -120,7 +121,10 @@ export default {
         'offsetDropDown': this.size === 'small',
         'offsetDropDownXl': this.size === 'xl'
       }
-    }
+    },
+    ...mapState({
+      selectedRegion: state => state.settings.region
+    }),
   },
   methods: {
     classRegions(index) {
@@ -131,9 +135,10 @@ export default {
     formSubmit() {
       const search = this.summoner.split(' ').join('')
       if (search.length) {
-        this.$emit('formSubmit', search, this.selectedRegion.toLowerCase())
+        this.$emit('formSubmit', search, this.selectedRegion)
-      }
       }
+    },
+    ...mapActions('settings', ['updateSettings']),
   }
 }
 </script>

client/src/layouts/Default.vue

@@ -161,13 +161,12 @@ export default {
   watch: {
     uri() {
       console.log('route changed')
-      this.updateCurrentRegion(this.region)
+      this.updateSettings({ name: 'region', value: this.region.toLowerCase() })
       this.apiCall()
     }
   },
 
   created() {
-    this.updateCurrentRegion(this.region)
     this.apiCall()
   },
 
@@ -183,7 +182,7 @@ export default {
     redirect(summoner, region) {
       this.$router.push(`/summoner/${region}/${summoner}`)
     },
-    ...mapActions(['updateCurrentRegion']),
+    ...mapActions('settings', ['updateSettings']),
     ...mapActions('summoner', ['basicRequest']),
   }
 }

client/src/store/index.js

@@ -19,7 +19,6 @@ export default new Vuex.Store({
     summoner
   },
   state: {
-    currentRegion: 'euw1',
     regionsList: {
       'br': 'br1',
       'eune': 'eun1',
@@ -35,15 +34,5 @@ export default new Vuex.Store({
     },
     roles: ['TOP', 'JUNGLE', 'MIDDLE', 'BOTTOM', 'SUPPORT']
   },
-  mutations: {
-    UPDATE_REGION(state, newRegion) {
-      state.currentRegion = state.regionsList[newRegion]
-    }
-  },
-  actions: {
-    updateCurrentRegion({ commit }, newRegion) {
-      commit('UPDATE_REGION', newRegion)
-    }
-  },
   strict: debug
 })

client/src/store/modules/detailedMatch.js

@@ -8,19 +8,19 @@ export const state = {
 }
 
 export const mutations = {
-  MATCHE_LOADING(state, gameId) {
+  MATCH_LOADING(state, gameId) {
     const alreadyIn = state.matches.find(m => m.gameId === gameId)
     if (!alreadyIn) {
       state.matches.push({ gameId: gameId, status: 'loading' })
     }
   },
-  MATCHE_FOUND(state, matchDetails) {
+  MATCH_FOUND(state, matchDetails) {
     matchDetails.status = 'loaded'
 
     const index = state.matches.findIndex(m => m.gameId === matchDetails.gameId)
     Vue.set(state.matches, index, matchDetails)
   },
-  MATCHE_RANKS_FOUND(state, { gameId, blueTeam, redTeam }) {
+  MATCH_RANKS_FOUND(state, { gameId, blueTeam, redTeam }) {
     const match = state.matches.find(m => m.gameId === gameId)
     match.blueTeam.players = blueTeam
     match.redTeam.players = redTeam
@@ -29,21 +29,21 @@ export const mutations = {
 
 export const actions = {
   async matchDetails({ commit, rootState }, gameId) {
-    commit('MATCHE_LOADING', gameId)
+    commit('MATCH_LOADING', gameId)
-    console.log('MATCH DETAILS STORE', gameId, rootState.currentRegion)
+    const region = rootState.regionsList[rootState.settings.region]
+    console.log('MATCH DETAILS STORE', gameId, region)
 
-    const resp = await axios(({ url: 'match-details', data: { gameId, region: rootState.currentRegion }, method: 'POST' })).catch(() => { })
+    const resp = await axios(({ url: 'match-details', data: { gameId, region }, method: 'POST' })).catch(() => { })
     console.log('--- DETAILS INFOS ---')
     console.log(resp.data)
-    // const detailedMatch = createDetailedMatchData(resp.data.matchDetails)
+    commit('MATCH_FOUND', resp.data.matchDetails)
-    commit('MATCHE_FOUND', resp.data.matchDetails)
 
     // If the ranks of the players are not yet known
     if (resp.data.matchDetails.blueTeam.players[0].rank === undefined) {
-      const ranks = await axios(({ url: 'match-details-ranks', data: { gameId, region: rootState.currentRegion }, method: 'POST' })).catch(() => { })
+      const ranks = await axios(({ url: 'match-details-ranks', data: { gameId, region }, method: 'POST' })).catch(() => { })
       console.log('--- RANK OF MATCH DETAILS ---')
       console.log(ranks.data)
-      commit('MATCHE_RANKS_FOUND', { gameId, ...ranks.data })
+      commit('MATCH_RANKS_FOUND', { gameId, ...ranks.data })
     }
   }
 }

client/src/store/modules/settings.js

@@ -1,12 +1,16 @@
 export const namespaced = true
 
 export const state = {
-  percent: false
+  percent: false,
+  region: 'euw',
 }
 
 export const mutations = {
   UPDATE_PERCENT(state, percent) {
     state.percent = percent
+  },
+  UPDATE_REGION(state, region) {
+    state.region = region
   }
 }
 
@@ -18,5 +22,14 @@ export const actions = {
       localStorage.setItem('settings-percent', percent)
     }
     commit('UPDATE_PERCENT', percent)
+  },
+  async updateSettings({ commit }, { name, value }) {
+    if (!value) {
+      value = localStorage.getItem(name)
+      if (!value) return
+    } else {
+      localStorage.setItem(name, value)
+    }
+    commit(`UPDATE_${name.toUpperCase()}`, value)
   }
 }

client/src/store/modules/summoner.js

@@ -144,7 +144,9 @@ export const actions = {
   },
   async liveMatchRequest({ commit, rootState }) {
     commit('LIVE_LOADING')
-    const resp = await axios(({ url: 'summoner-live', data: { account: state.basic.account, region: rootState.currentRegion }, method: 'POST' })).catch(() => { })
+    const region = rootState.regionsList[rootState.settings.region]
+
+    const resp = await axios(({ url: 'summoner-live', data: { account: state.basic.account, region }, method: 'POST' })).catch(() => { })
     console.log('---LIVE---')
     console.log(resp.data)