flaschengeist-frontend/src/plugins/balance/store/balance.ts

import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
import { StateInterface } from 'src/store';
import { axios } from 'src/boot/axios';
import { AxiosResponse } from 'axios';

interface BalanceResponse {
  balance: number;
  credit: number;
  debit: number;
}

export interface BalanceInterface extends BalanceResponse {
  limit: number;
  loading: number;
}

const state: BalanceInterface = {
  balance: 0,
  credit: 0,
  debit: 0,
  limit: 0,
  loading: 0
};

const mutations: MutationTree<BalanceInterface> = {
  setBalance(state, data: number) {
    state.balance = data;
  },
  setCredit(state, data: number) {
    state.credit = data;
  },
  setDebit(state, data: number) {
    state.debit = data;
  },
  setLimit(state, data: number) {
    state.limit = data;
  },
  setLoading(state, data = true) {
    if (data) state.loading += 1;
    else state.loading -= 1;
  }
};

const actions: ActionTree<BalanceInterface, StateInterface> = {
  getBalance({ commit, rootState }) {
    commit('setLoading');
    axios
      /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
      .get(`/users/${rootState.user.currentUser?.userid}/balance`)
      .then(({ data }: AxiosResponse<BalanceResponse>) => {
        commit('setBalance', data.balance);
        commit('setCredit', data.credit);
        commit('setDebit', data.debit);
      })
      .catch(err => {
        console.warn(err);
      })
      .finally(() => commit('setLoading', false));
  },
  getLimit({ rootState, commit }) {
    commit('setLoading');
    axios
      /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
      .get(`/users/${rootState.user.currentUser?.userid}/balance/limit`)
      .then(({ data }) => {
        console.log(data);
      })
      .catch(err => {
        console.warn(err);
      })
      .finally(() => commit('setLoading', false));
  },
  changeBalance({ rootState, dispatch, commit }, amount: number) {
    commit('setLoading');
    axios
      /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
      .put(`/users/${rootState.user.currentUser?.userid}/balance`, <
        { amount: number }
      >{
        amount: amount
      })
      .then(() => {
        dispatch('getBalance').catch(err => console.warn(err));
      })
      .catch(err => console.warn(err))
      .finally(() => commit('setLoading', false));
  }
};

const getters: GetterTree<BalanceInterface, StateInterface> = {};

const balance: Module<BalanceInterface, StateInterface> = {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

export default balance;