Querying only what's needed

Author: Wolfyxon

src/lib/layout/StatsView.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-    import type { SongAPI } from "$lib/api/api";
+    import { SongAPI } from "$lib/api/api";
     import ArtistList from "$lib/comp/ArtistList.svelte";
     import PageContainer from "$lib/comp/PageContainer.svelte";
     import SongList from "$lib/comp/SongList.svelte";
     import LinkButton from "$lib/LinkButton.svelte";
-    import type { Stats } from "$lib/stats";
+    import type { Stats, StatsViewConfig } from "$lib/stats";
 
+    export let config: StatsViewConfig;
     export let stats: Stats;
     export let api: SongAPI;
 
@@ -63,12 +64,12 @@
 
         {#snippet pageFavSongsAllTime()}
             <h1>Your favorite songs of all time</h1>
-            <SongList songs={stats.data.songs.slice(0, 4)} api={api} />
+            <SongList songs={stats.data.songs.slice(0, config.songRankCount)} api={api} />
         {/snippet}
 
         {#snippet pageFavArtistsAllTime()}
             <h1>Your favorite artists of all time</h1>
-            <ArtistList artists={stats.getArtists(true).slice(0, 3)} />
+            <ArtistList artists={stats.getArtists(true).slice(0, config.artistRankCount)} />
         {/snippet}
 
         {#snippet pageEnd()}

src/lib/stats.ts

@@ -1,4 +1,9 @@
 
+export type StatsViewConfig = {
+    songRankCount: number,
+    artistRankCount: number    
+}
+
 export type StatsData = {
     formatVersion: number,
     songs: SongData[]

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { Stats, StatsData } from "$lib/stats";
+    import type { Stats, StatsData, StatsViewConfig } from "$lib/stats";
     
     import Home from "$lib/layout/Home.svelte";
     import Page from "$lib/comp/Page.svelte";
@@ -11,14 +11,19 @@
     let currentStats: Stats | null = null;
     let statsProcessed = false;
 
+    const config: StatsViewConfig = {
+        songRankCount: 4,
+        artistRankCount: 3
+    };
+
     async function setStats(stats: Stats | null) {
         currentStats = stats;
         statsProcessed = false;
 
         if(stats) {
             // Load API data to cache
 
-            for(const song of stats.data.songs) {
+            for(const song of stats.data.songs.slice(config.songRankCount)) {
                 const artist = await api.queryArtistByName(song.artist);
                 await api.querySongByName(song.title, artist?.id);
             }
@@ -33,6 +38,7 @@
         <StatsView 
             stats={currentStats}
             api={api}
+            config={config}
             onClose={() => setStats(null)} 
         />
     {:else if currentStats && !statsProcessed}