fix(list): change key to index since trakt api can return duplicates

Author: dvcol

src/components/common/buttons/use-back-to-top.ts

@@ -1,13 +1,13 @@
 import { ref } from 'vue';
 
-import type { VirtualListRef } from '~/models/list-scroll.model';
+import type { ScrollTo, VirtualListRef } from '~/models/list-scroll.model';
 
 export const useBackToTop = () => {
   const listRef = ref<{ list: VirtualListRef }>();
   const scrolled = ref(false);
 
-  const onClick = () => {
-    listRef.value?.list?.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  const onClick = (scrollTo?: ScrollTo) => {
+    listRef.value?.list?.scrollTo({ top: 0, left: 0, behavior: 'smooth', ...scrollTo });
     scrolled.value = false;
   };
 

src/components/common/list/ListItem.vue

@@ -141,9 +141,11 @@ const onClick = () => emit('onItemClick', { item: item?.value });
     :style="{
       '--list-item-height': itemHeight,
     }"
-    :data-key="item.id"
+    :data-id="item.id"
     :data-index="item.index"
+    :data-key="item.key"
     :data-type="item.type"
+    :aria-label="item.title"
     :line-type="loading ? 'dashed' : lineType"
     :color="loading ? 'grey' : color"
     @click="onClick"

src/components/common/list/ListScroll.vue

@@ -144,7 +144,7 @@ const onLoadMore = (payload: { page: number; pageCount: number; pageSize: number
       }"
       :padding-top="listOptions?.paddingTop ?? 60"
       :padding-bottom="listOptions?.paddingBottom ?? 32"
-      :key-field="'id'"
+      :key-field="'key'"
       @scroll="onScrollHandler"
       @vue:updated="onUpdatedHandler"
     >

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

@@ -143,6 +143,7 @@ export const useListScroll = <T extends ListScrollSourceItemWithDate<D>, D exten
       const _item: ListScrollItem = {
         ...item,
         index,
+        key: `${index}-${item.id}`,
         loading: (typeof item.id === 'number' && item.id < 0) || item.type === ListScrollItemType.loading,
       };
 
@@ -225,7 +226,9 @@ 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: ListScrollItemType.loadMore, type: ListScrollItemType.loadMore, index: items.value.length };
+    const type = ListScrollItemType.loadMore;
+    const index = items.value.length;
+    const loadMore: ListScrollItem = { id: type, type, index, key: `${index}-${type}` };
     return [...array, loadMore];
   });
 };

src/components/views/watchlist/WatchlistComponent.vue

@@ -15,6 +15,7 @@ import {
   type AnyList,
   anyListDateGetter,
   type AnyListDateTypes,
+  useListsStoreRefs,
   useListStore,
   useListStoreRefs,
 } from '~/stores/data/list.store';
@@ -41,6 +42,10 @@ const {
   searchList,
 } = useListStoreRefs();
 const { fetchListItems, clearState } = useListStore();
+const { activeList } = useListsStoreRefs();
+
+const { scrolled, listRef, onClick } = useBackToTop();
+const { onItemClick } = usePanelItem();
 
 watchUserChange({
   fetch: fetchListItems,
@@ -51,6 +56,7 @@ onMounted(() => {
   watch(panel, async value => {
     if (!value) await fetchListItems();
   });
+  watch(activeList, () => onClick());
 });
 
 const list = useListScroll<AnyList, AnyListDateTypes>(
@@ -66,9 +72,6 @@ const { onScroll, onUpdated, onLoadMore } = useListScrollEvents(fetchListItems,
   loading: listLoading,
   belowThreshold,
 });
-
-const { scrolled, listRef, onClick } = useBackToTop();
-const { onItemClick } = usePanelItem();
 </script>
 
 <template>

src/models/list-scroll.model.ts

@@ -13,6 +13,7 @@ import type { TraktShow } from '~/models/trakt/trakt-show.model';
 import type { BaseCacheOption } from '~/services/common/base-client';
 
 export type VirtualListRef = VirtualListInst & InstanceType<typeof NVirtualList>;
+export type ScrollTo = Parameters<VirtualListInst['scrollTo']>[0];
 export type VirtualListProps = {
   itemSize?: number;
   visibleItemsTag?: string | ObjectConstructor;
@@ -83,6 +84,7 @@ export const ListScrollItemType = {
 export type ListScrollItem<T = Record<string, any>> = Omit<PosterItem, 'type'> & {
   id: string | number;
   index: number;
+  key: string;
 
   type?: (typeof ListScrollItemType)[keyof typeof ListScrollItemType];
   title?: string;

src/stores/data/list.store.ts

@@ -214,6 +214,9 @@ export const useListStore = defineStore('data.list', () => {
     pagination.value = undefined;
     searchList.value = '';
 
+    Object.assign(typeLoading, {});
+    Object.assign(typeItemLoading, {});
+
     Object.assign(listDictionary, {});
     Object.assign(listDictionaryLoading, {});
   };
@@ -257,7 +260,7 @@ export const useListStore = defineStore('data.list', () => {
     }
     if (firstLoad.value) firstLoad.value = false;
 
-    console.info('Fetching List', list);
+    console.info('Fetching List', { list, page, limit });
 
     loading.value = true;
     typeLoading[list.type] = true;
@@ -287,7 +290,7 @@ export const useListStore = defineStore('data.list', () => {
       } else {
         throw new Error('Invalid list type');
       }
-      const newData = response.data.map((item, index) => {
+      const newData = response.data.map<AnyList>((item, index) => {
         updateDictionary(list, item as MinimalItem);
         if ('id' in item) return item;
         return { ...item, id: `${page}-${index}` };

src/stores/data/progress.store.ts

@@ -37,9 +37,12 @@ export const progressToListItem = (progress: ProgressItem, index: number): Progr
 
   const poster = progress.fanart ?? progress.screenshot;
 
+  const id = Number(progress.episodeId ?? progress.seasonId ?? progress.showId);
+
   return {
-    id: Number(progress.episodeId ?? progress.seasonId ?? progress.showId),
+    id,
     index,
+    key: `${index}-${id}`,
     title: getTitle({ show, episode }),
     content: getContent({ show, episode }),
     poster,