refactor: pause an effectScope instead of using watchPausable

Signed-off-by: Fernando Fernández <[email protected]>
jellyfin · Oct 23, 2024 · 66364da · 66364da
1 parent 2ab0a8e
commit 66364da
Showing 1 changed file with 22 additions and 21 deletions.
diff --git a/frontend/src/store/super/synced-store.ts b/frontend/src/store/super/synced-store.ts
@@ -1,8 +1,8 @@
 import type { DisplayPreferencesDto } from '@jellyfin/sdk/lib/generated-client';
 import { getDisplayPreferencesApi } from '@jellyfin/sdk/lib/utils/api/display-preferences-api';
 import destr from 'destr';
-import { toRaw } from 'vue';
-import { watchImmediate, watchPausable, type WatchPausableReturn } from '@vueuse/core';
+import { EffectScope, toRaw } from 'vue';
+import { watchDeep, watchImmediate } from '@vueuse/core';
 import { taskManager } from '../task-manager';
 import { remote } from '@/plugins/remote';
 import { CommonStore, type Persistence } from '@/store/super/common-store';
@@ -13,7 +13,7 @@ import { i18n } from '@/plugins/i18n';
 export abstract class SyncedStore<T extends object> extends CommonStore<T> {
   private readonly _clientSyncName = 'vue';
   private readonly _syncedKeys: (keyof T)[] = [];
-  private readonly _pausableWatchers: WatchPausableReturn[] = [];
+  private readonly _effectScope = new EffectScope();
   /**
    * Serializes custom pref values for storage as string
    */
@@ -65,11 +65,11 @@ export abstract class SyncedStore<T extends object> extends CommonStore<T> {
 
     const newState = {} as Partial<T>;
 
-    for (const key of this._syncedKeys.length ? this._syncedKeys : Object.keys(toRaw(this._state))) {
+    for (const key of this._syncedKeys) {
       const obj = displayPreferences.CustomPrefs?.[String(key)];
 
       if (!isNil(obj)) {
-        newState[key as keyof T] = this._deserializeCustomPref(obj) as T[keyof T];
+        newState[key] = this._deserializeCustomPref(obj) as T[keyof T];
       }
     }
 
@@ -89,8 +89,8 @@ export abstract class SyncedStore<T extends object> extends CommonStore<T> {
       try {
         const newPrefs: DisplayPreferencesDto['CustomPrefs'] = {};
 
-        for (const key of this._syncedKeys.length ? this._syncedKeys : Object.keys(toRaw(this._state))) {
-          newPrefs[String(key)] = this._serializeCustomPref(this._state[key as keyof T]);
+        for (const key of this._syncedKeys) {
+          newPrefs[String(key)] = this._serializeCustomPref(this._state[key]);
         }
 
         const displayPreferences = await this._fetchDisplayPreferences();
@@ -110,20 +110,15 @@ export abstract class SyncedStore<T extends object> extends CommonStore<T> {
       try {
         const data = await this._fetchState();
 
-        for (const watcher of this._pausableWatchers) {
-          watcher.pause();
-        }
+        this._effectScope.pause();
 
         const newState = {
           ...toRaw(this._state),
           ...data
         };
 
         Object.assign(this._state, newState);
-
-        for (const watcher of this._pausableWatchers) {
-          watcher.resume();
-        }
+        this._effectScope.resume();
       } catch {
         useSnackbar(i18n.t('failedSyncingUserSettings'), 'error');
       }
@@ -139,16 +134,22 @@ export abstract class SyncedStore<T extends object> extends CommonStore<T> {
     super(storeKey, defaultState, persistence);
     this._syncedKeys = keys ?? [];
 
-    if (keys) {
+    if (!this._syncedKeys.length) {
+      for (const key in defaultState) {
+        this._syncedKeys.push(key);
+      }
+    }
+
+    if (keys?.length) {
       for (const key of keys) {
-        this._pausableWatchers.push(
-          watchPausable(() => this._state[key], this._updateState, { deep: true })
-        );
+        this._effectScope.run(() => {
+          watchDeep(() => this._state[key], this._updateState);
+        });
       }
     } else {
-      this._pausableWatchers.push(
-        watchPausable(this._state, this._updateState, { deep: true })
-      );
+      this._effectScope.run(() => {
+        watchDeep(() => this._state, this._updateState);
+      });
     }
 
     /**