Add: Post Pagination

src/comp/page/posts/postlist.svelte

@@ -1,9 +1,26 @@
 <script>
-  import { goto } from '$app/navigation';
+  import { goto, replaceState } from '$app/navigation';
+  import { page } from '$app/stores';
   import { getNamedId } from '$lib/util';
+  import { onMount } from 'svelte';
   import Post from '../post/post.svelte';
   import PostCard from './postcard.svelte';
 
+  /**
+   * @type {number}
+   */
+  export let itemsCount;
+
+  /**
+   * @type {number}
+   */
+  export let pageIndex;
+
+  /**
+   * @type {number}
+   */
+  export let totalResultCount;
+
   /**
    * @type {import("$types/base").Post[]}
    */
@@ -14,6 +31,19 @@
    */
   export let glancePost = null;
 
+  function getDefaultedUrl(/** @type {URL} */ url) {
+    const u = new URL(url);
+    u.searchParams.set('items', String(itemsCount));
+    u.searchParams.set('page', String(pageIndex));
+    return u;
+  }
+
+  const newUrl = getDefaultedUrl($page.url)
+
+  onMount(() => {
+    replaceState(newUrl, {});
+  });
+
   /** @type {boolean[]} */
   $: hidden = Array(posts.length).fill(false);
 
@@ -25,7 +55,8 @@
       hidden[index] = p == post;
     });
 
-    goto(`/posts?glance=${post.id}`, {
+    newUrl.searchParams.set('glance', String(post.id));
+    goto(newUrl, {
       replaceState: true,
       noScroll: true
     });
@@ -36,7 +67,8 @@
 
     hidden = Array(posts.length).fill(false);
 
-    goto(`/posts`, {
+    newUrl.searchParams.delete('glance');
+    goto(newUrl, {
       replaceState: true,
       noScroll: true
     });

src/routes/(app)/posts/+page.server.js

@@ -1,17 +1,30 @@
-import { getPost, getPosts } from '$lib/server/db/post';
+import { getPost, getPostCount, getPosts } from '$lib/server/db/post';
+import { parseIntNull } from '$lib/util';
 
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ url }) {
-  const result = await getPosts();
+  const count = await getPostCount();
 
-  const glance = url.searchParams.get('glance');
-  const glanceID = glance ? parseInt(glance) : null
+  const page = parseIntNull(url.searchParams.get('page')) ?? 0;
+  const items = parseIntNull(url.searchParams.get('items')) ?? 10;
 
-  const glancePost = glanceID ? await getPost(glanceID, { withMetrics: true }) : null;
+  const pageSize = Math.min(Math.max(items, 1), 30);
+
+  const result = await getPosts({
+    limit: pageSize,
+    offset: pageSize * page,
+  });
+
+  const glance = parseIntNull(url.searchParams.get('glance'));
+
+  const glancePost = glance ? await getPost(glance, { withMetrics: true }) : null;
 
   return {
     posts: result,
-    glancePost: glancePost
+    glancePost: glancePost,
+    itemsCount: pageSize,
+    pageIndex: page,
+    totalResultCount: count,
   };
 }

src/routes/(app)/posts/+page.svelte

@@ -1,11 +1,15 @@
 <script>
+    import { page } from "$app/stores";
   import Card from "$comp/card.svelte";
   import Postlist from "$comp/page/posts/postlist.svelte";
 
   /**
    * @type {{
    *  posts: import("$types/base").Post[],
-   *  glancePost: import("$types/base").Post | null
+   *  glancePost: import("$types/base").Post | null,
+   *  itemsCount: number,
+   *  pageIndex: number,
+   *  totalResultCount: number,
    * }}
    */
   export let data;
@@ -29,5 +33,5 @@
     <img class="icon" src="waving-hand-sign.png" alt="wave">
     <span>Welcome to ECHO</span>
   </Card>
-  <Postlist posts={data.posts} glancePost={data.glancePost}></Postlist>
+  <Postlist posts={data.posts} glancePost={data.glancePost} itemsCount={data.itemsCount} pageIndex={data.pageIndex} totalResultCount={data.totalResultCount}></Postlist>
 </main>