fix(history): clear state when switching users

Author: dvcol

src/components/views/history/HistoryComponent.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { onActivated, onDeactivated, onMounted, ref, watch } from 'vue';
 
-import type { WatchStopHandle } from 'vue';
-
 import type { OnScroll, OnUpdated } from '~/components/common/list/ListScroll.model';
 
 import ListScroll from '~/components/common/list/ListScroll.vue';
@@ -18,22 +16,29 @@ const {
   pageSize,
   belowThreshold,
 } = useHistoryStoreRefs();
-const { fetchHistory } = useHistoryStore();
+const { fetchHistory, clearState } = useHistoryStore();
 
 const { user } = useUserSettingsStoreRefs();
 
-onMounted(() => {
-  fetchHistory();
-});
-
-const watcher = ref<WatchStopHandle>();
+const active = ref(false);
 
 onActivated(() => {
-  watcher.value = watch(user, () => fetchHistory());
+  active.value = true;
+  fetchHistory();
 });
 
 onDeactivated(() => {
-  watcher.value?.();
+  active.value = false;
+});
+
+onMounted(() => {
+  watch(user, () => {
+    if (active.value) {
+      fetchHistory();
+    } else {
+      clearState();
+    }
+  });
 });
 
 const onScroll: OnScroll = async listRef => {

src/stores/data/history.store.ts

@@ -14,8 +14,22 @@ export const useHistoryStore = defineStore('data.history', () => {
   const pageSize = ref(100);
   const history = ref<TraktHistory[]>([]);
   const pagination = ref<TraktClientPagination>();
+
+  const searchHistory = ref('');
+
+  const historyStart = ref<Date | undefined>(undefined);
+  const historyEnd = ref<Date | undefined>(undefined);
+
   const threshold = ref(10);
 
+  const clearState = () => {
+    history.value = [];
+    pagination.value = undefined;
+    searchHistory.value = '';
+    historyStart.value = undefined;
+    historyEnd.value = undefined;
+  };
+
   const belowThreshold = computed(
     () =>
       pagination.value?.page &&
@@ -29,7 +43,6 @@ export const useHistoryStore = defineStore('data.history', () => {
       .map((_, i) => ({ id: -1 * (i + 1) }) as TraktHistory),
   );
 
-  const searchHistory = ref('');
   const filteredHistory = computed<TraktHistory[]>(() => {
     if (!searchHistory.value) return history.value;
     const _searchRaw = searchHistory.value.toLowerCase().trim();
@@ -50,9 +63,6 @@ export const useHistoryStore = defineStore('data.history', () => {
     });
   });
 
-  const historyStart = ref<Date | undefined>(undefined);
-  const historyEnd = ref<Date | undefined>(undefined);
-
   const fetchHistory = async ({
     page,
     limit = pageSize.value,
@@ -113,6 +123,7 @@ export const useHistoryStore = defineStore('data.history', () => {
     historyStart,
     historyEnd,
     setHistoryRange,
+    clearState,
   };
 });
 

src/styles/base.scss

@@ -90,7 +90,7 @@
     --bg-color: var(--bg-color-30);
     --bg-color-hover: var(--bg-black-60);
   }
-  
+
   /*
   @media (prefers-color-scheme: light) {
     !* semantic color variables for this project *!