From dd075d298233277ec6876eaee365596b2b6c7287 Mon Sep 17 00:00:00 2001 From: legonzaur Date: Fri, 28 Apr 2023 16:18:52 +0200 Subject: [PATCH] single API requests before recieving the data --- src/components/PlayerChart.vue | 4 +- src/components/PlayerList.vue | 4 +- src/components/WeaponChart.vue | 7 +-- src/stores/kill.ts | 104 ++++++++++++++++++++------------- src/views/PlayerView.vue | 24 +++----- 5 files changed, 80 insertions(+), 63 deletions(-) diff --git a/src/components/PlayerChart.vue b/src/components/PlayerChart.vue index 892791d..cce7ccf 100644 --- a/src/components/PlayerChart.vue +++ b/src/components/PlayerChart.vue @@ -179,8 +179,8 @@ export default defineComponent({ } }, players (): { [key: string]: Player } { - const data = this.store.getPlayerList(this.filters || {})?.data - if (!data) return {} + const data = this.store.getPlayerList(this.filters || {})?.value.data + if (!data) return this.store.fetchPlayers(this.filters || {}).value.data const cut = Object.entries(data).sort((a, b) => { if (a[1].kills < b[1].kills) { return 1 diff --git a/src/components/PlayerList.vue b/src/components/PlayerList.vue index 553f25f..721812f 100644 --- a/src/components/PlayerList.vue +++ b/src/components/PlayerList.vue @@ -46,7 +46,9 @@ export default defineComponent({ computed: { players (): { [key: string]: Player } { const { player: _, ...withoutPlayer } = this.filters - return this.store.getPlayerList(withoutPlayer)?.data || {} + const data = this.store.getPlayerList(withoutPlayer)?.value.data + if (!data) return this.store.fetchPlayers(withoutPlayer).value.data + return data } }, watch: { diff --git a/src/components/WeaponChart.vue b/src/components/WeaponChart.vue index b0e30b8..52dae58 100644 --- a/src/components/WeaponChart.vue +++ b/src/components/WeaponChart.vue @@ -137,11 +137,8 @@ export default defineComponent({ }, weapons (): { [key: string]: Weapon } { const { weapon: _, ...withoutWeapon } = this.filters || {} - const data = this.store.getWeaponList(withoutWeapon)?.data - if (!data) { - this.store.fetchWeapons(withoutWeapon) - return {} - } + const data = this.store.getWeaponList(withoutWeapon)?.value.data + if (!data) return this.store.fetchWeapons(withoutWeapon).value.data return data }, sortedWeaponList (): string[] { diff --git a/src/stores/kill.ts b/src/stores/kill.ts index 4343e73..0c0243b 100644 --- a/src/stores/kill.ts +++ b/src/stores/kill.ts @@ -1,10 +1,22 @@ import { defineStore } from 'pinia' import * as assert from 'assert' +import { Ref, ref } from 'vue' -function removeNullEntries (a:any) { - return Object.fromEntries(Object.entries(a).filter(e => e[1] !== undefined && e[1] !== null)) +export interface Filters { + server?: string; + player?: string; + weapon?: string; + host?: string; + map?: string; + gamemode?: string; } -function objectEqual (a:any, b:any) { + +function removeNullEntries (a: Filters) { + return Object.fromEntries( + Object.entries(a).filter((e) => e[1] !== undefined && e[1] !== null) + ) +} +function objectEqual (a: Filters, b: Filters) { try { a = removeNullEntries(a) b = removeNullEntries(b) @@ -14,14 +26,6 @@ function objectEqual (a:any, b:any) { return false } } -export interface Filters { - server?: string; - player?: string; - weapon?: string; - host?: string; - map?: string; - gamemode?: string; -} export interface Kill { deaths: number; @@ -53,11 +57,11 @@ export interface Server extends Kill { // define your typings for the store state export interface State { - servers: KillData[]; - players: KillData[]; - weapons: KillData[]; - maps: KillData[]; - gamemodes: KillData[]; + servers: Ref>[]; + players: Ref>[]; + weapons: Ref>[]; + maps: Ref>[]; + gamemodes: Ref>[]; hosts: { [key: number]: string }; } @@ -71,43 +75,63 @@ export const useKillStore = defineStore('kill', { hosts: {} }), getters: { - getPlayerList: (state) => (filters: Filters) => state.players.find((e) => objectEqual(e.filter, filters)), - getWeaponList: (state) => (filters: Filters) => state.weapons.find((e) => objectEqual(e.filter, filters)), - getServerList: (state) => (filters: Filters) => state.servers.find((e) => objectEqual(e.filter, filters)) + getPlayerList: (state) => (filters: Filters) => { + return state.players.find((e) => objectEqual(e.value.filter, filters)) + }, + getWeaponList: (state) => (filters: Filters) => + state.weapons.find((e) => objectEqual(e.value.filter, filters)), + getServerList: (state) => (filters: Filters) => + state.servers.find((e) => objectEqual(e.value.filter, filters)) }, actions: { - async fetchPlayers (filter: Filters) { + fetchPlayers (filter: Filters) { filter = removeNullEntries(filter) - const response = await fetch( + let entry = this.players.find((e) => objectEqual(e.value.filter, filter)) + if (entry === undefined) { + entry = ref({ filter, data: {} }) + this.players.push(entry) + } + fetch( 'https://tone.sleepycat.date/v2/client/players?' + new URLSearchParams(filter as Record) - ) - const data = await response.json() - const entry = this.players.find((e) => objectEqual(e.filter, filter)) - if (!entry) return this.players.push({ filter, data }) - entry.data = data + ).then(async response => { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + entry!.value.data = await response.json() + }) + return entry }, - async fetchWeapons (filter: Filters) { + fetchWeapons (filter: Filters) { filter = removeNullEntries(filter) - const response = await fetch( + let entry = this.weapons.find((e) => objectEqual(e.value.filter, filter)) + if (!entry) { + entry = ref({ filter, data: {} }) + this.weapons.push(entry) + } + + fetch( 'https://tone.sleepycat.date/v2/client/weapons?' + new URLSearchParams(filter as Record) - ) - const data = await response.json() - const entry = this.weapons.find((e) => objectEqual(e.filter, filter)) - if (!entry) return this.weapons.push({ filter, data }) - entry.data = data + ).then(async response => { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + entry!.value.data = await response.json() + }) + return entry }, - async fetchServers (filter: Filters) { + fetchServers (filter: Filters) { filter = removeNullEntries(filter) - const response = await fetch( + let entry = this.servers.find((e) => objectEqual(e.value.filter, filter)) + if (!entry) { + entry = ref({ filter, data: {} }) + this.servers.push(entry) + } + fetch( 'https://tone.sleepycat.date/v2/client/servers?' + new URLSearchParams(filter as Record) - ) - const data = await response.json() - const entry = this.servers.find((e) => objectEqual(e.filter, filter)) - if (!entry) return this.servers.push({ filter, data }) - entry.data = data + ).then(async response => { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + entry!.value.data = await response.json() + }) + return entry } } }) diff --git a/src/views/PlayerView.vue b/src/views/PlayerView.vue index e8d60bd..3257f73 100644 --- a/src/views/PlayerView.vue +++ b/src/views/PlayerView.vue @@ -58,12 +58,10 @@ export default defineComponent({ }, computed: { servers (): { [key: string]: Server } { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { server: _, player: _1, ...withoutServer } = this.filters - const data = this.store.getServerList(withoutServer)?.data - if (!data) { - this.store.fetchServers(withoutServer) - return {} - } + const data = this.store.getServerList(withoutServer)?.value.data + if (!data) return this.store.fetchServers(withoutServer).value.data return data }, groupedServers () { @@ -75,21 +73,17 @@ export default defineComponent({ return hosts }, weapons (): { [key: string]: Weapon } { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { weapon: _, player: _1, ...withoutWeapons } = this.filters - const data = this.store.getWeaponList(withoutWeapons)?.data - if (!data) { - this.store.fetchWeapons(withoutWeapons) - return {} - } + const data = this.store.getWeaponList(withoutWeapons)?.value.data + if (!data) return this.store.fetchWeapons(withoutWeapons).value.data return data }, players (): { [key: string]: Player } { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { player: _, ...withoutPlayers } = this.filters - const data = this.store.getPlayerList(withoutPlayers)?.data - if (!data) { - this.store.fetchPlayers(withoutPlayers) - return {} - } + const data = this.store.getPlayerList(withoutPlayers)?.value.data + if (!data) return this.store.fetchPlayers(withoutPlayers).value.data return data }, sortedWeaponList (): string[] {