src/lib/components/LoadMoreComponent.svelte

@@ -0,0 +1,11 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    function loadOlderPosts() {
+        dispatch('loadOlderPosts');
+    }
+</script>
+
+<button on:click={loadOlderPosts}>Load More</button>

src/lib/server/db.ts

@@ -172,15 +172,19 @@ export function savePost(post: Post): void {
     });
 }
 
-export async function getPosts(since: string | null, limit: number) {
+export async function getPosts(since: string | null, before: string | null, limit: number) {
   let promise = await new Promise<Post[]>((resolve, reject) => {
     let filter_query;
     let params: any = { $limit: limit };
-    if (since === null) {
+    if (since === null && before === null) {
       filter_query = '';
-    } else {
+    } else if (since !== null) {
       filter_query = 'WHERE posts.created_at > $since';
       params.$since = since;
+    } else if (before !== null) {
+      // Setting both, before and since doesn't make sense, so this case is not explicitly handled
+      filter_query = 'WHERE posts.created_at < $before';
+      params.$before = before;
     }
     const sql = `SELECT posts.id, posts.content, posts.created_at, posts.url,
     accounts.id AS account_id, accounts.acct, accounts.username, accounts.display_name,

src/routes/+page.svelte

@@ -4,6 +4,7 @@ import type { PageData } from './$types';
 import type { Post } from '$lib/mastodon/response';
 import { PUBLIC_REFRESH_INTERVAL } from '$env/static/public';
 import PostComponent from '$lib/components/PostComponent.svelte';
+import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
 
 export let data: PageData;
 
@@ -19,8 +20,13 @@ onMount(async () => {
     .then(r => r.json())
     .then((resp: Post[]) => {
       if (resp.length > 0) {
-        data.posts = resp.concat(data.posts);
+        // Prepend new posts, filter dupes
-        console.log('updated data', resp, data.posts);
+        // There shouldn't be any duplicates, but better be safe than sorry
+        const combined = resp.concat(data.posts);
+        const filteredPosts = combined.filter((obj, index, arr) => {
+          return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
+        });
+        data.posts = filteredPosts;
       }
     })
     .catch(e => {
@@ -33,7 +39,33 @@ onMount(async () => {
       clearInterval(interval)
     }
   }
-})
+});
+
+async function loadOlderPosts() {
+  const params = new URLSearchParams();
+  if (data.posts.length > 0) {
+    params.set('before', data.posts[data.posts.length - 1].created_at);
+  }
+  await fetch(`/api/posts?${params}`)
+  .then(r => r.json())
+  .then((resp: Post[]) => {
+    if (resp.length > 0) {
+      // Append old posts, filter dupes
+      // There shouldn't be any duplicates, but better be safe than sorry
+      const combined = data.posts.concat(resp);
+      const filteredPosts = combined.filter((obj, index, arr) => {
+        return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
+      });
+      data.posts = filteredPosts;
+    }
+  })
+  .catch(e => {
+    // TODO: Show error in UI
+    console.error('Error loading older posts', e);
+  });
+
+}
+
 </script>
 <svelte:head>
     <title>Metalhead.club music list</title>
@@ -45,9 +77,10 @@ onMount(async () => {
   {#if data.posts.length === 0}
     Sorry, no posts recommending music aave been found yet
   {/if}
-  {#each data.posts as post (post.id)}
+  {#each data.posts as post (post.url)}
       <div class="post"><PostComponent {post} /></div>
   {/each}
+  <LoadMoreComponent on:loadOlderPosts={loadOlderPosts}/>
   </div>
   <div></div>
   </div>

src/routes/api/posts/+server.ts

@@ -4,12 +4,13 @@ import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 export const GET = (async ({ url }) => {
-    const since = url.searchParams.get('since');
+  const since = url.searchParams.get('since');
-    let count = Number.parseInt(url.searchParams.get('count') || '');
+  const before = url.searchParams.get('before');
-    if (isNaN(count)) {
+  let count = Number.parseInt(url.searchParams.get('count') || '');
-        count = 20;
+  if (isNaN(count)) {
-    }
+    count = 20;
-    count = Math.min(count, 100);
+  }
-    const posts = await getPosts(since, count);
+  count = Math.min(count, 100);
-    return json(posts);
+  const posts = await getPosts(since, before, count);
+  return json(posts);
 }) satisfies RequestHandler;