Use routify and GraphQL server

5 files changed, 52 insertions, 11 deletions

diff --git a/src/components/forum/forum.svelte b/src/components/forum/forum.svelte
new file mode 100644
index 0000000..7008e66
--- /dev/null
+++ b/src/components/forum/forum.svelte
@@ -0,0 +1,27 @@
+<script>
+  export let id;
+
+  import { _ } from 'svelte-i18n';
+  import { getForum } from '$stores/forum';
+  import ErrorBlock from '../error_block/error_block.svelte';
+
+  import TopicSummary from '$components/topic_summary/topic_summary.svelte';
+
+  $: store = getForum(id);
+  $: forum = $store.data;
+</script>
+
+{#if $store.loading}
+  <p>Loading...</p>
+{/if}
+{#if $store.error}
+  <ErrorBlock message={$_('forum_list.error.unavailable')} />
+{/if}
+{#if forum}
+  <h1>{forum.glyph} {$_(forum.label)}</h1>
+  <ul>
+    {#each forum.topics as topic}
+      <TopicSummary topic={topic} />
+    {/each}
+  </ul>
+{/if}
diff --git a/src/components/forum_list/forum_list.svelte b/src/components/forum_list/forum_list.svelte
index 174ae25..46f60f0 100644
--- a/src/components/forum_list/forum_list.svelte
+++ b/src/components/forum_list/forum_list.svelte
@@ -1,15 +1,18 @@
 <script>
   import { _ } from 'svelte-i18n';
-  import { forums } from '../../stores/forums.js';
+  import { forums } from '$stores/forums';
   import ErrorBlock from '../error_block/error_block.svelte';
 </script>
 
 <nav title="{$_('forum_list.title')}">
-  {#if !$forums.length}
+  {#if $forums.loading}
+    <p>Loading...</p>
+  {/if}
+  {#if $forums.error}
     <ErrorBlock message={$_('forum_list.error.unavailable')} />
   {/if}
   <ul>
-    {#each $forums as forum}
+    {#each $forums.data as forum}
       <li>
         <a href="/f/{forum.id}">
           <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
diff --git a/src/components/glyph/glyph.svelte b/src/components/glyph/glyph.svelte
index e4b9166..98d1c6e 100644
--- a/src/components/glyph/glyph.svelte
+++ b/src/components/glyph/glyph.svelte
@@ -21,6 +21,8 @@
     height: 48px;
     margin-top: 5px;
     width: 48px;
+    background-color: white;
+    padding: 2px;
   }
 
   span {
diff --git a/src/components/topic_index/topic_index.svelte b/src/components/topic_index/topic_index.svelte
deleted file mode 100644
index 3de83bb..0000000
--- a/src/components/topic_index/topic_index.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  export let params;
-  import ErrorBlock from '../error_block/error_block.svelte';
-</script>
-
-<ErrorBlock />
-<h1>Topic Index.</h1>
-<p>This component lists topics for category or tag with id: {params.id}</p>
diff --git a/src/components/topic_summary/topic_summary.svelte b/src/components/topic_summary/topic_summary.svelte
new file mode 100644
index 0000000..deef3e2
--- /dev/null
+++ b/src/components/topic_summary/topic_summary.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let topic;
+
+  import { _ } from 'svelte-i18n';
+  import { readableTime } from '../../utils/readable_time.js';
+
+  $: remainingTime = (topic.updated_at + topic.ttl) - Date.now();
+  $: remaining = readableTime(remainingTime);
+</script>
+
+<li class="h-entry" title="{$_('topic.title')}">
+  <span class="p-name"><a class="u-url u-uid" title="{$_('topic.permalink_title')}" href="/t/{topic.id}">{topic.title}</a></span>
+  <span class="topic-ttl">({$_('topic.remaining_time', { values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) } })})</span>
+</li>
+
+<style>
+</style>