feat(cache): adds cache evicting on last activities

Author: dvcol

src/components/container/LoadingBarProvider.vue

@@ -3,7 +3,7 @@ import { useLoadingBar } from 'naive-ui';
 
 import { LoadingBarService } from '~/services/loading-bar.service';
 
-LoadingBarService.instance = useLoadingBar();
+LoadingBarService.init(useLoadingBar());
 </script>
 
 <template>

src/models/trakt/trakt-client.model.ts

@@ -99,11 +99,9 @@ export interface TraktClientEndpoint<Parameter extends TraktApiParams = Record<s
   (param?: Parameter, init?: TraktApiInit): Promise<TraktApiResponse<Response>>;
 }
 
-export type TraktClientCachedEndpoint<Parameter extends TraktApiParams = Record<string, never>, Response = unknown> = (
-  param?: Parameter,
-  init?: BaseInit,
-  cacheOptions?: BaseCacheOption,
-) => Promise<TraktApiResponse<Response>>;
+export type TraktClientCachedEndpoint<Parameter extends TraktApiParams = Record<string, never>, Response = unknown> = {
+  evict: (param?: Parameter, init?: BaseInit) => Promise<string | undefined>;
+} & ((param?: Parameter, init?: BaseInit, cacheOptions?: BaseCacheOption) => Promise<TraktApiResponse<Response>>);
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging  -- To allow type extension
 export class TraktClientEndpoint<

src/models/trakt/trakt-sync.model.ts

@@ -42,6 +42,9 @@ export type TraktSyncActivity = {
 export type TraktSyncActivities = {
   /** Timestamp in ISO 8601 GMT format (YYYY-MM-DD'T'hh:mm:ss.sssZ) */
   all: string;
+  collaborations: Pick<TraktSyncActivity, 'updated_at'>;
+  recommendations: Pick<TraktSyncActivity, 'updated_at'>;
+
   movies: Pick<
     TraktSyncActivity,
     'watched_at' | 'collected_at' | 'rated_at' | 'watchlisted_at' | 'favorited_at' | 'commented_at' | 'paused_at' | 'hidden_at'
@@ -55,7 +58,7 @@ export type TraktSyncActivities = {
   favorites: Pick<TraktSyncActivity, 'updated_at'>;
   account: Pick<TraktSyncActivity, 'settings_at' | 'followed_at' | 'following_at' | 'pending_at' | 'requested_at'>;
   saved_filters: Pick<TraktSyncActivity, 'updated_at'>;
-  noted: Pick<TraktSyncActivity, 'updated_at'>;
+  notes: Pick<TraktSyncActivity, 'updated_at'>;
 };
 
 export type TraktSyncProgress<T extends 'movie' | 'episode' | Any = Any> = {

src/services/common/base-client.ts

@@ -110,11 +110,9 @@ export interface ClientEndpoint<Parameter extends RecursiveRecord = Record<strin
 
 export type BaseCacheOption = { force?: boolean; retention?: number; evictOnError?: boolean };
 
-type ClientEndpointCache<Parameter extends RecursiveRecord = Record<string, never>, Response = unknown> = (
-  param?: Parameter,
-  init?: BaseInit,
-  cacheOptions?: BaseCacheOption,
-) => Promise<TypedResponse<Response>>;
+type ClientEndpointCache<Parameter extends RecursiveRecord = Record<string, never>, Response = unknown> = {
+  evict: (param?: Parameter, init?: BaseInit) => Promise<string | undefined>;
+} & ((param?: Parameter, init?: BaseInit, cacheOptions?: BaseCacheOption) => Promise<TypedResponse<Response>>);
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export class ClientEndpoint<
@@ -203,7 +201,7 @@ export const getCachedFunction = <
     retention?: BaseTemplateOptions['cache'];
   },
 ): ClientEndpointCache<Parameter, ResponseBody> => {
-  const cachedFn: ClientEndpointCache<Parameter, ResponseBody> = async (param, init, cacheOptions) => {
+  const cachedFn = async (param: Parameter, init: BaseInit, cacheOptions: BaseCacheOption) => {
     const _key = typeof key === 'function' ? key(param, init) : key;
     const cached = await cache.get(_key);
     if (cached && !cacheOptions?.force) {
@@ -242,7 +240,7 @@ export const getCachedFunction = <
   };
 
   Object.defineProperty(cachedFn, 'evict', { value: evictFn });
-  return cachedFn;
+  return cachedFn as ClientEndpointCache<Parameter, ResponseBody>;
 };
 
 /**

src/services/loading-bar.service.ts

@@ -1,20 +1,36 @@
+import { ref } from 'vue';
+
 import type { useLoadingBar } from 'naive-ui';
 
 export class LoadingBarService {
-  static instance: ReturnType<typeof useLoadingBar>;
+  private static instance: ReturnType<typeof useLoadingBar>;
+  private static loading = ref(false);
+
+  static init(instance: ReturnType<typeof useLoadingBar>) {
+    this.instance = instance;
+  }
+
+  static get isLoading() {
+    return this.loading.value;
+  }
 
   static start() {
     if (!this.instance) console.warn('LoadingBarService instance is not initialized');
     this.instance.start();
+    this.loading.value = true;
   }
 
   static finish() {
+    if (!this.isLoading) return;
     if (!this.instance) console.warn('LoadingBarService instance is not initialized');
     this.instance.finish();
+    this.loading.value = false;
   }
 
   static error() {
+    if (!this.isLoading) return;
     if (!this.instance) console.warn('LoadingBarService instance is not initialized');
     this.instance.error();
+    this.loading.value = false;
   }
 }

src/services/trakt.service.ts

@@ -311,4 +311,34 @@ export class TraktService {
       return response.json();
     },
   };
+
+  static async activity() {
+    const response = await this.traktClient.sync.lastActivities();
+    return response.json();
+  }
+
+  static evict = {
+    tmdb: TraktService.caches.tmdb.clear,
+    trakt: TraktService.caches.trakt.clear,
+    tvdb: TraktService.caches.tvdb.clear,
+    history: TraktService.traktClient.sync.history.get.cached.evict,
+    watchlist: TraktService.traktClient.sync.watchlist.get.cached.evict,
+    favorites: TraktService.traktClient.sync.favorites.get.cached.evict,
+    collection: TraktService.traktClient.sync.collection.get.cached.evict,
+    lists: () =>
+      Promise.all([
+        TraktService.traktClient.users.lists.get.cached.evict(),
+        TraktService.traktClient.users.lists.collaborations.cached.evict(),
+        TraktService.traktClient.users.list.items.get.cached.evict(),
+      ]),
+    calendar: () =>
+      Promise.all([
+        TraktService.traktClient.calendars.my.movies.cached.evict(),
+        TraktService.traktClient.calendars.my.shows.new.cached.evict(),
+        TraktService.traktClient.calendars.my.shows.premieres.cached.evict(),
+        TraktService.traktClient.calendars.my.shows.finales.cached.evict(),
+        TraktService.traktClient.calendars.my.shows.get.cached.evict(),
+      ]),
+    progress: () => Promise.all([TraktService.cachedProgress.evict(), TraktService.traktClient.shows.progress.watched.cached.evict()]),
+  };
 }

src/stores/data/activity.store.ts

@@ -0,0 +1,89 @@
+import { defineStore, storeToRefs } from 'pinia';
+
+import { ref, watch } from 'vue';
+
+import type { TraktSyncActivities } from '~/models/trakt/trakt-sync.model';
+
+import { TraktService } from '~/services/trakt.service';
+import { storage } from '~/utils/browser/browser-storage.utils';
+import { compareDateObject, toDateObject } from '~/utils/date.utils';
+
+export const useActivityStore = defineStore('data.activity', () => {
+  const activity = ref<TraktSyncActivities>();
+  const loading = ref(false);
+
+  const clearState = () => {
+    activity.value = undefined;
+  };
+
+  const saveState = async () => storage.local.set('data.activity', activity.value);
+  const restoreState = async () => {
+    const state = await storage.local.get<TraktSyncActivities>('data.activity');
+    if (state) activity.value = state;
+  };
+
+  const fetchActivity = async () => {
+    console.info('Fetching activity');
+    loading.value = true;
+
+    try {
+      activity.value = await TraktService.activity();
+      await saveState();
+    } catch (error) {
+      console.error('Failed to fetch activity', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const initActivityStore = async () => {
+    await restoreState();
+
+    watch(activity, (next, prev) => {
+      const changed = compareDateObject(toDateObject(prev), toDateObject(next));
+      console.info('Activity changed', changed);
+
+      if (
+        changed?.episodes?.watched_at ||
+        changed?.movies?.watched_at ||
+        changed?.shows?.hidden_at ||
+        changed?.seasons?.hidden_at ||
+        changed?.movies?.hidden_at
+      ) {
+        TraktService.evict.progress();
+        TraktService.evict.history();
+        TraktService.evict.calendar();
+        console.info('Evicted progress, history and calendar');
+      }
+      if (
+        changed?.watchlist?.updated_at ||
+        changed?.episodes?.watchlisted_at ||
+        changed?.seasons?.watchlisted_at ||
+        changed?.shows?.watchlisted_at ||
+        changed?.movies?.watchlisted_at
+      ) {
+        TraktService.evict.watchlist();
+        console.info('Evicted watchlist');
+      }
+      if (changed?.collaborations?.updated_at || changed?.lists?.updated_at) {
+        TraktService.evict.lists();
+        console.info('Evicted lists');
+      }
+      if (changed?.episodes?.collected_at || changed?.movies?.collected_at) {
+        TraktService.evict.collection();
+        console.info('Evicted collection');
+      }
+      if (changed?.favorites?.updated_at) {
+        TraktService.evict.favorites();
+        console.info('Evicted favorites');
+      }
+    });
+
+    await fetchActivity();
+  };
+
+  return { activity, loading, fetchActivity, clearState, saveState, restoreState, initActivityStore };
+});
+
+export const useActivityStoreRefs = () => storeToRefs(useActivityStore());

src/utils/cache.utils.ts

@@ -13,7 +13,7 @@ export type CacheStore<T = unknown> = {
   get(key: string): CacheStoreEntity<T> | Promise<CacheStoreEntity<T>> | undefined;
   set(key: string, value: CacheStoreEntity<T>): CacheStore<T> | Promise<CacheStore<T>>;
   delete(key: string): boolean | Promise<boolean>;
-  clear(regex?: string): void;
+  clear(regex?: string): void | Promise<void>;
   /** the duration in milliseconds after which the cache will be cleared */
   retention?: number;
   /** if true, the cache will be deleted if an error occurs */

src/utils/date.utils.ts

@@ -1,3 +1,5 @@
+import type { RecursiveRecord, RecursiveType } from '~/utils/typescript.utils';
+
 export class DateUtils {
   static clone = (date: Date) => new Date(date);
 
@@ -16,3 +18,32 @@ export class DateUtils {
     next: (weeks = 1, date?: Date) => this.next(weeks, date, 7),
   };
 }
+
+export const toDateObject = <T extends RecursiveRecord<string>>(record?: T): RecursiveType<T, Date> | undefined => {
+  if (!record) return record;
+  return Object.fromEntries(
+    Object.entries(record).map(([key, value]) => {
+      if (typeof value === 'string') return [key, new Date(value)];
+      if (typeof value === 'object') return [key, toDateObject(value)];
+      return [key, value];
+    }),
+  );
+};
+
+const isDate = (value: unknown): value is Date => value instanceof Date;
+
+export const compareDateObject = <T extends RecursiveRecord<Date>>(a?: T, b?: T): RecursiveType<T, boolean> => {
+  if (!a || !b) throw new Error('Cannot compare undefined objects');
+  return Object.fromEntries(
+    Object.keys(a).map(key => {
+      const _key: keyof RecursiveRecord<Date> = key as keyof RecursiveRecord<Date>;
+      if (a && b) {
+        const aValue = a[_key];
+        const bValue = b[_key];
+        if (isDate(aValue) && isDate(bValue)) return [_key, aValue.getTime() !== bValue.getTime()];
+        if (!isDate(aValue) && !isDate(bValue)) return [_key, compareDateObject(aValue, bValue)];
+      }
+      return [_key, a !== b];
+    }),
+  );
+};

src/utils/regex.utils.ts

@@ -5,3 +5,4 @@ export const LargeRange = /^(100000|\d{0,5})-(100000|\d{0,5})$/;
 export const VeryLargeRange = /^(300000|[1-2]?\d{0,5})-(300000|[1-2]?\d{0,5})$/;
 export const DateISO8601 = /^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])T([01]\d|2[0-3]):[0-5]\d:[0-5]\d(\.\d+)?(Z|[+-]\d{2}:[0-5]\d)?$/;
 export const DateISO8601Short = /^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
+export const ExactMatchRegex = /[/\-\\^$*+?.()|[\]{}]/g;

src/utils/typescript.utils.ts

@@ -18,3 +18,7 @@ export type RecursiveRecord<T = any> =
 export type GenericFunction = (...args: any) => any;
 
 export type ArrayElement<ArrayType extends readonly unknown[] | undefined> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+export type RecursiveType<T, R> = {
+  [K in keyof T]: T[K] extends object ? RecursiveType<T[K], R> : R;
+};

src/views/popup/main.ts

@@ -1,12 +1,16 @@
 import defineComponent from '~/web/define-component';
 
-const root = document?.getElementById('app-popup');
+const resizeContainer = () => {
+  const root = document?.getElementById('app-popup');
 
-if (root) {
+  if (!root) return;
   root.style.width = `${window.innerWidth}px`;
   root.style.height = `${window.innerHeight}px`;
-}
+};
 
 defineComponent({ baseUrl: import.meta.env.VITE_BASE })
-  .then(() => console.info('Web Component defined'))
+  .then(() => {
+    resizeContainer();
+    console.info('Web Component defined');
+  })
   .catch(err => console.error('Failed to define component', err));

src/web/init-services.ts

@@ -1,5 +1,6 @@
 import { TraktService } from '~/services/trakt.service';
 import { useAppStateStore } from '~/stores/app-state.store';
+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';
@@ -32,5 +33,7 @@ export const initServices = async () => {
     useShowStore().initShowStore(),
   ]);
 
+  await useActivityStore().initActivityStore();
+
   setAppReady(true);
 };