Change data loading to centralized store

src/views/PlayerView.vue

@@ -1,82 +1,60 @@
 <template>
-  <select v-model="filters.server" v-on:change="fetchPlayers(filters)">
+  <select v-on:change="changeFilter({ server: ($event.target as HTMLInputElement).value })">
     <option></option>
-    <option v-for="(serverData, serverId) in servers" v-bind:key="serverId" :value="serverId">{{ serverData.name }}</option>
+    <option v-for="(serverData) in servers" v-bind:key="serverData.id" :value="serverData.id">{{ serverData.name }}
+    </option>
   </select>
-  <select v-model="filters.weapon" v-on:change="fetchPlayers(filters)">
+  <select v-on:change="changeFilter({ weapon: ($event.target as HTMLInputElement).value })">
     <option></option>
     <option v-for="(weaponData, weaponId) in weapons" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
   </select>
   <div class="playersData">
 
-    <PlayerList :players="players"></PlayerList>
-    <PlayerChart :players="players"></PlayerChart>
+    <PlayerList :filters="filters"></PlayerList>
+    <PlayerChart :filters="filters"></PlayerChart>
   </div>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Store, useStore } from 'vuex'
+import { Player, Weapon, Server } from '@/store/index'
 import PlayerList from '@/components/PlayerList.vue'
 import PlayerChart from '@/components/PlayerChart.vue'
+import { defineComponent } from 'vue'
 
-@Options({
+export default defineComponent({
+  name: 'PlayerView',
   components: {
     PlayerList, PlayerChart
-  }
-})
-export default class PlayerView extends Vue {
-  players: any = {}
-  weapons: any = {}
-  servers: any = {}
-  filters: any = {}
-  created () {
-    this.fetchPlayers({})
-    this.fetchWeapons({})
-    this.fetchServers()
-  }
-
-  async fetchWeapons ({ server }: { server?: string }) {
-    const searchParams: Record<string, string> = {}
-    if (server) { searchParams.server = server }
-    const response = await fetch(
-      'https://tone.sleepycat.date/v1/client/weapons?' + new URLSearchParams(searchParams)
-    )
-    const data = await response.json()
-    this.weapons = data
-  }
-
-  async fetchServers () {
-    const response = await fetch(
-      'https://tone.sleepycat.date/v1/client/servers'
-    )
-    const data = await response.json()
-    this.servers = data
-    console.log(this.servers)
-  }
+  },
 
   data () {
-    return { a: 1 }
+    return {
+      filters: {},
+      store: useStore()
+    } as { filters: { weapon?: string, server?: string }, store: Store<any> }
+  },
+  computed: {
+    servers (): Server[] { return this.store.state.servers },
+    players (): { [key: string]: Player } { return this.store.getters.getPlayerList(this.filters) },
+    weapons (): { [key: string]: Weapon } { return this.store.getters.getWeaponList(this.filters) }
+  },
+  methods: {
+    async changeFilter ({ weapon, server }: { weapon?: string, server?: string }) {
+      const filters = JSON.parse(JSON.stringify(this.filters))
+      if (weapon !== undefined) filters.weapon = weapon
+      if (server !== undefined) filters.server = server
+      if (weapon === '') delete filters.weapon
+      if (server === '') delete filters.server
+      const promises = []
+      if (!this.store.getters.getPlayerList(filters)) promises.push(this.store.dispatch('fetchPlayers', filters))
+      if (!this.store.getters.getWeaponList(filters)) promises.push(this.store.dispatch('fetchWeapons', filters))
+      await Promise.all(promises)
+      // Delay the update of filters propery after we fetch the data to the API as changing it will cause subcomponents to reload before data is fetched
+      this.filters = filters
+    }
   }
-
-  async fetchPlayers ({ weapon, server }: { weapon?: string, server?: string }) {
-    const searchParams: Record<string, string> = {}
-    if (weapon?.toString()) { searchParams.weapon = weapon }
-    if (server?.toString()) { searchParams.server = server }
-    console.log(server, weapon)
-    console.log('https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams))
-    const response = await fetch(
-      'https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams)
-    )
-    const data = await response.json()
-    Object.keys(data).forEach(e => {
-      data[e].kills = Number(data[e].kills)
-      data[e].deaths = Number(data[e].deaths)
-      data[e].max_kill_distance = Number(data[e].max_kill_distance)
-      data[e].avg_kill_distance = Number(data[e].avg_kill_distance)
-    })
-    this.players = data
-  }
-}
+})
 </script>
 
 <style scoped>