LeagueStats/client-new/src/store/modules/detailedMatch.js

import Vue from 'vue'
import { axios } from '@/plugins/axios'

export const namespaced = true

export const state = {
  matches: []
}

export const mutations = {
  MATCH_LOADING(state, matchId) {
    const alreadyIn = state.matches.find(m => m.matchId === matchId)
    if (!alreadyIn) {
      state.matches.push({ matchId, status: 'loading' })
    }
  },
  MATCH_FOUND(state, {matchDetails, ranksLoaded }) {
    matchDetails.status = 'loaded'
    matchDetails.ranksLoaded = ranksLoaded

    // Set SoloQ as rank for now
    if (ranksLoaded) {
      for (const player of matchDetails.blueTeam.players) {
        player.rank = player.rank && player.rank[420]
      }
      for (const player of matchDetails.redTeam.players) {
        player.rank = player.rank && player.rank[420]
      }
    }

    const index = state.matches.findIndex(m => m.matchId === matchDetails.matchId)
    Vue.set(state.matches, index, matchDetails)
  },
  MATCH_RANKS_FOUND(state, { matchId, ranksByPlayer }) {
    const match = state.matches.find(m => m.matchId === matchId)

    for (const player of match.blueTeam.players) {
      const ranks = ranksByPlayer[player.id]
      if (!ranks) continue
      Vue.set(player, 'rank', ranks[420])
    }

    for (const player of match.redTeam.players) {
      const ranks = ranksByPlayer[player.id]
      if (!ranks) continue
      Vue.set(player, 'rank', ranks[420]) 
    }

    match.ranksLoaded = true
  },
}

export const actions = {
  async matchDetails({ commit }, matchId) {
    commit('MATCH_LOADING', matchId)
    console.log('MATCH DETAILS STORE', matchId)

    const resp = await axios(({ url: 'match/details', data: { matchId }, method: 'POST' })).catch(() => { })
    console.log('--- DETAILS INFOS ---')
    console.log(resp.data)
    const {matchDetails, ranksLoaded} = resp.data
    commit('MATCH_FOUND',  {matchDetails, ranksLoaded })

    // If the ranks of the players are not yet known
    if (!ranksLoaded) {
      const ranks = await axios(({ url: 'match/details/ranks', data: { matchId }, method: 'POST' })).catch(() => { })
      if (!ranks) return
      console.log('--- RANK OF MATCH DETAILS ---')
      console.log(ranks.data)
      commit('MATCH_RANKS_FOUND', { matchId, ranksByPlayer: ranks.data })
    }
  }
}

export const getters = {
  getMatchDetails: state => matchId => state.matches.find(m => m.matchId === matchId),
}