forked from blisstown/campfire
143 lines
3.9 KiB
Svelte
143 lines
3.9 KiB
Svelte
<script>
|
|
import * as api from '$lib/api.js';
|
|
import { server, createServer } from '$lib/client/server.js';
|
|
import { app } from '$lib/client/app.js';
|
|
import { parsePost } from '$lib/post.js';
|
|
import { goto, afterNavigate } from '$app/navigation';
|
|
import { base as previous_page } from '$app/paths'
|
|
|
|
import Post from '$lib/ui/post/Post.svelte';
|
|
import Button from '$lib/ui/Button.svelte';
|
|
|
|
export let data;
|
|
|
|
let post;
|
|
let error = false;
|
|
|
|
if (($server && $server.host === data.server_host) && $app) {
|
|
post = fetchPost(data.post_id, $app.token);
|
|
} else {
|
|
post = createServer(data.server_host).then(new_server => {
|
|
server.set(new_server);
|
|
if (!$server) {
|
|
error = `Failed to connect to <code>${data.server_host}</code>.`;
|
|
console.error(`Failed to connect to ${data.server_host}.`);
|
|
return;
|
|
}
|
|
return post = fetchPost(data.post_id, null);
|
|
});
|
|
}
|
|
|
|
afterNavigate(({from}) => {
|
|
previous_page = from?.url.pathname || previous_page
|
|
})
|
|
|
|
async function fetchPost(post_id, token) {
|
|
const post_data = await api.getPost($server.host, token, post_id);
|
|
if (!post_data || post_data.error) {
|
|
error = `Failed to retrieve post <code>${post_id}</code>.`;
|
|
console.error(`Failed to retrieve post ${post_id}.`);
|
|
return;
|
|
}
|
|
let post = await parsePost(post_data, 0);
|
|
|
|
const post_context = await api.getPostContext($server.host, token, post_id);
|
|
|
|
if (!post_context || !post_context.ancestors || !post_context.descendants)
|
|
return post;
|
|
|
|
// handle ancestors (above post)
|
|
let thread_top = post;
|
|
while (post_context.ancestors.length > 0) {
|
|
thread_top.reply = await parsePost(post_context.ancestors.pop(), 0);
|
|
thread_top = thread_top.reply;
|
|
}
|
|
|
|
// handle descendants (below post)
|
|
post.replies = [];
|
|
for (let i in post_context.descendants) {
|
|
post.replies.push(parsePost(post_context.descendants[i], 0));
|
|
}
|
|
|
|
return post;
|
|
}
|
|
</script>
|
|
|
|
{#await post}
|
|
<div class="loading throb">
|
|
<span>loading post...</span>
|
|
</div>
|
|
{:then post}
|
|
{#if error}
|
|
<p>{@html error}</p>
|
|
{:else}
|
|
<header>
|
|
{#if previous_page}
|
|
<nav>
|
|
<Button centered on:click={() => {goto(previous_page)}}>Back</Button>
|
|
</nav>
|
|
{/if}
|
|
<img src={post.account.avatar_url} type={post.account.avatar_type || "image/png"} alt="" width="40" height="40" class="header-avatar" loading="lazy" decoding="async">
|
|
<h1>
|
|
Post by {@html post.account.rich_name}
|
|
</h1>
|
|
</header>
|
|
|
|
<div id="feed" role="feed">
|
|
<Post post_data={post} focused />
|
|
<br>
|
|
{#each post.replies as reply}
|
|
{#await reply then reply}
|
|
<Post post_data={reply} />
|
|
{/await}
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{/await}
|
|
|
|
<style>
|
|
header {
|
|
width: 100%;
|
|
height: 64px;
|
|
margin: 16px 0 8px 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
header .header-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: auto 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
header h1 {
|
|
margin: auto auto auto 8px;
|
|
font-size: 1.5em;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
header nav {
|
|
margin-right: 8px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
#feed {
|
|
margin-bottom: 20vh;
|
|
}
|
|
|
|
.loading {
|
|
width: 100%;
|
|
height: 80vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|