feat(restore): restore service state on init

dvcol · dvcol · commit 8e49fd196e73 · 2024-03-22T22:36:38.000+01:00
diff --git a/src/components/views/history/HistoryComponent.vue b/src/components/views/history/HistoryComponent.vue
@@ -17,7 +17,10 @@ const { fetchHistory, clearState } = useHistoryStore();
 
 const i18n = useI18n('history');
 
-watchUserChange(fetchHistory, clearState);
+watchUserChange({
+  fetch: fetchHistory,
+  clear: clearState,
+});
 
 const list = useListScroll(filteredHistory, 'watched_at');
 
diff --git a/src/components/views/watchlist/WatchlistComponent.vue b/src/components/views/watchlist/WatchlistComponent.vue
@@ -23,7 +23,10 @@ const { filteredListItems, pagination, loading, pageSize, belowThreshold, search
   useListStoreRefs();
 const { fetchListItems, clearState } = useListStore();
 
-watchUserChange(fetchListItems, clearState);
+watchUserChange({
+  fetch: fetchListItems,
+  clear: clearState,
+});
 
 const list = useListScroll<AnyListDateTypes, AnyList>(
   filteredListItems,
diff --git a/src/components/views/watchlist/WatchlistNavbar.vue b/src/components/views/watchlist/WatchlistNavbar.vue
@@ -25,14 +25,14 @@ const { fetchLists, clearState } = useListsStore();
 const listOptions = computed(() =>
   lists.value.map((list, i) => ({
     label: ['collection', 'watchlist'].includes(list.type) ? i18n(list.name) : list.name,
-    value: JSON.stringify(list),
+    value: list.id,
   })),
 );
 
 const selectValue = computed({
-  get: () => JSON.stringify(activeList.value),
+  get: () => activeList.value.id,
   set: selected => {
-    activeList.value = JSON.parse(selected);
+    activeList.value = lists.value.find(l => l.id === selected)!;
   },
 });
 
@@ -45,7 +45,13 @@ defineProps({
   },
 });
 
-watchUserChange(fetchLists, clearState);
+watchUserChange({
+  fetch: fetchLists,
+  userChange: active => {
+    clearState();
+    if (active) fetchLists();
+  },
+});
 
 const open = ref(false);
 </script>
diff --git a/src/stores/data/history.store.ts b/src/stores/data/history.store.ts
@@ -5,6 +5,7 @@ import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
 import type { TraktHistory } from '~/models/trakt/trakt-history.model';
 
 import { TraktService } from '~/services/trakt.service';
+import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounceLoading, useBelowThreshold, useLoadingPlaceholder, useSearchFilter } from '~/utils/store.utils';
 
 export const useHistoryStore = defineStore('data.history', () => {
@@ -20,6 +21,25 @@ export const useHistoryStore = defineStore('data.history', () => {
 
   const threshold = ref(10);
 
+  const saveState = async () =>
+    storage.local.set('data.history', {
+      pageSize: pageSize.value,
+      historyStart: historyStart.value?.getTime(),
+      historyEnd: historyEnd.value?.getTime(),
+    });
+
+  const restoreState = async () => {
+    const restored = await storage.local.get<{
+      pageSize: number;
+      historyStart: Date | undefined;
+      historyEnd: Date | undefined;
+    }>('data.history');
+
+    if (restored?.pageSize) pageSize.value = restored.pageSize;
+    if (restored?.historyStart) historyStart.value = new Date(restored.historyStart);
+    if (restored?.historyEnd) historyEnd.value = new Date(restored.historyEnd);
+  };
+
   const clearState = () => {
     history.value = [];
     pagination.value = undefined;
@@ -62,16 +82,23 @@ export const useHistoryStore = defineStore('data.history', () => {
     }
   };
 
-  const setHistoryRange = ({ start, end }: { start?: Date; end?: Date } = {}) => {
+  const setHistoryRange = async ({ start, end }: { start?: Date; end?: Date } = {}) => {
     historyStart.value = start;
     historyEnd.value = end;
-    return fetchHistory({ start, end });
+    const result = fetchHistory({ start, end });
+    await saveState();
+    return result;
   };
 
-  watch(pageSize, async () => {
-    await fetchHistory();
-    searchHistory.value = '';
-  });
+  const initHistoryStore = async () => {
+    await restoreState();
+
+    watch(pageSize, async () => {
+      await fetchHistory();
+      searchHistory.value = '';
+      await saveState();
+    });
+  };
 
   return {
     history,
@@ -88,6 +115,7 @@ export const useHistoryStore = defineStore('data.history', () => {
     historyEnd,
     setHistoryRange,
     clearState,
+    initHistoryStore,
   };
 });
 
diff --git a/src/stores/data/list.store.ts b/src/stores/data/list.store.ts
@@ -10,13 +10,14 @@ import type { TraktWatchlist } from '~/models/trakt/trakt-watchlist.model';
 
 import { TraktService } from '~/services/trakt.service';
 import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
+import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounceLoading, useBelowThreshold, useLoadingPlaceholder, useSearchFilter } from '~/utils/store.utils';
 
 export type AnyList = TraktListItem | TraktWatchlist | (TraktCollection & { id: number });
 export type ListType = {
   type: 'list' | 'collaboration' | 'collection' | 'watchlist';
   name: string;
-  id?: number | string;
+  id: number | string;
   scope?: 'movies' | 'shows';
 };
 
@@ -29,9 +30,9 @@ export const anyListDateGetter = (item: AnyList) => {
 };
 
 export const DefaultLists: Record<string, ListType> = {
-  Watchlist: { type: 'watchlist', name: 'list_type__watchlist' },
-  MovieCollection: { type: 'collection', scope: 'movies', name: 'list_type__collection_movie' },
-  ShowCollection: { type: 'collection', scope: 'shows', name: 'list_type__collection_show' },
+  Watchlist: { type: 'watchlist', id: 'watchlist', name: 'list_type__watchlist' },
+  MovieCollection: { type: 'collection', id: 'collection-movies', scope: 'movies', name: 'list_type__collection_movie' },
+  ShowCollection: { type: 'collection', id: 'collection-shows', scope: 'shows', name: 'list_type__collection_show' },
 } as const;
 
 const DefaultList: ListType[] = [DefaultLists.Watchlist, DefaultLists.MovieCollection, DefaultLists.ShowCollection];
@@ -42,6 +43,22 @@ export const useListsStore = defineStore('data.lists', () => {
   const lists = ref<ListType[]>(DefaultList);
   const activeList = ref<ListType>(DefaultLists.Watchlist);
 
+  const saveState = async () =>
+    storage.local.set('data.lists', {
+      lists: [...lists.value],
+      activeList: activeList.value,
+    });
+
+  const restoreState = async () => {
+    const restored = await storage.local.get<{
+      lists: ListType[];
+      activeList: ListType;
+    }>('data.lists');
+    if (restored?.lists) lists.value = restored.lists;
+    if (restored?.activeList === activeList.value) return;
+    if (restored?.activeList) activeList.value = restored.activeList;
+  };
+
   const clearState = () => {
     lists.value = DefaultList;
     activeList.value = DefaultLists.Watchlist;
@@ -73,15 +90,28 @@ export const useListsStore = defineStore('data.lists', () => {
             }) satisfies ListType,
         ),
       ];
+      if (activeList.value?.id && !lists.value.some(l => activeList.value.id === l?.id)) {
+        console.warn('Active List not found, falling back to default', activeList.value);
+        activeList.value = DefaultLists.Watchlist;
+      }
     } catch (e) {
       console.error('Failed to fetch lists');
       throw e;
     } finally {
       loading.value = false;
+      console.info('Fetched Lists', loading.value);
     }
   };
 
-  return { loading, lists, activeList, fetchLists, clearState };
+  const initListsStore = async () => {
+    await restoreState();
+
+    watch(activeList, async _value => {
+      await saveState();
+    });
+  };
+
+  return { loading, lists, activeList, fetchLists, clearState, initListsStore };
 });
 
 export const useListsStoreRefs = () => storeToRefs(useListsStore());
@@ -95,6 +125,13 @@ export const useListStore = defineStore('data.list', () => {
   const searchList = ref('');
   const threshold = ref(10);
 
+  const saveState = async () => storage.local.set('data.list.page-size', pageSize.value);
+  const restoreState = async () => {
+    const restored = await storage.local.get<number>('data.list.page-size');
+    if (restored === pageSize.value) return;
+    if (restored) pageSize.value = restored;
+  };
+
   const clearState = () => {
     listItems.value = [];
     pagination.value = undefined;
@@ -139,7 +176,6 @@ export const useListStore = defineStore('data.list', () => {
       } else {
         throw new Error('Invalid list type');
       }
-      console.info('Fetched List', list, response);
       const newData = response.data.map((item, index) => {
         if ('id' in item) return item;
         return { ...item, id: index };
@@ -156,17 +192,34 @@ export const useListStore = defineStore('data.list', () => {
     }
   };
 
-  watch(pageSize, async () => {
-    await fetchListItems();
-    searchList.value = '';
-  });
+  const initListStore = async () => {
+    await restoreState();
 
-  watch(activeList, async () => {
-    await fetchListItems();
-    searchList.value = '';
-  });
+    watch(pageSize, async () => {
+      await fetchListItems();
+      searchList.value = '';
+      await saveState();
+    });
 
-  return { loading, listItems, pagination, pageSize, searchList, clearState, belowThreshold, loadingPlaceholder, fetchListItems, filteredListItems };
+    watch(activeList, async () => {
+      await fetchListItems();
+      searchList.value = '';
+    });
+  };
+
+  return {
+    loading,
+    listItems,
+    pagination,
+    pageSize,
+    searchList,
+    clearState,
+    belowThreshold,
+    loadingPlaceholder,
+    fetchListItems,
+    filteredListItems,
+    initListStore,
+  };
 });
 
 export const useListStoreRefs = () => storeToRefs(useListStore());
diff --git a/src/utils/store.utils.ts b/src/utils/store.utils.ts
@@ -30,6 +30,7 @@ export const useSearchFilter = <D extends string, T extends ListScrollSourceItem
       if (!_search) return false;
       if (item.show?.title?.toLowerCase().includes(_search)) return true;
       if (item.movie?.title?.toLowerCase().includes(_search)) return true;
+      if (item.person?.name?.toLowerCase().includes(_search)) return true;
       if (!date) return false;
       const _date = typeof date === 'function' ? date(item) : item[date];
       if (!_date) return false;
@@ -55,25 +56,44 @@ export const useLoadingPlaceholder = <T>(pageSize: Ref<number>) =>
       .map((_, i) => ({ id: -1 * (i + 1) }) as T),
   );
 
-export const watchUserChange = (fetch: () => Promise<void>, clear: () => void) => {
+export const watchUserChange = ({
+  fetch,
+  clear,
+  activated,
+  deactivated,
+  userChange,
+}: {
+  fetch?: () => Promise<void>;
+  clear?: () => void | Promise<void>;
+  activated?: () => void | Promise<void>;
+  deactivated?: () => void | Promise<void>;
+  userChange?: (active: boolean) => void | Promise<void>;
+}) => {
   const { user } = useUserSettingsStoreRefs();
 
   const active = ref(false);
 
   onActivated(async () => {
     active.value = true;
-    await fetch();
+    if (activated) return activated();
+    await fetch?.();
   });
 
   onDeactivated(() => {
     active.value = false;
+    deactivated?.();
   });
 
   onMounted(() => {
-    watch(user, async () => {
-      if (active.value) await fetch();
-      else clear();
-    });
+    watch(
+      user,
+
+      async () => {
+        if (userChange) return userChange(active.value);
+        if (active.value) await fetch?.();
+        else clear?.();
+      },
+    );
   });
 
   return { active, user };
diff --git a/src/web/init-services.ts b/src/web/init-services.ts
@@ -1,6 +1,8 @@
 import { TraktService } from '~/services/trakt.service';
 import { useAppStateStore } from '~/stores/app-state.store';
+import { useHistoryStore } from '~/stores/data/history.store';
 import { useImageStore } from '~/stores/data/image.store';
+import { useListsStore, useListStore } from '~/stores/data/list.store';
 import { useAuthSettingsStore } from '~/stores/settings/auth.store';
 import { useUserSettingsStore } from '~/stores/settings/user.store';
 import { initLocalI18n } from '~/utils';
@@ -17,7 +19,14 @@ export const initServices = async () => {
 
   TraktService.listen();
 
-  await Promise.all([syncRestoreAllUsers(), useImageStore().initImageStore(), initLocalI18n().promise]);
+  await Promise.all([
+    initLocalI18n().promise,
+    syncRestoreAllUsers(),
+    useImageStore().initImageStore(),
+    useListsStore().initListsStore(),
+    useListStore().initListStore(),
+    useHistoryStore().initHistoryStore(),
+  ]);
 
   setAppReady(true);
 };
