Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 import { api } from '../../api.js';
3 import { Post, parseThreadPost } from '../../models/posts.js';
4 import { linkToPostThread } from '../../router.js';
5 import { getPostContext } from './PostComponent.svelte';
6
7 type Props = {
8 onLoad: (root: Post) => void,
9 onError: (error: Error) => void
10 }
11
12 let { onLoad, onError }: Props = $props();
13 let { post } = getPostContext();
14 let loading = $state(false);
15
16 async function onLinkClick(e: Event) {
17 e.preventDefault();
18 loading = true;
19
20 try {
21 let json = await api.loadThreadByAtURI(post.uri);
22 let root = parseThreadPost(json.thread, post.pageRoot, 0, post.absoluteLevel);
23
24 loading = false;
25
26 if (root instanceof Post) {
27 window.subtreeRoot = root;
28 onLoad(root);
29 } else {
30 onError(new Error('Post is not available'));
31 }
32 } catch (error) {
33 loading = false;
34 onError(error);
35 }
36 }
37</script>
38
39<p>
40 {#if !loading}
41 <a href={linkToPostThread(post)} onclick={onLinkClick}>Load more replies…</a>
42 {:else}
43 <img class="loader" src="icons/sunny.png" alt="Loading...">
44 {/if}
45</p>