+<script context="module">
+ export const load = ({
+ page: {
+ params: { id }
+ }
+ }) => ({ props: { id } });
+</script>
+
<script>
- export async function load(ctx) {
- let id = ctx.page.params.id
- return { props: { id }}
- }
+ import { onDestroy } from 'svelte';
+ import { _ } from 'svelte-i18n';
+ import { getTopic } from '$/stores/topics';
+ import { disableTopicActions, enableTopicActions } from '$/stores/actions';
+
+ import Topic from '$/components/topic/topic.svelte';
+ import ErrorBlock from '$/components/error_block/error_block.svelte';
+ import Loader from '$/components/loader/loader.svelte';
- import Topic from '$components/topic/topic.svelte';
+ export let id;
+
+ $: store = getTopic(id);
+ $: topic = $store.data;
+
+ enableTopicActions(id);
+ onDestroy(() => disableTopicActions());
</script>
-<Topic/>
+<svelte:head>
+ {#if $store.loading}
+ <title>{$_('loader.message')}, {$_('topic.title')}</title>
+ {/if}
+ {#if $store.error}
+ <title>{$_('error.generic.title')}, {$_('topic.title')}</title>
+ {/if}
+ {#if topic}
+ <title>{topic.title}, {$_('topic.title')}</title>
+ {/if}
+</svelte:head>
+
+{#if $store.loading}
+ <Loader />
+{/if}
+{#if $store.error}
+ <ErrorBlock message={$_('topic.error.unavailable')} />
+{/if}
+{#if topic}
+ <Topic {topic} />
+{/if}