chore(vscode): set default auto formatter to Prettier

VSCode sometimes "forget" what the formatter is, leading to format on save not working.

.vscode/settings.json

@@ -4,5 +4,6 @@
   "i18n-ally.localesPaths": "locales",
   "i18n-ally.sortKeys": true,
   "vetur.format.defaultFormatter.html": "prettier",
-  "i18n-ally.sourceLanguage": "en-US"
+  "i18n-ally.sourceLanguage": "en-US",
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

store/displayPreferencesApi.ts

@@ -1,216 +0,0 @@
-import { DisplayPreferencesDto } from '@jellyfin/client-axios';
-import { MutationTree, ActionTree } from 'vuex';
-import destr from 'destr';
-import {
-  defaultState as settingState,
-  CustomPreferences
-} from '~/store/settings';
-/**
- * DisplayPreferencesDto but with our custom typings for CustomPrefs property of DisplayPreferencesDto
- */
-export interface ClientPreferences
-  extends Omit<DisplayPreferencesDto, 'CustomPrefs'> {
-  CustomPrefs?: CustomPreferences;
-}
-
-export interface DisplayPreferencesApiState {
-  syncing: boolean;
-  LastSync: number;
-  LastSettingChange: number;
-}
-
-const defaultState = (): DisplayPreferencesApiState => ({
-  syncing: false,
-  LastSync: -1,
-  LastSettingChange: -1
-});
-
-/**
- * Cast custom preferences returned from the server from strings to the correct Javascript type
- *
- * @param {DisplayPreferencesDto} data - Response from the server
- * @returns {ClientPreferences} - The response with the correct datatypes.
- */
-function castResponse(data: DisplayPreferencesDto): ClientPreferences {
-  const result = data as ClientPreferences;
-  for (const [key, value] of Object.entries(
-    result.CustomPrefs as CustomPreferences
-  )) {
-    /**
-     * destr does proper conversion for all the types, even undefined
-     */
-    // @ts-expect-error - TypeScript can't infer types from Object.entries
-    result.CustomPrefs[key] = destr(value);
-  }
-  return result;
-}
-
-export const state = defaultState;
-
-export const mutations: MutationTree<DisplayPreferencesApiState> = {
-  RESET_STATE(state: DisplayPreferencesApiState) {
-    Object.assign(state, defaultState);
-  },
-  SYNCING_STARTED(state: DisplayPreferencesApiState) {
-    state.syncing = true;
-  },
-  SYNCING_ENDED(state: DisplayPreferencesApiState) {
-    state.syncing = false;
-    state.LastSync = Date.now();
-  },
-  UPDATE_CLIENT_SETTINGS(state: DisplayPreferencesApiState) {
-    state.LastSettingChange = Date.now();
-  }
-};
-
-export const actions: ActionTree<
-  DisplayPreferencesApiState,
-  DisplayPreferencesApiState
-> = {
-  /**
-   * Fetches custom preferences and inits the settings state
-   *
-   * @param {any} context - Vuex action context
-   * @param {any} context.dispatch - Vuex dispatch
-   */
-  async fetchCustomPreferences({ commit, dispatch }) {
-    if (this.$auth.loggedIn) {
-      commit('SYNCING_STARTED');
-      try {
-        const response = await this.$api.displayPreferences.getDisplayPreferences(
-          {
-            displayPreferencesId: 'usersettings',
-            userId: this.$auth.user?.Id,
-            client: 'vue'
-          }
-        );
-
-        if (response.status !== 200) {
-          throw new Error(
-            `fetchCustomPreferences: Unexpected API response code (${response.status})`
-          );
-        }
-
-        const data = castResponse(response.data);
-        if (data.CustomPrefs) {
-          /**
-           * We delete the keys that are not defined in the state's default state, so removed
-           * values locally don't pollute server's displayPreferences.
-           */
-          for (const key of Object.keys(data.CustomPrefs)) {
-            if (!(key in settingState())) {
-              // @ts-expect-error - TypeScript can't infer indexes typings from Object.keys
-              delete data.CustomPrefs[key];
-            }
-          }
-          commit(
-            'settings/INIT_STATE',
-            { data: data.CustomPrefs },
-            { root: true }
-          );
-        }
-      } catch (error) {
-        const message = this.$i18n.t('failedRetrievingDisplayPreferences');
-        dispatch(
-          'snackbar/pushSnackbarMessage',
-          {
-            message,
-            color: 'error'
-          },
-          { root: true }
-        );
-      }
-      commit('SYNCING_ENDED');
-    }
-  },
-  /**
-   * Pushes the client's current custom preferences to the server
-   *
-   * @param {any} context - Vuex action context
-   * @param {any} context.state - Vuex state
-   * @param {any} context.dispatch - Vuex dispatch
-   */
-  async pushCustomPreferences({ rootState, commit, dispatch }) {
-    if (this.$auth.loggedIn) {
-      commit('SYNCING_STARTED');
-      try {
-        // The fetch part is done because DisplayPreferences doesn't accept partial updates
-        const response = await this.$api.displayPreferences.getDisplayPreferences(
-          {
-            displayPreferencesId: 'usersettings',
-            userId: this.$auth.user?.Id,
-            client: 'vue'
-          }
-        );
-
-        if (response.status !== 200) {
-          throw new Error(
-            `pushState(fetch): Unexpected API response code (${response.status})`
-          );
-        }
-
-        const displayPrefs = response.data;
-        displayPrefs.CustomPrefs = {};
-        // @ts-expect-error - Vuex bad TypeScript support doesn't provide typings for rootState
-        const settings = rootState.settings;
-        /**
-         * For some reason, Vuex adds an 'status' variable to the rootState. We get rid of it.
-         */
-        if (settings.status) {
-          delete settings.status;
-        }
-        Object.assign(displayPrefs.CustomPrefs, settings);
-        for (const [key, value] of Object.entries(displayPrefs.CustomPrefs)) {
-          let string = JSON.stringify(value);
-          /**
-           * Undefined can't be converted to string using JSON.stringify so we add this safeguard
-           */
-          if (typeof string !== 'string') {
-            string = String(string);
-          }
-          displayPrefs.CustomPrefs[key] = string;
-        }
-
-        const responseUpdate = await this.$api.displayPreferences.updateDisplayPreferences(
-          {
-            displayPreferencesId: 'usersettings',
-            userId: this.$auth.user?.Id,
-            client: 'vue',
-            displayPreferencesDto: displayPrefs as DisplayPreferencesDto
-          }
-        );
-
-        if (responseUpdate.status !== 204) {
-          throw new Error(
-            `pushState(update): Unexpected API response code (${response.status})`
-          );
-        }
-      } catch (error) {
-        const message = this.$i18n.t('failedSettingDisplayPreferences');
-        dispatch(
-          'snackbar/pushSnackbarMessage',
-          {
-            message,
-            color: 'error'
-          },
-          { root: true }
-        );
-      }
-      commit('SYNCING_ENDED');
-    }
-  },
-  async updateSettings({ commit, dispatch }) {
-    commit('UPDATE_CLIENT_SETTINGS');
-    await dispatch('pushCustomPreferences');
-  },
-  /**
-   * Resets the state and reapply default theme
-   *
-   * @param {any} context - Vuex action context
-   * @param {any} context.commit - Vuex commit
-   * @param {any} context.dispatch - Vuex dispatch
-   */
-  resetState({ commit }) {
-    commit('RESET_STATE');
-  }
-};