feat(progress): move progress to store and adds caching

Author: dvcol

src/components/common/list/ListItem.vue

@@ -179,6 +179,7 @@ const ListScrollItemTypeLocal = ListScrollItemType;
     }"
     :data-key="item.id"
     :data-index="item.index"
+    :data-type="item.type"
     :line-type="loading ? 'dashed' : lineType"
     :color="loading ? 'grey' : color"
     @mouseenter="onHover(true)"

src/components/common/list/ListScroll.vue

@@ -55,7 +55,7 @@ const props = defineProps({
   scrollThreshold: {
     type: Number,
     required: false,
-    default: 0,
+    default: 300,
   },
 });
 

src/components/common/list/use-list-scroll.ts

@@ -119,7 +119,11 @@ export const useListScroll = <T extends ListScrollSourceItemWithDate<D>, D exten
     const array = items.value;
     if (!array.length) return [];
     return array.map((item, index) => {
-      const _item: ListScrollItem = { ...item, index, loading: (typeof item.id === 'number' && item.id < 0) || item.type === 'loading' };
+      const _item: ListScrollItem = {
+        ...item,
+        index,
+        loading: (typeof item.id === 'number' && item.id < 0) || item.type === ListScrollItemType.loading,
+      };
 
       if (!_item.type) _item.type = getType(item);
       if (!_item.title) _item.title = getTitle(item);
@@ -193,7 +197,7 @@ export const addLoadMore = (
     if (!pagination.value?.pageCount) return array;
     if (pagination.value.page === pagination.value.pageCount) return array;
     if (array.length && array[array.length - 1].type === ListScrollItemType.loadMore) return array;
-    const loadMore: ListScrollItem = { id: 'load-more', type: ListScrollItemType.loadMore, index: items.value.length };
+    const loadMore: ListScrollItem = { id: ListScrollItemType.loadMore, type: ListScrollItemType.loadMore, index: items.value.length };
     return [...array, loadMore];
   });
 };

src/components/views/calendar/CalendarComponent.vue

@@ -105,7 +105,6 @@ const onScrollBottom = async () => {
       ref="listRef"
       :items="list"
       :loading="loading"
-      :scroll-threshold="300"
       episode
       :scroll-into-view="centerItem?.id ? [centerItem?.id] : []"
       @on-scroll-into-view="e => onScrollIntoOutOfView(false, e.ref)"

src/components/views/history/HistoryComponent.vue

@@ -44,7 +44,6 @@ const { scrolled, listRef, onClick } = useBackToTop();
       :loading="loading"
       :pagination="pagination"
       :page-size="pageSize"
-      :scroll-threshold="300"
       @on-scroll="scrolled = true"
       @on-scroll-top="scrolled = false"
       @on-scroll-bottom="onScroll"

src/components/views/progress/ProgressComponent.vue

@@ -1,45 +1,36 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-
-import type { ListScrollItem } from '~/models/list-scroll.model';
+import { onMounted } from 'vue';
 
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
 import ListScroll from '~/components/common/list/ListScroll.vue';
-import { progressToListItem } from '~/models/progress.model';
-import { TraktService } from '~/services/trakt.service';
+
+import { useProgressStore, useProgressStoreRefs } from '~/stores/data/progress.store';
 import { useI18n } from '~/utils';
 
 const i18n = useI18n('progress');
 
-const loading = ref(true);
-
-const fetchProgress = async (): Promise<ListScrollItem[]> => {
-  loading.value = true;
-  try {
-    const items = await TraktService.progress();
-    return items.map((item, index) => ({ ...progressToListItem(item), index }));
-  } catch (error) {
-    console.error(error);
-    throw error;
-  } finally {
-    loading.value = false;
-  }
-};
-
-const list = ref<ListScrollItem[]>([]);
+const { progress, loading } = useProgressStoreRefs();
+const { fetchProgress } = useProgressStore();
 
 onMounted(async () => {
-  list.value = await fetchProgress();
-  console.info('list', list.value);
+  await fetchProgress();
 });
 
 const { scrolled, listRef, onClick } = useBackToTop();
 </script>
 
 <template>
   <div class="container">
-    <ListScroll ref="listRef" :loading="loading" :items="list" episode hide-date>
+    <ListScroll
+      ref="listRef"
+      :loading="loading"
+      :items="progress"
+      episode
+      hide-date
+      @on-scroll="scrolled = true"
+      @on-scroll-top="scrolled = false"
+    >
       <template #default>
         <!-- TODO buttons here-->
       </template>

src/components/views/search/SearchComponent.vue

@@ -43,8 +43,8 @@ const { scrolled, listRef, onClick } = useBackToTop();
       hide-date
       :items="list"
       :loading="loading"
-      :scroll-threshold="300"
       @on-scroll="scrolled = true"
+      @on-scroll-top="scrolled = false"
       @on-scroll-bottom="onScroll"
     >
       <template #default>

src/components/views/watchlist/WatchlistComponent.vue

@@ -54,7 +54,6 @@ const { scrolled, listRef, onClick } = useBackToTop();
       :loading="loading"
       :pagination="pagination"
       :page-size="pageSize"
-      :scroll-threshold="300"
       @on-scroll="scrolled = true"
       @on-scroll-top="scrolled = false"
       @on-scroll-bottom="onScroll"

src/models/progress.model.ts

@@ -1,9 +1,3 @@
-import type { ListScrollItem, ListScrollSourceItem } from '~/models/list-scroll.model';
-import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
-import type { TraktShow } from '~/models/trakt/trakt-show.model';
-
-import { getContent, getTags, getTitle } from '~/components/common/list/use-list-scroll';
-
 export type ProgressItem = {
   episodeId: string;
   episodeNumber: string;
@@ -23,48 +17,3 @@ export type ProgressItem = {
   type: 'show' | 'season' | 'episode';
   url: string;
 };
-
-const titleRegex = /(.*)\s\d+x\d+\s"([^"]+)"/;
-export const progressToListItem = (progress: ProgressItem): Omit<ListScrollItem, 'index'> => {
-  const match = titleRegex.exec(progress.fullTitle);
-
-  const episode: ListScrollSourceItem['episode'] = {
-    ids: {
-      trakt: Number(progress.episodeId),
-    } as TraktEpisode['ids'],
-    title: match ? match[2] : progress.fullTitle,
-    season: Number(progress.seasonNumber),
-    number: Number(progress.episodeNumber),
-  };
-
-  const show: ListScrollSourceItem['show'] = {
-    ids: {
-      trakt: Number(progress.showId),
-    } as TraktShow['ids'],
-    title: match ? match[1] : progress.fullTitle,
-  } as ListScrollSourceItem['show'];
-
-  const poster = progress.fanart ?? progress.screenshot;
-
-  return {
-    id: Number(progress.episodeId ?? progress.seasonId ?? progress.showId),
-    title: getTitle({ show, episode }),
-    content: getContent({ show, episode }),
-    poster,
-    date: {
-      current: new Date(progress.firstAired),
-    },
-    type: progress.type,
-    tags: getTags({ episode }, progress.type),
-    meta: {
-      source: progress,
-      episode,
-      show,
-      ids: {
-        show: progress.showId ? Number(progress.showId) : undefined,
-        season: progress.seasonId ? Number(progress.seasonId) : undefined,
-        episode: progress.episodeId ? Number(progress.episodeId) : undefined,
-      },
-    },
-  };
-};

src/services/common/base-client.ts

@@ -106,13 +106,14 @@ type ClientEndpointCall<Parameter extends RecursiveRecord = Record<string, never
 export interface ClientEndpoint<Parameter extends RecursiveRecord = Record<string, never>, Response = unknown> {
   (param?: Parameter, init?: BaseInit): Promise<ResponseOrTypedResponse<Response>>;
 }
+
 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<ResponseOrTypedResponse<Response>>;
+) => Promise<TypedResponse<Response>>;
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export class ClientEndpoint<
@@ -183,6 +184,52 @@ const cloneResponse = <T>(response: TypedResponse<T>, cache?: TypedResponse<T>['
   return clone as TypedResponse<T>;
 };
 
+export const getCachedFunction = <
+  Parameter extends RecursiveRecord = RecursiveRecord,
+  ResponseBody = unknown,
+  ResponseType extends Response = Response,
+>(
+  clientFn: ClientEndpointCall<Parameter, ResponseBody>,
+  {
+    key,
+    cache,
+    retention,
+  }: {
+    key: string | ((param?: Parameter, init?: BaseInit) => string);
+    cache: CacheStore<ResponseType>;
+    retention?: BaseTemplateOptions['cache'];
+  },
+): ClientEndpointCache<Parameter, ResponseBody> => {
+  return async (param, init, cacheOptions) => {
+    const _key = typeof key === 'function' ? key(param, init) : key;
+    const cached = await cache.get(_key);
+    if (cached && !cacheOptions?.force) {
+      let templateRetention = typeof retention === 'number' ? retention : undefined;
+      if (typeof retention === 'object') templateRetention = retention.retention;
+      const _retention = cacheOptions?.retention ?? templateRetention ?? cache.retention;
+      if (!_retention) return cloneResponse<ResponseType>(cached.value, { previous: cached, current: cached, isCache: true });
+      const expires = cached.cachedAt + _retention;
+      if (expires > Date.now()) return cloneResponse(cached.value, { previous: cached, current: cached, isCache: true });
+    }
+
+    try {
+      const result: TypedResponse<ResponseBody> = await clientFn(param, init);
+      const cacheEntry: CacheStoreEntity<ResponseType> = {
+        cachedAt: Date.now(),
+        value: cloneResponse(result) as ResponseType,
+      };
+      await cache.set(_key, cacheEntry);
+      result.cache = { previous: cached, current: cacheEntry, isCache: false };
+      return result;
+    } catch (error) {
+      if (cacheOptions?.evictOnError ?? (typeof retention === 'object' ? retention?.evictOnError : undefined) ?? cache.evictOnError) {
+        cache.delete(_key);
+      }
+      throw error;
+    }
+  };
+};
+
 /**
  * Represents a client with common functionality.
  *
@@ -285,39 +332,11 @@ export abstract class BaseClient<
       if (isApiTemplate(template)) {
         const fn: ClientEndpointCall = (param, init) => this._call(template, param, init);
 
-        const cachedFn: ClientEndpointCache = async (param, init, cacheOptions) => {
-          const key = JSON.stringify({ template: template.config, param, init });
-
-          const cached = await this._cache.get(key);
-          if (cached && !cacheOptions?.force) {
-            let templateRetention = typeof template.opts?.cache === 'number' ? template.opts.cache : undefined;
-            if (typeof template.opts?.cache === 'object') templateRetention = template.opts.cache.retention;
-            const retention = cacheOptions?.retention ?? templateRetention ?? this._cache.retention;
-            if (!retention) return cloneResponse(cached.value, { previous: cached, current: cached, isCache: true });
-            const expires = cached.cachedAt + retention;
-            if (expires > Date.now()) return cloneResponse(cached.value, { previous: cached, current: cached, isCache: true });
-          }
-
-          try {
-            const result = await fn(param, init);
-            const cacheEntry = {
-              cachedAt: Date.now(),
-              value: cloneResponse(result) as ResponseType,
-            };
-            await this._cache.set(key, cacheEntry);
-            result.cache = { previous: cached, current: cacheEntry, isCache: false };
-            return result;
-          } catch (error) {
-            if (
-              cacheOptions?.evictOnError ??
-              (typeof template.opts?.cache === 'object' ? template.opts?.cache?.evictOnError : undefined) ??
-              this._cache.evictOnError
-            ) {
-              this._cache.delete(key);
-            }
-            throw error;
-          }
-        };
+        const cachedFn: ClientEndpointCache = getCachedFunction(fn, {
+          key: (param: unknown, init: unknown) => JSON.stringify({ template: template.config, param, init }),
+          cache: this._cache,
+          retention: template.opts?.cache,
+        });
 
         const parseUrl = (param: Record<string, unknown> = {}) => {
           const _params = template.transform?.(param) ?? param;

src/services/trakt.service.ts

@@ -12,6 +12,7 @@ import type { TraktWatchlistGetQuery } from '~/models/trakt/trakt-watchlist.mode
 import type { SettingsAuth, UserSetting } from '~/models/trakt-service.model';
 import type { TvdbApiResponse } from '~/models/tvdb/tvdb-client.model';
 
+import { getCachedFunction, type TypedResponse } from '~/services/common/base-client';
 import { LoadingBarService } from '~/services/loading-bar.service';
 import { tmdbApi } from '~/services/tmdb-client/api/tmdb-api.endpoints';
 import { TmdbClient } from '~/services/tmdb-client/clients/tmdb-client';
@@ -266,14 +267,37 @@ export class TraktService {
     return { data: await response.json(), pagination: response.pagination };
   }
 
-  static async progress() {
-    const response = await fetch('https://trakt.tv/dashboard/on_deck', {
-      credentials: 'include',
-    });
+  private static cachedProgress = getCachedFunction(
+    async () => {
+      const response = await fetch('https://trakt.tv/dashboard/on_deck', {
+        credentials: 'include',
+      });
 
-    const htmlString = await response.text();
-    const htmlDoc = new DOMParser().parseFromString(htmlString, 'text/html');
+      const htmlString = await response.text();
+      const htmlDoc = new DOMParser().parseFromString(htmlString, 'text/html');
+      const data = Array.from(htmlDoc.querySelectorAll<HTMLAnchorElement>('a[class="watch"]')).map(
+        a => ({ ...a.dataset }) as unknown as ProgressItem,
+      );
 
-    return Array.from(htmlDoc.querySelectorAll<HTMLAnchorElement>('a[class="watch"]')).map(a => ({ ...a.dataset }) as unknown as ProgressItem);
+      return new Response(JSON.stringify(data)) as TypedResponse<ProgressItem[]>;
+    },
+    {
+      cache: this.caches.trakt,
+      retention: CacheRetention.Day,
+      key: JSON.stringify({
+        template: {
+          method: 'GET',
+          url: 'https://trakt.tv/dashboard/on_deck',
+        },
+        init: {
+          credentials: 'include',
+        },
+      }),
+    },
+  );
+
+  static async progress() {
+    const response = await this.cachedProgress();
+    return response.json();
   }
 }

src/stores/data/calendar.store.ts

@@ -176,13 +176,13 @@ export const useCalendarStore = defineStore('data.calendar', () => {
       if (mode === 'reload') {
         calendar.value = [...spacedData];
       } else if (mode === 'start') {
-        calendar.value = [...spacedData, ...calendar.value.filter(c => c.type !== 'loading')];
+        calendar.value = [...spacedData, ...calendar.value.filter(c => c.type !== ListScrollItemType.loading)];
       } else if (mode === 'end') {
-        calendar.value = [...calendar.value.filter(c => c.type !== 'loading'), ...spacedData];
+        calendar.value = [...calendar.value.filter(c => c.type !== ListScrollItemType.loading), ...spacedData];
       }
     } catch (e) {
       console.error('Failed to fetch history');
-      calendar.value = calendar.value.filter(c => c.type !== 'loading');
+      calendar.value = calendar.value.filter(c => c.type !== ListScrollItemType.loading);
       throw e;
     } finally {
       clearTimeout(timeout);