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

import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
import { StateInterface } from 'src/store';
import { axios } from 'boot/axios';
import { LoginData } from 'src/plugins/user/models';
import { AxiosResponse } from 'axios';
import { LocalStorage, Loading } from 'quasar';
import { Router } from 'src/router';

export interface UserStateInterface extends LoginResponse {
  updateUserLoading: boolean;
  getUserLoading: boolean;
}

export interface LoginResponse {
  user: FG.User;
  session: FG.Session;
}

const empty_session: FG.Session = {
  browser: '',
  expires: new Date(),
  lifetime: -1,
  platform: '',
  token: ''
};

const empty_user: FG.User = {
  display_name: '',
  firstname: '',
  lastname: '',
  mail: '',
  roles: [],
  userid: ''
};

const state: UserStateInterface = {
  user: empty_user,
  session: empty_session,
  updateUserLoading: false,
  getUserLoading: false
};

const mutations: MutationTree<UserStateInterface> = {
  setUser(state, data: FG.User) {
    state.user = data;
  },
  setSession(state, data: FG.Session) {
    state.session = data;
  },
  setLoading(
    state,
    data: { key: 'updateUserLoading' | 'getUserLoading'; data: boolean }
  ) {
    state[data.key] = data.data;
  },
  showState(state) {
    console.log(state);
  }
};

const actions: ActionTree<UserStateInterface, StateInterface> = {
  login({ commit }, data: LoginData) {
    Loading.show({
      message: 'Du wirst eingeloggt'
    });
    void axios
      .post('/auth', data)
      .then((response: AxiosResponse<LoginResponse>) => {
        response.data.session.expires = new Date(response.data.session.expires);
        commit('setUser', response.data.user);
        commit('setSession', response.data.session);
        commit('showState');
        LocalStorage.set('user', response.data.user);
        LocalStorage.set('session', response.data.session);

        void Router.push({ name: 'user-main' });
      })
      .catch(error => {
        console.exception(error);
      })
      .finally(() => {
        Loading.hide();
      });
  },

  doLogout({ commit }, token: string) {
    Loading.show({ message: 'Du wirst ausgeloggt' });
    void axios
      .delete(`/auth/${token}`)
      .then(() => {
        commit('setUser', empty_user);
        commit('setSession', empty_session);
      })
      .finally(() => {
        LocalStorage.remove('user');
        LocalStorage.remove('session');
        Loading.hide();
      });
  },

  logout({ dispatch }, token: string) {
    dispatch('doLogout', token).finally(() => {
      void Router.push({ name: 'login' });
    });
  },

  getUser({ commit, state }) {
    commit('setLoading', { key: 'getUserLoading', data: true });
    axios
      .get(`/users/${state.user.userid}`)
      .then((response: AxiosResponse<FG.User>) => {
        commit('setUser', response.data);
        LocalStorage.set('user', response.data);
      })
      .catch(err => {
        console.warn(err);
      })
      .finally(() => {
        commit('setLoading', { key: 'getUserLoading', data: false });
      });
  },

  updateUser({ commit, state, dispatch }, data) {
    commit('setLoading', { key: 'updateUserLoading', data: true });
    axios
      .put(`/users/${state.user.userid}`, data)
      .then(() => {
        void dispatch('getUser');
      })
      .catch(error => {
        console.log(error);
      })
      .finally(() => {
        commit('setLoading', { key: 'updateUserLoading', data: false });
      });
  },

  loadFromLocalStorage({ commit }) {
    let data = LocalStorage.getItem('user');
    commit('setUser', data ? data : empty_user);
    data = LocalStorage.getItem('session');
    commit('setSession', data ? data : empty_session);
    commit('showState');
  },

  setSession({ commit }, session: FG.Session) {
    if (session) {
      commit('setSession', session);
      LocalStorage.set('session', session);
    } else {
      commit('setSession', empty_session);
      LocalStorage.remove('session');
    }
  }
};

const getters: GetterTree<UserStateInterface, StateInterface> = {
  user({ user }) {
    return user;
  },
  displayName({ user }) {
    return user.display_name;
  },
  session({ session }) {
    return session;
  },
  loading({ updateUserLoading, getUserLoading }) {
    return updateUserLoading || getUserLoading;
  }
};

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

export default userStore;