show posts on profile page

src/routes/[server]/[account]/+page.svelte

@@ -9,26 +9,60 @@
     import { server, createServer } from '$lib/client/server.js';
     import { app } from '$lib/client/app.js';
     import { parseAccount } from '$lib/account.js';
+    import { parsePost } from '$lib/post.js';
     import { account } from '$lib/stores/account';
     import { goto, afterNavigate } from '$app/navigation';
     import { base } from '$app/paths';
+    import Post from '../../../lib/ui/post/Post.svelte';
+    import { writable } from 'svelte/store';
 
     export let data;
 
     const lang = Lang('en_GB');
 
+    let profile_pinned_posts = writable([]);
+    let profile_posts_max_id = null;
+    let profile_posts = writable([]);
     let profile = fetchProfile(data.account_handle);
     let error = false;
     let previous_page = base;
 
+    let post_replies = false;
+    let post_boosts = true;
+    let post_media = false;
+
     afterNavigate(({from}) => {
         previous_page = from?.url.pathname || previous_page;
         profile = fetchProfile(data.account_handle);
     })
 
+    async function getPosts(profile, max_id) {
+        const posts = await api.getUserPosts(
+            $server.host,
+            $app.token,
+            profile.id,
+            max_id,
+            post_replies,
+            post_boosts,
+            post_media
+        );
+        let parsed_posts = [];
+        for (let post of posts) {
+            parsed_posts.push(await parsePost(post, 1));
+        }
+        profile_posts.update(posts => {
+            posts.push(...parsed_posts);
+            return posts;
+        });
+        return parsed_posts.length > 0 ? parsed_posts[parsed_posts.length - 1].id : null;
+    }
+
     async function fetchProfile(handle) {
         let token = $app ? $app.token : null;
 
+        profile_posts.set([]);
+        profile_pinned_posts.set([]);
+
         if (!$server || $server.host !== data.server_host) {
             server.set(await createServer(data.server_host));
             if (!$server) {
@@ -40,7 +74,6 @@
         let profile_data;
         try {
             profile_data = await api.lookupUser($server.host, token, handle);
-            console.debug(profile_data);
         } catch (error) {
             throw error;
         }
@@ -51,6 +84,45 @@
         }
         let profile = await parseAccount(profile_data, 0);
 
+        api.getUserPinnedPosts(
+            $server.host,
+            token,
+            profile.id,
+        ).then(async posts => {
+            for (let post of posts) {
+                const parsedPost = await parsePost(post, 1);
+                profile_pinned_posts.update(posts => {
+                    posts.push(parsedPost);
+                    return posts;
+                });
+            }
+        });
+
+        let post_lock = false; // `true` == "locked"
+        getPosts(profile, null).then(last_id => {
+            profile_posts_max_id = last_id;
+            post_lock = false;
+        });
+
+        document.addEventListener("scroll", () => {
+            if (window.innerHeight + window.scrollY < document.body.offsetHeight - 2048)
+                return;
+            if ($profile_posts.length == 0)
+                return;
+            if (profile_posts_max_id == null)
+                return;
+            if (profile_posts_max_id != $profile_posts[$profile_posts.length - 1].id)
+                return;
+
+            if (post_lock) return;
+            post_lock = true;
+
+            getPosts(profile, profile_posts_max_id).then(last_id => {
+                profile_posts_max_id = last_id;
+                post_lock = false;
+            });
+        });
+
         return profile;
     }
 </script>
@@ -118,6 +190,20 @@
             {lang.string('profile.media')}
         </Button>
     </div>
+
+    <div class="profile-pinned-posts">
+        {#if profile_pinned_posts}
+            {#each $profile_pinned_posts as post}
+                <Post post_data={post} pinned />
+            {/each}
+            <br/><hr/><br/>
+        {/if}
+    </div>
+    <div class="profile-posts">
+        {#each $profile_posts as post}
+            <Post post_data={post} />
+        {/each}
+    </div>
 {:catch error}
     <p class="error">{error}</p>
 {/await}