fix(pagination): switch type and fix reactivity

Author: dvcol

src/components/common/list/ListScroll.vue

@@ -3,9 +3,10 @@ import { NFlex, NTimeline, NVirtualList } from 'naive-ui';
 
 import { computed, ref, toRefs } from 'vue';
 
-import type { TraktClientPagination } from '@dvcol/trakt-http-client/models';
 import type { PropType, Ref, Transition } from 'vue';
 
+import type { StorePagination } from '~/models/pagination.model';
+
 import ListEmpty from '~/components/common/list/ListEmpty.vue';
 import ListItem from '~/components/common/list/ListItem.vue';
 import ListLoadMore from '~/components/common/list/ListLoadMore.vue';
@@ -29,7 +30,7 @@ const props = defineProps({
     required: true,
   },
   pagination: {
-    type: Object as PropType<TraktClientPagination>,
+    type: Object as PropType<StorePagination>,
     required: false,
   },
   pageSize: {

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

@@ -1,11 +1,12 @@
-import { type TraktClientPagination, TraktEpisodeType, type TraktEpisodeTypes } from '@dvcol/trakt-http-client/models';
+import { TraktEpisodeType, type TraktEpisodeTypes } from '@dvcol/trakt-http-client/models';
 
 import { computed, isRef, ref, watch } from 'vue';
 
 import type { Ref } from 'vue';
 
 import type { ListScrollItem, ListScrollItemMeta, ListScrollItemTag, ListScrollSourceItem, OnScroll, OnUpdated } from '~/models/list-scroll.model';
 
+import type { StorePagination } from '~/models/pagination.model';
 import type { ImageQuery } from '~/stores/data/image.store';
 
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
@@ -283,7 +284,7 @@ export const useListScrollEvents = (
     active,
   }: {
     data: Ref<ListScrollItem[]>;
-    pagination: Ref<TraktClientPagination | undefined>;
+    pagination: Ref<StorePagination>;
     loading: Ref<boolean>;
     belowThreshold?: Ref<boolean>;
     active?: Ref<boolean>;
@@ -325,19 +326,32 @@ export const useListScrollEvents = (
   return { onScroll, onUpdated, onLoadMore };
 };
 
-export const addLoadMore = (
-  items: Ref<ListScrollItem[]>,
-  pagination: Ref<TraktClientPagination | undefined>,
-  search: Ref<string>,
-): Ref<ListScrollItem[]> => {
+export const addAllLoaded = (items: Ref<ListScrollItem[]>, pagination: Ref<StorePagination>) => {
+  return computed(() => {
+    const array = items.value;
+    if (!array.length) return array;
+    const { page, pageCount } = pagination.value ?? {};
+    if (page && pageCount && page < pageCount) return array;
+    // If the last item is already an all loaded item we return the array as is
+    if (array[array.length - 1].type === ListScrollItemType.AllLoaded) return array;
+    const type = ListScrollItemType.AllLoaded;
+    const index = items.value.length;
+    const allLoaded: ListScrollItem = { id: type, type, index, key: `${index}-${type}` };
+    return [...array, allLoaded];
+  });
+};
+
+export const addLoadMore = (items: Ref<ListScrollItem[]>, pagination: Ref<StorePagination>, search: Ref<string>): Ref<ListScrollItem[]> => {
   return computed(() => {
     const array = items.value;
     if (!array.length) return array;
-    if (!search.value) return array;
-    if (!pagination.value?.page) return array;
-    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;
+    // If there is no search value we add the all loaded item or return the array as is
+    if (!search.value) return addAllLoaded(items, pagination).value;
+    const { page, pageCount } = pagination.value ?? {};
+    // If we are on the last page or an un-paginated view we add the all loaded item or return the array as is
+    if (!page || !pageCount || page === pageCount) return addAllLoaded(items, pagination).value;
+    // If the last item is already a load more item we return the array as is
+    if (array[array.length - 1].type === ListScrollItemType.LoadMore) return array;
     const type = ListScrollItemType.LoadMore;
     const index = items.value.length;
     const loadMore: ListScrollItem = { id: type, type, index, key: `${index}-${type}` };

src/components/views/settings/SettingsExport.vue

@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-import {
-  TraktApiExtended,
-  type TraktClientPagination,
-} from '@dvcol/trakt-http-client/models';
+import { TraktApiExtended } from '@dvcol/trakt-http-client/models';
 import { NButton, NIcon, NProgress } from 'naive-ui';
 
 import { reactive, ref } from 'vue';
 
+import type { StorePagination } from '~/models/pagination.model';
 import type { CancellableWritePromise } from '~/utils/trakt-service.utils';
 
 import IconDownload from '~/components/icons/IconDownload.vue';
@@ -36,9 +34,7 @@ const cancelled = reactive<Record<string | number, boolean>>({});
 const fetching = reactive<
   Record<string | number, CancellableWritePromise<unknown> | undefined>
 >({});
-const pagination = reactive<
-  Record<string | number, Partial<TraktClientPagination> | undefined>
->({});
+const pagination = reactive<Record<string | number, StorePagination | undefined>>({});
 
 type ExportScope<T extends Promise<unknown> = CancellableWritePromise<unknown>> = {
   label: string;

src/components/views/watchlist/WatchlistComponent.vue

@@ -87,7 +87,7 @@ onMounted(() => {
     <ListScroll
       ref="listRef"
       hide-date
-      :items="list"
+      :items="listItems"
       :loading="listLoading"
       :pagination="pagination"
       :page-size="pageSize"

src/models/pagination.model.ts

@@ -0,0 +1,3 @@
+import type { TraktClientPagination } from '@dvcol/trakt-http-client/models';
+
+export type StorePagination = Partial<TraktClientPagination>;

src/stores/data/history.store.ts

@@ -3,8 +3,9 @@ import { TraktApiExtended } from '@dvcol/trakt-http-client/models';
 import { defineStore, storeToRefs } from 'pinia';
 import { computed, reactive, ref, watch } from 'vue';
 
-import type { TraktClientPagination, TraktHistory, TraktHistoryGetQuery } from '@dvcol/trakt-http-client/models';
+import type { TraktHistory, TraktHistoryGetQuery } from '@dvcol/trakt-http-client/models';
 
+import type { StorePagination } from '~/models/pagination.model';
 import type { ErrorDictionary } from '~/utils/retry.utils';
 
 import { PageSize } from '~/models/page-size.model';
@@ -43,7 +44,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
   const pageSize = ref(PageSize.p100);
   const history = ref<TraktHistory[]>([]);
   const historyDictionary = reactive<HistoryDictionary>({});
-  const pagination = ref<TraktClientPagination>();
+  const pagination = ref<StorePagination>({});
   const extended = ref(false);
   const init = ref(false);
 
@@ -78,7 +79,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
 
   const clearState = () => {
     history.value = [];
-    pagination.value = undefined;
+    pagination.value = {};
     searchHistory.value = '';
     historyStart.value = undefined;
     historyEnd.value = undefined;
@@ -119,7 +120,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
     if (extended.value) query.extended = TraktApiExtended.Full;
     try {
       const response = await TraktService.history(query);
-      pagination.value = response.pagination;
+      pagination.value = response.pagination ?? {};
       history.value = page ? [...history.value.filter(h => h.id >= 0), ...response.data] : response.data;
       delete historyErrors[JSON.stringify(query)];
       evicted.history = false;

src/stores/data/list.store.ts

@@ -3,7 +3,6 @@ import { computed, reactive, ref, watch } from 'vue';
 
 import type {
   TraktApiIds,
-  TraktClientPagination,
   TraktCollection,
   TraktCollectionGetQuery,
   TraktFavoriteGetQuery,
@@ -15,6 +14,8 @@ import type {
   TraktWatchlistGetQuery,
 } from '@dvcol/trakt-http-client/models';
 
+import type { StorePagination } from '~/models/pagination.model';
+
 import IconCheckedList from '~/components/icons/IconCheckedList.vue';
 import IconGrid from '~/components/icons/IconGrid.vue';
 import IconHeart from '~/components/icons/IconHeart.vue';
@@ -236,7 +237,7 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
   const firstLoad = ref(true);
   const loading = ref(true);
   const pageSize = ref(PageSize.p100);
-  const pagination = ref<TraktClientPagination>();
+  const pagination = ref<StorePagination>({});
 
   const typeLoading = reactive<ListTypeLoading>({});
   const typeItemLoading = reactive<ListDictionaryItemLoading>({});
@@ -260,7 +261,7 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
 
   const clearState = () => {
     listItems.value = [];
-    pagination.value = undefined;
+    pagination.value = {};
     searchList.value = '';
 
     clearProxy(typeLoading);
@@ -355,7 +356,7 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
         if ('id' in item) return item;
         return { ...item, id: `${page}-${index}` };
       });
-      pagination.value = response.pagination;
+      pagination.value = response.pagination ?? {};
       listItems.value = page ? [...listItems.value.filter(l => l.type !== ListScrollItemType.Loading), ...newData] : newData;
       evicted.watchlist = false;
     } catch (e) {

src/stores/data/ratings.store.ts

@@ -1,6 +1,5 @@
 import {
   type TraktApiIds,
-  type TraktClientPagination,
   type TraktRating,
   type TraktRatingRequest,
   TraktRatingType,
@@ -10,6 +9,8 @@ import {
 import { defineStore, storeToRefs } from 'pinia';
 import { computed, reactive, ref } from 'vue';
 
+import type { StorePagination } from '~/models/pagination.model';
+
 import { PageSize } from '~/models/page-size.model';
 import { ErrorService } from '~/services/error.service';
 import { Logger } from '~/services/logger.service';
@@ -33,14 +34,15 @@ type TraktRatingsReturn<T extends TraktRatingTypes> = T extends 'movies'
 
 type RatingsLoadingDictionary = Partial<Record<TraktRatingTypes, boolean>>;
 type RatingsDictionary<T extends TraktRatingTypes = TraktRatingTypes> = Partial<Record<T, Record<string, TraktRatingsReturn<T>>>>;
-type RatingsPaginationDictionary = Partial<Record<TraktRatingTypes, TraktClientPagination>>;
+type RatingsPaginationDictionary = Partial<Record<TraktRatingTypes, StorePagination>>;
 
 const isMovieRating = (rating: TraktRating): rating is TraktRating<'movie'> => rating.type === 'movie';
 const isShowRating = (rating: TraktRating): rating is TraktRating<'show'> => rating.type === 'show';
 const isSeasonRating = (rating: TraktRating): rating is TraktRating<'season'> => rating.type === 'season';
 const isEpisodeRating = (rating: TraktRating): rating is TraktRating<'episode'> => rating.type === 'episode';
 
-const pageLoaded = (pagination?: TraktClientPagination) => pagination && pagination.page >= pagination.pageCount;
+const pageLoaded = (pagination?: StorePagination) =>
+  pagination && pagination?.page && pagination?.pageCount && pagination.page >= pagination.pageCount;
 
 const updateRatings = (rating: TraktRating, score: TraktSyncRatingValue) => {
   rating.rating = score;

src/stores/data/search.store.ts

@@ -2,8 +2,9 @@ import { defineStore, storeToRefs } from 'pinia';
 
 import { reactive, ref, watch } from 'vue';
 
-import type { TraktClientPagination, TraktSearch, TraktSearchResult, TraktSearchType } from '@dvcol/trakt-http-client/models';
+import type { TraktSearch, TraktSearchResult, TraktSearchType } from '@dvcol/trakt-http-client/models';
 
+import type { StorePagination } from '~/models/pagination.model';
 import type { ErrorDictionary } from '~/utils/retry.utils';
 
 import { type ListScrollItem, ListScrollItemType } from '~/models/list-scroll.model';
@@ -44,7 +45,7 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
   ErrorService.registerDictionary('search', searchErrors);
 
   const pageSize = ref(PageSize.p100);
-  const pagination = ref<TraktClientPagination>();
+  const pagination = ref<StorePagination>({});
 
   const loading = ref(false);
   const firstLoad = ref(true);
@@ -70,7 +71,7 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
   const clearState = () => {
     types.value = DefaultSearchType;
     query.value = false;
-    pagination.value = undefined;
+    pagination.value = {};
     search.value = '';
     history.value = new Set();
     clearProxy(searchErrors);
@@ -121,7 +122,7 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
       return;
     }
     if (!search.value?.trim()) {
-      pagination.value = undefined;
+      pagination.value = {};
       searchResults.value = [];
       return;
     }
@@ -150,7 +151,7 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
         id: `${page}-${index}`,
       }));
 
-      pagination.value = response.pagination;
+      pagination.value = response.pagination ?? {};
       searchResults.value = page ? [...searchResults.value.filter(s => s.type !== ListScrollItemType.Loading), ...data] : data;
     } catch (e) {
       Logger.error('Failed to fetch search query');

src/utils/store.utils.ts

@@ -1,8 +1,9 @@
 import { computed, onActivated, onDeactivated, onMounted, ref, type Ref, watch } from 'vue';
 
-import type { TraktClientPagination } from '@dvcol/trakt-http-client/models';
 import type { ListScrollSourceItemWithDate } from '~/components/common/list/use-list-scroll';
 
+import type { StorePagination } from '~/models/pagination.model';
+
 import { ListScrollItemType } from '~/models/list-scroll.model';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { debounce } from '~/utils/debounce.utils';
@@ -39,7 +40,7 @@ export const useSearchFilter = <D extends string, T extends ListScrollSourceItem
     });
   });
 
-export const useBelowThreshold = (threshold: Ref<number>, pagination: Ref<TraktClientPagination | undefined>) =>
+export const useBelowThreshold = (threshold: Ref<number>, pagination: Ref<StorePagination>) =>
   computed(
     () =>
       !!(
@@ -50,6 +51,9 @@ export const useBelowThreshold = (threshold: Ref<number>, pagination: Ref<TraktC
       ),
   );
 
+export const useBelowThreshold2 = (threshold: Ref<number>, pagination: StorePagination) =>
+  computed(() => !!(pagination?.page && pagination?.pageCount && pagination.page !== pagination.pageCount && pagination.page < threshold.value));
+
 export const useLoadingPlaceholder = <T>(pageSize: Ref<number> = ref(50)) =>
   computed<T[]>(() =>
     Array(pageSize.value)

src/utils/trakt-service.utils.ts

@@ -5,13 +5,7 @@ import { getJsonWriter } from '@dvcol/common-utils/common/save';
 
 import { isResponseOk } from '@dvcol/trakt-http-client';
 
-import {
-  TraktApiExtended,
-  type TraktApiParamsExtended,
-  type TraktApiParamsPagination,
-  type TraktApiResponse,
-  type TraktClientPagination,
-} from '@dvcol/trakt-http-client/models';
+import { TraktApiExtended, type TraktApiParamsExtended, type TraktApiParamsPagination, type TraktApiResponse } from '@dvcol/trakt-http-client/models';
 
 import { getCookie } from '@dvcol/web-extension-utils/chrome/cookie';
 
@@ -24,26 +18,29 @@ import type { JsonWriterOptions } from '@dvcol/common-utils/common/save';
 
 import type { CancellablePromise } from '@dvcol/common-utils/http/fetch';
 
+import type { StorePagination } from '~/models/pagination.model';
+
 import type { ProgressItem } from '~/models/progress.model';
 
 import { PageSize } from '~/models/page-size.model';
 
 import { ExternaLinks } from '~/settings/external.links';
 
 import { WebConfig } from '~/settings/web.config';
+import { clearAssign } from '~/utils/vue.utils';
 
 type PaginatedQuery = TraktApiParamsExtended & TraktApiParamsPagination;
 export const paginatedWriteJson = async <Q extends PaginatedQuery = PaginatedQuery, T extends RecursiveRecord = RecursiveRecord>(
   fetch: (query: Q) => Promise<TraktApiResponse<T>>,
   query: Q = { extended: TraktApiExtended.Full, pagination: { limit: PageSize.p1000 } } as Q,
   writerOptions?: JsonWriterOptions,
   cancel?: Ref<boolean>,
-  pagination?: Partial<TraktClientPagination>,
+  pagination?: StorePagination,
 ): Promise<FileSystemFileHandle> => {
   let response$ = fetch(query);
   const writer = await getJsonWriter(writerOptions);
   let response = await response$;
-  if (pagination) Object.assign(pagination, response.pagination);
+  if (pagination) clearAssign(pagination, response.pagination);
   let data = await response.json();
 
   /* eslint-disable no-await-in-loop */
@@ -52,7 +49,7 @@ export const paginatedWriteJson = async <Q extends PaginatedQuery = PaginatedQue
     while (!cancel?.value && response.pagination?.page !== undefined && response.pagination.page < response.pagination.pageCount) {
       response$ = fetch({ ...query, pagination: { ...query.pagination, page: response.pagination.page + 1 } });
       response = await response$;
-      if (pagination) Object.assign(pagination, response.pagination);
+      if (pagination) clearAssign(pagination, response.pagination);
       data = await response.json();
       await writer.write(data);
     }
@@ -63,14 +60,14 @@ export const paginatedWriteJson = async <Q extends PaginatedQuery = PaginatedQue
   return writer.handle;
 };
 
-export type CancellableWritePromise<T> = Promise<T> & { cancel: () => Promise<T>; pagination: Partial<TraktClientPagination> };
+export type CancellableWritePromise<T> = Promise<T> & { cancel: () => Promise<T>; pagination: StorePagination };
 export const cancellablePaginatedWriteJson = <Q extends PaginatedQuery = PaginatedQuery, T extends RecursiveRecord = RecursiveRecord>(
   fetch: (query: Q) => Promise<TraktApiResponse<T>>,
   query: Q = { extended: TraktApiExtended.Full, pagination: { limit: PageSize.p1000 } } as Q,
   writerOptions?: JsonWriterOptions & { separator?: string },
 ): CancellableWritePromise<FileSystemFileHandle> => {
   const cancel = ref(false);
-  const pagination = reactive<Partial<TraktClientPagination>>({});
+  const pagination = reactive<StorePagination>({});
   const promise = paginatedWriteJson(fetch, query, writerOptions, cancel, pagination) as CancellableWritePromise<FileSystemFileHandle>;
   promise.cancel = () => {
     cancel.value = true;