feat(cache): create chrome storage cache

Author: dvcol

src/services/common/base-client.ts

@@ -238,7 +238,7 @@ export abstract class BaseClient<
         const fn: ClientEndpointCall = (param, init) => this._call(template, param, init);
 
         const cachedFn: ClientEndpointCache = async (param, init, cacheOptions) => {
-          const key = JSON.stringify({ param, init });
+          const key = JSON.stringify({ endpoint, param, init });
           if (!cacheOptions?.force) {
             const cached = await this._cache.get(key);
             if (cached) {

src/services/tmdb-client/tmdb-client.service.ts

@@ -1,4 +1,8 @@
+import type { TmdbApiResponse } from '~/models/tmdb/tmdb-client.model';
+
 import { TmdbClient } from '~/services/tmdb-client/clients/tmdb-client';
 import { tmdbClientSettings } from '~/settings/tmdb.api';
+import { ChromeCacheStore } from '~/utils/cache.utils';
 
-export const tmdbService = new TmdbClient(tmdbClientSettings);
+const cacheStore = new ChromeCacheStore<TmdbApiResponse>({ prefix: 'tmdb-cache' });
+export const tmdbService = new TmdbClient({ ...tmdbClientSettings, cacheStore });

src/services/trakt-client/trakt-client.service.ts

@@ -1,4 +1,9 @@
+import type { TraktApiResponse } from '~/models/trakt/trakt-client.model';
+
+import { traktApi } from '~/services/trakt-client/api/trakt-api.endpoints';
 import { TraktClient } from '~/services/trakt-client/clients/trakt-client';
 import { traktClientSettings } from '~/settings/traktv.api';
+import { ChromeCacheStore } from '~/utils/cache.utils';
 
-export const traktService = new TraktClient(traktClientSettings);
+const cacheStore = new ChromeCacheStore<TraktApiResponse>({ prefix: 'trakt-cache' });
+export const traktService = new TraktClient({ ...traktClientSettings, cacheStore }, {}, traktApi);

src/services/tvdb-client/tvdb-client.service.ts

@@ -1,4 +1,8 @@
+import type { TvdbApiResponse } from '~/models/tvdb/tvdb-client.model';
+
 import { TvdbClient } from '~/services/tvdb-client/clients/tvdb-client';
 import { tvdbClientSettings } from '~/settings/tvdb.api';
+import { ChromeCacheStore } from '~/utils/cache.utils';
 
-export const tvdbService = new TvdbClient(tvdbClientSettings);
+const cacheStore = new ChromeCacheStore<TvdbApiResponse>({ prefix: 'tmdb-cache' });
+export const tvdbService = new TvdbClient({ ...tvdbClientSettings, cacheStore });

src/utils/browser/browser-storage.utils.ts

@@ -44,6 +44,8 @@ export const storageWrapper = (area: chrome.storage.StorageArea, name = crypto.r
   };
 };
 
+export type StorageArea = ReturnType<typeof storageWrapper>;
+
 /**
  * This object is used to access the storage areas.
  */

src/utils/cache.utils.ts

@@ -1,3 +1,5 @@
+import { storage, type StorageArea } from '~/utils/browser/browser-storage.utils';
+
 export type CacheStoreEntity<T = unknown> = {
   value: T;
   cachedAt: number;
@@ -12,3 +14,41 @@ export type CacheStore<T = unknown> = {
   /** the duration in milliseconds after which the cache will be cleared */
   retention?: number;
 };
+
+export class ChromeCacheStore<T> implements CacheStore<T> {
+  retention?: number;
+  store: StorageArea;
+  prefix: string;
+
+  constructor({
+    retention = 24 * 60 * 60,
+    store = storage.local,
+    prefix = 'http-cache',
+  }: {
+    retention?: number;
+    store?: StorageArea;
+    prefix?: string;
+  }) {
+    this.retention = retention;
+    this.store = store;
+    this.prefix = prefix;
+  }
+
+  async get(key: string) {
+    return this.store.get<CacheStoreEntity<T>>(`${this.prefix}:${key}`);
+  }
+
+  async set(key: string, value: CacheStoreEntity<T>) {
+    await this.store.set(`${this.prefix}:${key}`, value);
+    return this;
+  }
+
+  async delete(key: string) {
+    await this.store.remove(`${this.prefix}:${key}`);
+    return true;
+  }
+
+  async clear() {
+    return this.store.clear();
+  }
+}