feat(history): adds history store and enable nabar filtering

Author: dvcol

src/components/views/history/HistoryComponent.vue

@@ -1,32 +1,21 @@
 <script lang="ts" setup>
 import { NTimeline, NTimelineItem, NVirtualList } from 'naive-ui';
-import { onActivated, onMounted, ref } from 'vue';
+
+import { onActivated, onMounted, ref, watch } from 'vue';
 
 import type { VirtualListInst } from 'naive-ui';
 
-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 { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
+import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 
-const history = ref<TraktHistory[]>([]);
-const pagination = ref<TraktClientPagination>();
-const virtualList = ref<VirtualListInst>();
+const { filteredHistory: history, pagination } = useHistoryStoreRefs();
+const { fetchHistory } = useHistoryStore();
 
-const fetchData = async (
-  page = pagination.value?.page ? pagination.value.page + 1 : 0,
-) => {
-  const response = await TraktService.traktClient.sync.history.get.cached({
-    pagination: {
-      page,
-      limit: 30,
-    },
-  });
+const { user } = useUserSettingsStoreRefs();
 
-  const data = await response.json();
-  pagination.value = response.pagination;
-  history.value = [...history.value, ...data];
-};
+const virtualList = ref<VirtualListInst>();
 
 const onScroll = async (e: Event) => {
   if (!e?.target) return;
@@ -35,13 +24,18 @@ const onScroll = async (e: Event) => {
   if (pagination.value?.page === pagination.value?.pageCount) return;
 
   const key = history.value[history.value.length - 1].id;
-  await fetchData();
+  await fetchHistory({ page: pagination.value?.page ? pagination.value.page + 1 : 0 });
   virtualList.value?.scrollTo({ key, debounce: true });
 };
 
 onMounted(() => {
   console.info('History mounted');
-  fetchData();
+  fetchHistory();
+
+  watch(user, () => {
+    console.info('User Change - re fetching');
+    fetchHistory();
+  });
 });
 
 onActivated(() => {

src/components/views/history/HistoryNavbar.vue

@@ -1,12 +1,43 @@
 <script setup lang="ts">
 import { NDatePicker, NFlex, NIcon, NInput } from 'naive-ui';
-import { defineProps } from 'vue';
+import { computed, defineProps, ref, watch } from 'vue';
 
 import IconLoop from '~/components/icons/IconLoop.vue';
+import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
+import { debounce } from '~/utils/debounce.utils';
+
+const { searchHistory, historyEnd, historyStart } = useHistoryStoreRefs();
+const { setHistoryRange } = useHistoryStore();
+
+const debouncedSearch = ref(searchHistory.value);
 
 defineProps({
   parentElement: HTMLElement,
 });
+
+watch(searchHistory, () => {
+  if (searchHistory.value !== debouncedSearch.value) {
+    debouncedSearch.value = searchHistory.value;
+  }
+});
+
+watch(
+  debouncedSearch,
+  debounce(() => {
+    searchHistory.value = debouncedSearch.value;
+  }, 350),
+);
+
+const pickerValues = computed<[number, number] | null>(() => {
+  if (!historyStart.value || !historyEnd.value) return null;
+  return [historyStart.value.getTime(), historyEnd.value.getTime()];
+});
+
+const onDateChange = debounce((values?: [number, number]) => {
+  if (!values?.length) return setHistoryRange();
+  const [start, end] = values;
+  setHistoryRange({ start: new Date(start), end: new Date(end) });
+}, 350);
 </script>
 
 <template>
@@ -20,10 +51,17 @@ defineProps({
       update-value-on-close
       close-on-select
       clearable
-      :on-clear="() => console.log('clear')"
-      :on-confirm="value => console.log('confirm', value)"
+      :value="pickerValues"
+      :on-clear="onDateChange"
+      :on-confirm="onDateChange"
     />
-    <NInput class="input" placeholder="Search" autosize clearable>
+    <NInput
+      v-model:value="debouncedSearch"
+      class="input"
+      placeholder="Search"
+      autosize
+      clearable
+    >
       <template #prefix>
         <NIcon :component="IconLoop" />
       </template>

src/services/trakt.service.ts

@@ -49,8 +49,13 @@ export class TraktService {
     };
 
     this.traktClient = new TraktClient({ ...traktClientSettings, cacheStore: this.caches.trakt }, {}, traktApi);
-    this.tvdbClient = new TvdbClient({ ...tvdbClientSettings, cacheStore: this.caches.tvdb });
-    this.tmdbClient = new TmdbClient({ ...tmdbClientSettings, cacheStore: this.caches.tmdb });
+    this.tvdbClient = new TvdbClient({ ...tvdbClientSettings, cacheStore: this.caches.tvdb }, {}, tvdbApi);
+    this.tmdbClient = new TmdbClient({ ...tmdbClientSettings, cacheStore: this.caches.tmdb }, {}, tmdbApi);
+  }
+
+  static changeUser(user: string) {
+    this.caches.trakt.prefix = `trakt-cache-${user}`;
+    this.caches.tvdb.prefix = `tvdb-cache-${user}`;
   }
 
   private static async saveAuth(

src/stores/data/history.store.ts

@@ -0,0 +1,53 @@
+import { defineStore, storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+
+import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
+import type { TraktHistory } from '~/models/trakt/trakt-history.model';
+
+import { TraktService } from '~/services/trakt.service';
+
+export const useHistoryStore = defineStore('data.history', () => {
+  const history = ref<TraktHistory[]>([]);
+  const pagination = ref<TraktClientPagination>();
+
+  const searchHistory = ref('');
+  const filteredHistory = computed(() => {
+    if (!searchHistory.value) return history.value;
+    return history.value.filter((item: TraktHistory) => {
+      if ('movie' in item) return item.movie?.title?.toLowerCase().includes(searchHistory.value.toLowerCase());
+      if ('show' in item) {
+        if (item.show?.title?.toLowerCase().includes(searchHistory.value.toLowerCase())) return true;
+        if (item.episode?.title?.toLowerCase().includes(searchHistory.value.toLowerCase())) return true;
+      }
+      return false;
+    });
+  });
+
+  const historyStart = ref<Date | undefined>(undefined);
+  const historyEnd = ref<Date | undefined>(undefined);
+
+  const fetchHistory = async ({ page, start = historyStart.value, end = historyEnd.value }: { page?: number; start?: Date; end?: Date } = {}) => {
+    const response = await TraktService.traktClient.sync.history.get.cached({
+      pagination: {
+        page,
+        limit: 30,
+      },
+      start_at: start?.toISOString(),
+      end_at: end?.toISOString(),
+    });
+
+    const data = await response.json();
+    pagination.value = response.pagination;
+    history.value = page ? [...history.value, ...data] : data;
+  };
+
+  const setHistoryRange = ({ start, end }: { start?: Date; end?: Date } = {}) => {
+    historyStart.value = start;
+    historyEnd.value = end;
+    return fetchHistory({ start, end });
+  };
+
+  return { history, pagination, fetchHistory, searchHistory, filteredHistory, historyStart, historyEnd, setHistoryRange };
+});
+
+export const useHistoryStoreRefs = () => storeToRefs(useHistoryStore());

src/stores/settings/user.store.ts

@@ -1,9 +1,10 @@
 import { defineStore, storeToRefs } from 'pinia';
 
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 
 import type { UserSetting } from '~/models/trakt-service.model';
 
+import { TraktService } from '~/services/trakt.service';
 import { storage } from '~/utils/browser/browser-storage.utils';
 
 type UserSettings = Record<string, UserSetting>;
@@ -16,20 +17,36 @@ export const useUserSettingsStore = defineStore('settings.user', () => {
 
   const userSetting = computed(() => userSettings[user.value]);
 
+  /**
+   * Save the current user settings to chrome storage
+   * @param _settings
+   * @param account
+   */
   const syncSetUser = (_settings: UserSetting = userSetting.value, account: string = _settings?.user?.username ?? user.value) => {
     const _lastUser = storage.sync.set(`settings.last-user`, account);
     const _setting = storage.sync.set(`settings.user.${encodeURIComponent(account)}`, _settings);
     console.info('user-store', 'Saving user', account, JSON.parse(JSON.stringify(_settings)));
     return Promise.all([_lastUser, _setting]);
   };
 
+  /**
+   * Clear the last user from chrome storage
+   */
   const syncClearLastUser = () => storage.sync.remove(`settings.last-user`);
 
+  /**
+   * Clear a specific user from chrome storage
+   * @param account
+   */
   const syncClearUser = (account?: string) => {
     console.info('user-store', 'Clearing user', account);
     return storage.sync.remove(`settings.user${account ? `.${encodeURIComponent(account)}` : ''}`);
   };
 
+  /**
+   * Restore a specific user from chrome storage
+   * @param account
+   */
   const syncRestoreUser = async (account: string = user.value) => {
     if (account === defaultUser) account = await storage.sync.get<string>(`settings.last-user`);
     if (!account) account = Object.keys(userSettings).find(_account => _account !== defaultUser) ?? defaultUser;
@@ -41,6 +58,11 @@ export const useUserSettingsStore = defineStore('settings.user', () => {
     return _setting;
   };
 
+  /**
+   * Change the current user settings for a specific account
+   * @param _settings
+   * @param account
+   */
   const setUserSetting = async (_settings: UserSetting = {}, account: string = _settings?.user?.username ?? user.value) => {
     if (Object.keys(_settings).length < 1) {
       delete userSettings[account];
@@ -55,6 +77,9 @@ export const useUserSettingsStore = defineStore('settings.user', () => {
     return syncSetUser(userSettings[account], account);
   };
 
+  /**
+   * Restore all users from chrome storage
+   */
   const syncRestoreAllUsers = async () => {
     const restored = await storage.sync.getAll<UserSettings>('settings.user.');
 
@@ -68,6 +93,10 @@ export const useUserSettingsStore = defineStore('settings.user', () => {
     });
   };
 
+  /**
+   * Change the current user
+   * @param account
+   */
   const setCurrentUser = (account?: string) => {
     console.info('user-store', 'Setting current user', JSON.parse(JSON.stringify(userSettings)));
 
@@ -78,6 +107,12 @@ export const useUserSettingsStore = defineStore('settings.user', () => {
     return setUserSetting(userSettings[account], account);
   };
 
+  // Propagate user change to http service
+  watch(user, _user => {
+    console.info('user changed', _user);
+    TraktService.changeUser(_user);
+  });
+
   return { user, userSettings, userSetting, setUserSetting, syncSetUser, syncRestoreUser, syncRestoreAllUsers, setCurrentUser };
 });
 

src/utils/debounce.utils.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- generic type
+type AnyFunction<T> = (...args: any[]) => T;
+
+export function debounce<T>(func: AnyFunction<T>, delay: number = 250): AnyFunction<Promise<T>> {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  return async (...args: Parameters<typeof func>[]): Promise<T> => {
+    return new Promise(resolve => {
+      if (timeoutId) clearTimeout(timeoutId);
+
+      timeoutId = setTimeout(async () => {
+        const result = await func(...args);
+        resolve(result);
+      }, delay);
+    });
+  };
+}