Add post content component

diff --git a/src/components/post/post.svelte b/src/components/post/post.svelte
index 47205339b2c830664e26df6669b19e62b5f74681..bf2a190a554695d289b6d3ebdac5856cf998dde1 100644 (file)
--- a/src/components/post/post.svelte
+++ b/src/components/post/post.svelte
@@ -1,27 +1,23 @@
 <script>
+  export let id;
+
   import { _ } from 'svelte-i18n';
 
-  import Glyph from '../glyph/glyph.svelte';
-</script>
+  import { getPost } from '$/stores/post';
+  import PostContent from '$/components/post_content/post_content.svelte';
+  import ErrorBlock from '$/components/error_block/error_block.svelte';
+  import Loader from '$/components/loader/loader.svelte';
 
-<aside class="post-meta" title="{$_('post.metadata_title', { values: { count: 2, total: 2 } })}">
-  <Glyph uuid="b33f0339f7d64d1ca27f1c0aefb7d753" />
-  <span class="h-card">
-    {$_('post.author_credit')} <a href="/a/time4carrots" class="p-nickname u-url">time4carrots</a>.
-  </span>
-  <time role="presentation" class="dt-published" datetime="2018-08-15T04:10:00.929Z">
-    <a href="/p/da9910f3febde91948000ce1535ea">
-      2018-08-15 04:10:00
-    </a>
-  </time>
-</aside>
-<article class="e-content" title="{$_('post.title', { values: { count: 1, total: 2, author: 'time4carrots' } })}">
-  <p>It's just how it is...</p>
-</article>
-<hr/>
+  $: store = getPost(id);
+  $: post = $store.data;
+</script>
 
-<style>
-  .post-meta * {
-    vertical-align: top;
-  }
-</style>
+{#if $store.loading}
+  <Loader />
+{/if}
+{#if $store.error}
+  <ErrorBlock message={$_('post.error.unavailable')} />
+{/if}
+{#if post}
+  <PostContent post={post} />
+{/if}

diff --git a/src/components/post_content/post_content.svelte b/src/components/post_content/post_content.svelte
new file mode 100644 (file)
index 0000000..671c07c
--- /dev/null
+++ b/src/components/post_content/post_content.svelte
@@ -0,0 +1,40 @@
+<script>
+  export let post;
+  export let index = 0;
+  export let count = 1;
+
+  import { _ } from 'svelte-i18n';
+  import Glyph from '$/components/glyph/glyph.svelte';
+
+  const timestampToISO = (timestamp) => (new Date(timestamp)).toISOString();
+</script>
+  <aside class="post-meta" title="{$_('post.metadata_title', { values: { count: index + 1, total: count } })}">
+    <Glyph uuid={post.author.id} />
+    <span class="h-card">
+      {$_('post.author_credit')} <a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
+    </span>
+    <time role="presentation" class="dt-published" datetime="{timestampToISO(post.created_at)}">
+      <a title="{$_('post.permalink_title')}" href="/p/{post.id}">
+        {timestampToISO(post.created_at)}
+      </a>
+    </time>
+    {#if post.topic}
+    <span class="h-card">
+      ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
+    </span>
+    {/if}
+  </aside>
+  <article class="e-content" title="{$_('post.title', { values: { count: index + 1, total: count, author: post.author.handle } })}">
+    {post.text}
+  </article>
+  <hr/>
+
+<style>
+  .post-meta * {
+    vertical-align: top;
+  }
+
+  article {
+    white-space: pre;
+  }
+</style>