<script>
- export let id;
+ export let topic;
- import { _ } from 'svelte-i18n';
- import { getTopic } from '$/stores/topic';
+ import { _ } from 'svelte-i18n';
+ import Post from '$/components/post/post.svelte';
+ import { readableTime } from '$/utils/readable_time.js';
- import ErrorBlock from '$/components/error_block/error_block.svelte';
- import Loader from '$/components/loader/loader.svelte';
- import PostContent from '$/components/post_content/post_content.svelte';
- import { readableTime } from '$/utils/readable_time.js';
-
- $: store = getTopic(id);
- $: topic = $store.data;
- $: remainingTime = topic ? (topic.updated_at + topic.ttl) - Date.now() : 0;
- $: remaining = readableTime(remainingTime);
+ $: remainingTime = topic.updated_at + topic.ttl - Date.now();
+ $: remaining = readableTime(remainingTime);
</script>
-{#if $store.loading}
- <Loader />
-{/if}
-{#if $store.error}
- <ErrorBlock message={$_('topic.error.unavailable')} />
-{/if}
-{#if topic}
- <div class="h-entry" title="{$_('topic.title')}">
- <h1 class="p-name">{topic.title}</h1>
- <aside class="topic-meta" title="{$_('topic.metadata_title')}">
- {#if topic.forum}
- <span class="topic-location">{$_('topic.category_location')} <a href="/f/{topic.forum.id}"
- class="p-category">{topic.forum.glyph} {$_(topic.forum.label)}</a>.</span>
- {/if}
- <span class="topic-ttl"><a class="u-url u-uid" title="{$_('topic.permalink_title')}" href="/t/{topic.id}">({$_('topic.remaining_time', { values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) } })})</a>.</span>
- </aside>
- {#if topic.tags.length > 0}
- <aside class="topic-tags" title="{$_('topic.tags_title')}">
- {$_('topic.tags_location')}
- {#each topic.tags as tag}
- <a href="/g/{tag.id}" class="p-category">{tag.id}<span class="tag-weight">({tag.weight})</span></a>{' '}
- {/each}
- </aside>
- {/if}
- {#each topic.posts as post, index}
- <PostContent post={post} index={index} count={topic.posts.length} />
- {/each}
- </div>
-{/if}
+<div class="h-entry" title={$_('topic.title')}>
+ <h1 class="p-name">{topic.title}</h1>
+ <aside class="topic-meta" title={$_('topic.metadata_title')}>
+ {#if topic.forum}
+ <span class="topic-location">
+ {$_('topic.category_location')}
+ <a href="/f/{topic.forum.id}" class="p-category">
+ {topic.forum.glyph} {$_(topic.forum.label)}
+ </a>.
+ </span>
+ {/if}
+ <span class="topic-ttl">
+ <a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
+ ({$_('topic.remaining_time', {
+ values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
+ })})
+ </a>.
+ </span>
+ </aside>
+ {#if topic.tags.length > 0}
+ <aside class="topic-tags" title={$_('topic.tags_title')}>
+ {$_('topic.tags_location')}
+ {#each topic.tags as tag}
+ <a href="/g/{tag.id}" class="p-category">
+ {tag.id}<span class="tag-weight">({tag.weight})</span>
+ </a>{' '}
+ {/each}
+ </aside>
+ {/if}
+ {#each topic.posts as post, index}
+ <Post {post} {index} count={topic.posts.length} />
+ {/each}
+</div>