fix(store): correctly clear reactive proxy when clearing states

Author: dvcol

src/components/views/progress/ProgressComponent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NFlex } from 'naive-ui';
-import { onActivated, onMounted, toRefs, Transition, watch } from 'vue';
+import { onMounted, toRefs, Transition, watch } from 'vue';
 
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
@@ -11,6 +11,7 @@ import { usePanelItem } from '~/components/views/panel/use-panel-item';
 import { ExternaLinks } from '~/settings/external.links';
 import { useProgressStore, useProgressStoreRefs } from '~/stores/data/progress.store';
 import { useI18n } from '~/utils';
+import { watchUserChange } from '~/utils/store.utils';
 
 const props = defineProps({
   panel: {
@@ -24,10 +25,11 @@ const { panel } = toRefs(props);
 const i18n = useI18n('progress');
 
 const { progress, loading, loggedOut } = useProgressStoreRefs();
-const { fetchProgress } = useProgressStore();
+const { fetchProgress, clearState } = useProgressStore();
 
-onActivated(async () => {
-  await fetchProgress();
+watchUserChange({
+  fetch: fetchProgress,
+  clear: clearState,
 });
 
 onMounted(() => {

src/components/views/settings/SettingsComponent.vue

@@ -92,7 +92,7 @@ onDeactivated(() => {
         :key="section.title"
         class="card"
         :class="{ target: focus?.title === section.title }"
-        :style="{ '--index': sections.length - index }"
+        :style="{ '--length': sections.length, '--index': index }"
         :title="i18n(section.title)"
         @mouseenter="onEnter(section)"
         @mouseleave="onLeave(section)"
@@ -116,10 +116,11 @@ onDeactivated(() => {
   .card {
     @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
 
-    z-index: var(--index);
+    z-index: var(--length);
     scroll-margin-top: calc(#{layout.$header-navbar-height} + 1rem);
 
     &:not(:last-child) {
+      z-index: calc(var(--length) - var(--index));
       margin-bottom: 1rem;
     }
 

src/components/views/settings/SettingsLogs.vue

@@ -4,12 +4,12 @@ import { NSelect } from 'naive-ui';
 import { ref } from 'vue';
 
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
-import { LogLevel, useLogStore } from '~/stores/settings/log.store';
+import { LogLevel, useLogStoreRefs } from '~/stores/settings/log.store';
 import { useI18n } from '~/utils';
 
 const i18n = useI18n('settings', 'logs');
 
-const { logLevel } = useLogStore();
+const { logLevel } = useLogStoreRefs();
 
 const options = Object.entries(LogLevel)
   .filter(([_, v]) => typeof v === 'number')

src/stores/data/list.store.ts

@@ -22,6 +22,7 @@ import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounceLoading, useBelowThreshold, useLoadingPlaceholder, useSearchFilter } from '~/utils/store.utils';
+import { clearProxy } from '~/utils/vue.utils';
 
 export type AnyList =
   | TraktListItem
@@ -215,11 +216,11 @@ export const useListStore = defineStore('data.list', () => {
     pagination.value = undefined;
     searchList.value = '';
 
-    Object.assign(typeLoading, {});
-    Object.assign(typeItemLoading, {});
+    clearProxy(typeLoading);
+    clearProxy(typeItemLoading);
 
-    Object.assign(listDictionary, {});
-    Object.assign(listDictionaryLoading, {});
+    clearProxy(listDictionary);
+    clearProxy(listDictionaryLoading);
   };
 
   const updateDictionary = (list: ListEntity, item: MinimalItem, remove?: boolean) => {

src/stores/data/movie.store.ts

@@ -1,12 +1,14 @@
 import { defineStore, storeToRefs } from 'pinia';
 
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 
 import type { TraktMovieExtended } from '~/models/trakt/trakt-movie.model';
 
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
+import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
+import { clearProxy } from '~/utils/vue.utils';
 
 type MovieDictionary = Record<string, TraktMovieExtended>;
 type MovieWatchedDictionary = Record<string, boolean>;
@@ -23,16 +25,20 @@ export const useMovieStore = defineStore('data.movie', () => {
   const loadingWatched = ref(false);
   const loadingCollected = ref(false);
 
-  const clearState = () => {
-    Object.assign(movies, {});
-    Object.assign(moviesWatched, {});
-    Object.assign(moviesCollected, {});
+  const clearProgressState = () => {
+    clearProxy(moviesWatched);
+    clearProxy(moviesCollected);
 
-    Object.assign(loading, {});
     loadingWatched.value = false;
     loadingCollected.value = false;
   };
 
+  const clearState = () => {
+    clearProxy(movies);
+    clearProxy(loading);
+    clearProgressState();
+  };
+
   const fetchMovie = async (id: string | number) => {
     if (loading[id]) {
       logger.warn('Already fetching movie', id);
@@ -117,8 +123,17 @@ export const useMovieStore = defineStore('data.movie', () => {
     moviesCollected[id.toString()] = !remove;
   };
 
+  const { user } = useUserSettingsStoreRefs();
+  const initMovieStore = () => {
+    watch(user, () => {
+      clearProgressState();
+    });
+  };
+
   return {
+    initMovieStore,
     clearState,
+    clearProgressState,
     fetchMovie,
     getMovie,
     getMovieLoading,

src/stores/data/person.store.ts

@@ -7,7 +7,7 @@ import type { TraktPersonExtended } from '~/models/trakt/trakt-people.model';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
-import { asyncRefGetter } from '~/utils/vue.utils';
+import { asyncRefGetter, clearProxy } from '~/utils/vue.utils';
 
 type PersonDictionary = Record<string, TraktPersonExtended>;
 type LoadingDictionary = Record<string, boolean>;
@@ -17,8 +17,8 @@ export const usePersonStore = defineStore('data.person', () => {
   const loading = reactive<LoadingDictionary>({});
 
   const clearState = () => {
-    Object.assign(people, {});
-    Object.assign(loading, {});
+    clearProxy(people);
+    clearProxy(loading);
   };
 
   const fetchPerson = async (id: string | number) => {

src/stores/data/show.store.ts

@@ -1,6 +1,6 @@
 import { defineStore, storeToRefs } from 'pinia';
 
-import { computed, reactive } from 'vue';
+import { computed, reactive, watch } from 'vue';
 
 import type { TraktEpisodeExtended, TraktEpisodeShort } from '~/models/trakt/trakt-episode.model';
 import type { TraktCollectionProgress, TraktWatchedProgress } from '~/models/trakt/trakt-progress.model';
@@ -13,6 +13,8 @@ import { type ShowProgress, ShowProgressType } from '~/models/list-scroll.model'
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
+import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
+import { clearProxy } from '~/utils/vue.utils';
 
 export type ShowSeasons = Record<number, TraktSeasonExtended>;
 
@@ -76,20 +78,25 @@ export const useShowStore = defineStore('data.show', () => {
   const showWatchedProgressLoading = reactive<LoadingDictionary>({});
   const showCollectionProgressLoading = reactive<LoadingDictionary>({});
 
+  const clearProgressState = () => {
+    clearProxy(showsWatchedProgress);
+    clearProxy(showsCollectionProgress);
+
+    clearProxy(showWatchedProgressLoading);
+    clearProxy(showCollectionProgressLoading);
+  };
+
   const clearState = () => {
-    Object.assign(shows, {});
-    Object.assign(showsSeasons, {});
-    Object.assign(showsSeasonEpisodes, {});
-    Object.assign(showsEpisodes, {});
-    Object.assign(showsWatchedProgress, {});
-    Object.assign(showsCollectionProgress, {});
-
-    Object.assign(showsLoading, {});
-    Object.assign(showsSeasonsLoading, {});
-    Object.assign(showsSeasonEpisodesLoading, {});
-    Object.assign(showsEpisodesLoading, {});
-    Object.assign(showWatchedProgressLoading, {});
-    Object.assign(showCollectionProgressLoading, {});
+    clearProxy(shows);
+    clearProxy(showsSeasons);
+    clearProxy(showsSeasonEpisodes);
+    clearProxy(showsEpisodes);
+
+    clearProxy(showsLoading);
+    clearProxy(showsSeasonsLoading);
+    clearProxy(showsSeasonEpisodesLoading);
+    clearProxy(showsEpisodesLoading);
+    clearProgressState();
   };
 
   const fetchShow = async (id: string) => {
@@ -273,8 +280,18 @@ export const useShowStore = defineStore('data.show', () => {
     });
   };
 
+  const { user } = useUserSettingsStoreRefs();
+  const initShowStore = () => {
+    watch(user, () => {
+      clearProgressState();
+      console.info('user change, clearing state', user.value, showsWatchedProgress);
+    });
+  };
+
   return {
+    initShowStore,
     clearState,
+    clearProgressState,
     getShow,
     fetchShow,
     fetchShowProgress,

src/stores/settings/links.store.ts

@@ -7,6 +7,7 @@ import { logger } from '~/stores/settings/log.store';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { createTab } from '~/utils/browser/browser.utils';
 import { debounce } from '~/utils/debounce.utils';
+import { clearProxy } from '~/utils/vue.utils';
 
 export const CustomLinkScope = {
   Movie: 'movie' as const,
@@ -68,9 +69,9 @@ export const useLinksStore = defineStore('settings.links', () => {
   const linkScopeDictionary = reactive<CustomLinkScopeDictionary>({});
 
   const clearState = () => {
-    Object.assign(aliasDictionary, {});
-    Object.assign(linkDictionary, {});
-    Object.assign(linkScopeDictionary, {});
+    clearProxy(aliasDictionary);
+    clearProxy(linkDictionary);
+    clearProxy(linkScopeDictionary);
   };
 
   const saveState = debounce(() => storage.sync.set('settings.links', { enabled: enabled.value, backgroundLink: backgroundLink.value }), 1000);

src/utils/vue.utils.ts

@@ -27,3 +27,10 @@ export const asyncRefGetter = <T>(fn: () => Promise<T>, loading: Ref<boolean>, r
     },
   };
 };
+
+export const clearProxy = (proxy: Record<string, unknown>) => {
+  // Reassign the proxy object to a new empty object
+  Object.keys(proxy).forEach(key => {
+    delete proxy[key];
+  });
+};

src/web/init-services.ts

@@ -4,7 +4,9 @@ import { useActivityStore } from '~/stores/data/activity.store';
 import { useHistoryStore } from '~/stores/data/history.store';
 import { useImageStore } from '~/stores/data/image.store';
 import { useListsStore, useListStore } from '~/stores/data/list.store';
+import { useMovieStore } from '~/stores/data/movie.store';
 import { useSearchStore } from '~/stores/data/search.store';
+import { useShowStore } from '~/stores/data/show.store';
 import { useAuthSettingsStore } from '~/stores/settings/auth.store';
 import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useLinksStore } from '~/stores/settings/links.store';
@@ -44,6 +46,8 @@ export const initServices = async () => {
     useListStore().initListStore(),
     useHistoryStore().initHistoryStore(),
     useSearchStore().initSearchStore(),
+    useShowStore().initShowStore(),
+    useMovieStore().initMovieStore(),
   ]);
 
   setAppReady(true);