refactor: get last riot patch from backend instead of manually change it

client/.env

@@ -1 +0,0 @@
-VUE_APP_PATCH=9.17.1

client/README.md

@@ -1,4 +1,4 @@
-# riot-vue
+# LeagueStats Frontend
 
 ## Project setup
 ```

client/src/components/Match.vue

@@ -26,7 +26,7 @@
                 >LVL {{ data.level }}</div>
               </div>
               <div
-                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.champion.id}.png')`}"
+                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${data.champion.id}.png')`}"
                 class="ml-2 w-16 h-16 crop-champion bg-blue-1000 rounded-lg"
               ></div>
               <div class="ml-2 flex flex-col justify-around">
@@ -123,7 +123,7 @@
               >{{ ally.name }}</router-link>
               <div
                 :class="index !== 0 ? '-mt-1': ''"
-                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${ally.champion.id}.png')`}"
+                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ally.champion.id}.png')`}"
                 class="ml-1 w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full overflow-hidden"
               ></div>
               <div
@@ -132,7 +132,7 @@
               ></div>
               <div
                 :class="index !== 0 ? '-mt-1' : ''"
-                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.enemyTeam[index].champion.id}.png')`}"
+                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${data.enemyTeam[index].champion.id}.png')`}"
                 class="w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full"
               ></div>
               <router-link
@@ -153,7 +153,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 
 export default {
   props: {
@@ -174,6 +174,7 @@ export default {
     ...mapState({
       roles: state => state.roles
     }),
+    ...mapGetters('ddragon', ['version']),
   },
 
   methods: {

client/src/helpers/summoner.js

@@ -1,6 +1,7 @@
 import { timeDifference, getRankImg } from '@/helpers/functions.js'
 import { maps, gameModes } from '@/data/data.js'
 import summonersJSON from '@/data/summoner.json'
+import store from '@/store'
 
 /**
  * Return all the infos about a list of matches built with the Riot API data
@@ -53,7 +54,7 @@ function getItemLink(id) {
   if (id === 0) {
     return null
   }
-  return `url('https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/item/${id}.png')`
+  return `url('https://ddragon.leagueoflegends.com/cdn/${store.getters['ddragon/version']}/img/item/${id}.png')`
 }
 
 function getLeagueData(uniqueLeagues, leagueData) {
@@ -67,5 +68,5 @@ function getLeagueData(uniqueLeagues, leagueData) {
 
 function getSummonerLink(id) {
   const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
-  return `https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/spell/${spellName}.png`
+  return `https://ddragon.leagueoflegends.com/cdn/${store.getters['ddragon/version']}/img/spell/${spellName}.png`
 }

client/src/main.js

@@ -15,9 +15,6 @@ Vue.use(VueAxios)
 
 Vue.component('v-icon', Icon)
 
-Vue.prototype.$patch = process.env.VUE_APP_PATCH
-
-
 new Vue({
   router,
   store,

client/src/store/modules/ddragon.js

@@ -4,7 +4,8 @@ export const namespaced = true
 
 export const state = {
   champions: [],
-  runes: []
+  runes: [],
+  version: ''
 }
 
 export const mutations = {
@@ -13,6 +14,9 @@ export const mutations = {
   },
   PUSH_RUNES(state, runes) {
     state.runes = runes
+  },
+  PUSH_VERSION(state, version) {
+    state.version = version
   }
 }
 
@@ -30,8 +34,13 @@ export const actions = {
     const resp = await axios(({ url: 'ddragon', data: { endpoint }, method: 'POST' }))
     commit('PUSH_RUNES', resp.data)
   },
+
+  getVersion({ commit }, version) {
+    commit('PUSH_VERSION', version)
+  },
 }
 
 export const getters = {
-  areChampionsLoaded: state => !!state.champions.Aatrox
+  areChampionsLoaded: state => !!state.champions.Aatrox,
+  version: state => state.version
 }

client/src/store/modules/summoner.js

@@ -58,6 +58,7 @@ export const actions = {
     try {
       const resp = await axios(({ url: 'api', data: { summoner, region }, method: 'POST' }))
       if (resp.data) {
+        dispatch('ddragon/getVersion', resp.data.version, { root: true })
         const infos = createSummonerData(resp.data)
         commit('SUMMONER_FOUND', infos)
       } else {

client/src/views/Summoner.vue

@@ -112,7 +112,7 @@ export default {
 
   computed: {
     getSummonerIcon() {
-      return `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${this.summonerInfos.account.profileIconId}.png) center/cover`
+      return `url(https://ddragon.leagueoflegends.com/cdn/${this.version}/img/profileicon/${this.summonerInfos.account.profileIconId}.png) center/cover`
     },
     summoner() {
       return this.$route.params.name
@@ -123,6 +123,7 @@ export default {
     ...mapState({
       summonerInfos: state => state.summoner.infos
     }),
+    ...mapGetters('ddragon', ['version']),
     ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'summonerFound', 'summonerNotFound', 'summonerLoading'])
   },
 

server/README.md

@@ -1,4 +1,4 @@
-# Adonis API application
+# LeagueStats Backend
 
 This is the boilerplate for creating an API server in AdonisJs, it comes pre-configured with.
 

server/app/Controllers/Http/SummonerController.js

@@ -42,6 +42,9 @@ class SummonerController {
       // MATCHES DETAILS
       const gameIds = matchList.slice(0, 10).map(({ gameId }) => gameId)
       finalJSON.matchesDetails = await MatchHelper.getMatches(account, gameIds)
+
+      // PATCH VERSION
+      finalJSON.version = Jax.DDragon.Version
     } catch (error) {
       console.log('username not found')
       console.log(error)