sample-vuex-typescript

gistfile1.txt

/* eslint-disable @typescript-eslint/no-unused-vars */
import { VuexModule, Module, Action, Mutation } from 'vuex-module-decorators';
import { $axios } from '@/utils/api';
import { store } from '@/store/store';
import { deepCopy, getErrorData } from '@/utils/functions';
import { API_PATH, CONTENT_TYPE_HEADER } from '@/constants/apiConstants';

import {
  UserDictionary,
  GetUserDictionariesResponse,
  UpsertUserDictionaryPayload,
  UpsertUserDictionaryResponse,
  ImportUserDictionaryPayload,
  ImportUserDictionaryResponse,
} from './types';

export const initialState = {
  userDictionaries: [],
  updatedUserDictionaryResponse: {},
  importedUserDictionaryResponse: {},
};

@Module({
  name: 'userDictionariesModule',
  stateFactory: true,
  namespaced: true,
  dynamic: true,
  store,
})
export class UserDictionariesModule extends VuexModule {
  public userDictionaries: UserDictionary[] = deepCopy(initialState.userDictionaries);
  public updatedUserDictionaryResponse: Partial<UpsertUserDictionaryResponse> = initialState.updatedUserDictionaryResponse;
  public importedUserDictionaryResponse: Partial<ImportUserDictionaryResponse> = initialState.importedUserDictionaryResponse;
  public errorMessage: string = '';

  @Mutation
  public setUserDictionaries(userDictionaries: UserDictionary[]) {
    this.userDictionaries = userDictionaries;
  }

  @Mutation
  public setUserDictionariesRequestError(message: string) {
    this.errorMessage = message;
  }

  @Mutation
  public setUpdatedUserDictionaryResponse(payload: UpsertUserDictionaryResponse) {
    this.updatedUserDictionaryResponse = payload;
  }

  @Mutation
  public setImportedUserDictionaryResponse(payload: ImportUserDictionaryResponse) {
    this.importedUserDictionaryResponse = payload;
  }

  @Mutation
  public clearMessage() {
    this.errorMessage = '';
  }

  @Action
  public async getUserDictionaries(): Promise<any> {
    try {
      const res: GetUserDictionariesResponse = await getUserDictionaries();
      this.setUserDictionaries(res);
    } catch (e) {
      const error = getErrorData(e);
      this.setUserDictionariesRequestError(error.message);
    }
  }

  @Action
  public async upsertUserDictionaries(payload: UpsertUserDictionaryPayload): Promise<any> {
    try {
      const userDictionaryResponse = await upsertUserDictionaries(payload);
      this.setUpdatedUserDictionaryResponse(userDictionaryResponse);
    } catch (e) {
      const error = getErrorData(e);
      this.setUserDictionariesRequestError(error.message);
    }
  }

  @Action
  public async importUserDictionaries(payload: ImportUserDictionaryPayload): Promise<any> {
    try {
      const data = new FormData();
      data.append('file', payload.file);
      data.append('delimiter', payload.delimiter);
      data.append('encoding', payload.encoding);
      const res: ImportUserDictionaryResponse = await importUserDictionaries(data);
      this.setImportedUserDictionaryResponse(res);
    } catch (e) {
      const error = getErrorData(e);
      this.setUserDictionariesRequestError(error.message);
    }
  }
}

export const getUserDictionaries = (): Promise<any> => {
  return $axios.$get(API_PATH.LIST_USER_DICTIONARIES);
};

export const upsertUserDictionaries = (payload: UpsertUserDictionaryPayload): Promise<UpsertUserDictionaryResponse> => {
  const options = {
    headers: CONTENT_TYPE_HEADER.JSON,
  };
  return $axios.$post(API_PATH.UPSERT_USER_DICTIONARY, payload, options);
};

export const importUserDictionaries = (payload: FormData): Promise<ImportUserDictionaryResponse> => {
  const options = {
    headers: CONTENT_TYPE_HEADER.FORM_DATA,
  };
  return $axios.$post(API_PATH.IMPORT_USER_DICTIONARY, payload, options);
};