fix: ranking page

src/components/organisms/rankings/RankingListItem.svelte

@@ -18,7 +18,7 @@
       <span class="pp-label">PP</span>
     </div>
     <div class="divider" />
-    <a href={item.bestPlay.url} target="_blank" rel="noreferrer" class="best-play-container">
+    <a href={item.bestPlay?.url} target="_blank" rel="noreferrer" class="best-play-container">
       <Icon icon="playOutlined" size={16} alt="Video Icon" />
       <div>
         <Translation key="ranking:highest-play" />

src/components/organisms/rankings/RankingTopItem.svelte

@@ -22,7 +22,12 @@
         </div>
       </div>
       <div class="details-best-play-container">
-        <a href={item.bestPlay.url} target="_blank" rel="noreferrer" class="details-best-play-link">
+        <a
+          href={item.bestPlay?.url}
+          target="_blank"
+          rel="noreferrer"
+          class="details-best-play-link"
+        >
           <Icon icon="playOutlined" size={16} alt="Video Icon" />
           <div>
             <Translation key="ranking:highest-play" />

src/components/utils/VirtualList.svelte

@@ -5,14 +5,15 @@
   import { createWindowVirtualizer } from '@tanstack/svelte-virtual';
   import LoadingSpinner from '../atoms/common/LoadingSpinner.svelte';
 
+  export let offset = 0;
   export let estimateSize = 100;
 
   // eslint-disable-next-line no-undef
   type T = $$Generic;
 
   export let query: CreateInfiniteQueryResult<InfiniteData<T[]>, Error>;
 
-  $: allItems = $query.data?.pages.flatMap((x) => x) || [];
+  $: allItems = ($query.data?.pages.flatMap((x) => x) || []).slice(offset);
 
   let listEl: HTMLDivElement;
 
@@ -60,7 +61,7 @@
               </div>
             {/if}
           {:else}
-            <slot name="item" item={allItems[row.index]} />
+            <slot name="item" item={allItems[row.index]} {row} />
           {/if}
         </VirtualListItem>
       {/each}

src/routes/rankings/+page.svelte

@@ -8,78 +8,53 @@
   import RankingListItem from '@organisms/rankings/RankingListItem.svelte';
   import RankingTopItem from '@organisms/rankings/RankingTopItem.svelte';
   import type { ListResponse } from '@/types';
-  import { onMount } from 'svelte';
-  import { writable } from 'svelte/store';
   import type { RankingResult } from './+page';
-  import { VirtualizedInfiniteScrollList } from '@adofai-gg/svelte-virtualized-infinite-scroll';
+  import VirtualList from '@/components/utils/VirtualList.svelte';
+  import { createInfiniteQuery } from '@tanstack/svelte-query';
 
-  let items = writable<RankingResult[]>([]);
+  const pageSize = 30;
 
-  let total = 0;
-
-  let offsets = writable<number[]>([]);
-
-  $: loadMore = async (offset = 0) => {
-    offsets.update((x) => [...x, offset]);
+  let query = createInfiniteQuery({
+    queryKey: ['rankings'],
+    queryFn: ({ pageParam }) => fetchPage(pageParam),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, pages) => {
+      return lastPage.length === pageSize ? pages.length + 1 : null;
+    }
+  });
 
+  const fetchPage = async (page: number) => {
     const { data } = await api.get<ListResponse<RankingResult>>('/api/v1/ranking', {
-      params: { offset, amount: 30 }
+      params: { offset: page * pageSize, amount: pageSize }
     });
 
-    const results = data.results.map((x, i) => ({ ...x, rank: offset + i + 1 }));
-
-    if (offset === 0) items.set(results);
-    else items.update((x) => [...x, ...results]);
-    total = data.count;
+    return data.results;
   };
 
-  onMount(async () => {
-    total = (
-      await api.get<ListResponse<RankingResult>>('/api/v1/ranking', {
-        params: { amount: 1, offset: 0 }
-      })
-    ).data.count;
-
-    const contentWrapper = document.querySelector('.simplebar-content-wrapper');
-
-    setTimeout(() => {
-      contentWrapper?.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      });
-    }, 100);
-  });
-
-  $: onMore = (e: CustomEvent<{ offset: number }>) => {
-    loadMore(e.detail.offset ? e.detail.offset + 3 : 0);
-  };
-
-  $: topItems = $items.slice(0, 3);
-
-  $: listItems = $items.slice(3);
+  $: topItems =
+    $query.data?.pages[0].slice(0, 3).map((x, i) => ({
+      ...x,
+      rank: i + 1
+    })) || [];
 </script>
 
 <PageContainer>
   <div class="top-spacer">
     <MainSectionTitle titleKey="ranking:title" />
   </div>
-  {#if browser}
+  {#if $query.isLoading}
+    <div class="loader">
+      <LoadingSpinner />
+    </div>
+  {:else if browser}
     <div class="top-rankings">
       {#each topItems as item}
         <RankingTopItem {item} />
       {/each}
     </div>
-    <VirtualizedInfiniteScrollList
-      data={listItems}
-      on:more={onMore}
-      let:item
-      total={Math.max(0, total - 3)}
-    >
-      <RankingListItem {item} />
-      <div slot="loading" class="loader">
-        <LoadingSpinner size={48} />
-      </div>
-    </VirtualizedInfiniteScrollList>
+    <VirtualList {query} offset={3}>
+      <RankingListItem slot="item" let:item let:row item={{ ...item, rank: row.index + 3 + 1 }} />
+    </VirtualList>
   {/if}
 </PageContainer>
 

src/types.ts

@@ -19,7 +19,7 @@ export interface Ranking {
   id: number;
   name: string;
   totalPp: number;
-  bestPlay: PlayLog;
+  bestPlay: PlayLog | null;
 }
 
 export interface PartialMember {