Add tests for first batch of components

[rbdr/forum] / src / components / forum_list / forum_list.svelte

diff --git a/src/components/forum_list/forum_list.svelte b/src/components/forum_list/forum_list.svelte
index 7bfb7b238148d66e718b71773de189680302cfcf..a33358cbbac92876cd1b65b44583210939e1b7fa 100644 (file)
--- a/src/components/forum_list/forum_list.svelte
+++ b/src/components/forum_list/forum_list.svelte
@@ -1,36 +1,22 @@
 <script>
-       import { _ } from 'svelte-i18n';
-       import { forums } from '$/stores/forums';
-       import Loader from '$/components/loader/loader.svelte';
-       import ErrorBlock from '$/components/error_block/error_block.svelte';
+import { _ } from 'svelte-i18n';
+export let forums;
+
+$: sortedForums = forums.sort((a, b) => a.position - b.position);
 </script>
 
-<nav title={$_('forum_list.title')}>
-       {#if $forums.loading}
-               <Loader />
-       {/if}
-       {#if $forums.error}
-               <ErrorBlock message={$_('forum_list.error.unavailable')} />
-       {/if}
-       <ul>
-               {#each $forums.data as forum}
-                       <li>
-                               <a href="/f/{forum.id}">
-                                       <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
-                                       <span class="navigation-label">{$_(forum.label)}</span>
-                               </a>
-                       </li>
-               {/each}
-       </ul>
-</nav>
+<ul>
+  {#each sortedForums as forum}
+    <li>
+      <a href="/f/{forum.id}">
+        <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+        <span class="navigation-label">{$_(forum.label)}</span>
+      </a>
+    </li>
+  {/each}
+</ul>
 
 <style>
-       nav {
-               grid-column: col-start 1;
-               grid-row: 2;
-               border-right: 1px solid black;
-       }
-
        ul {
                padding: 0;
        }