From 8050f772caeedafffab6e3ec2f309205a019f3d0 Mon Sep 17 00:00:00 2001
From: Ben Beltran <ben@nsovocal.com>
Date: Sat, 20 Jun 2020 14:58:26 +0200
Subject: Add internationalized error block

---
 app/components/error_block/error_block.svelte | 31 +++++++++++++++++++++++++++
 app/components/forum_list/forum_list.svelte   |  5 +++++
 app/components/topic_index/topic_index.svelte |  2 ++
 app/config/i18n.js                            | 10 +++++++++
 app/config/translations/en.json               | 13 +++++++++++
 app/forum.svelte                              |  6 ++++++
 app/stores/forums.js                          |  5 -----
 7 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 app/components/error_block/error_block.svelte
 create mode 100644 app/config/i18n.js
 create mode 100644 app/config/translations/en.json

diff --git a/app/components/error_block/error_block.svelte b/app/components/error_block/error_block.svelte
new file mode 100644
index 0000000..d649fb4
--- /dev/null
+++ b/app/components/error_block/error_block.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  export let message = $_('error.generic.message');
+</script>
+
+<div>
+  <h2>{$_('error.generic.title')}</h2>
+  <p>{message}</p>
+</div>
+
+<style>
+  div {
+    background: repeating-linear-gradient( -45deg, red, red 5px, black 5px, black 10px );
+    border: 5px solid red;
+    color: yellow;
+    font-family: 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
+    margin: 0 10px 0 0;
+    padding: 100px 5px;
+    text-align: center;
+  }
+
+  h2, p {
+    background-color: black;
+    font-size: 1em;
+  }
+
+  h2 {
+    text-transform: uppercase;
+  }
+</style>
+
diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte
index f77c79a..c218bac 100644
--- a/app/components/forum_list/forum_list.svelte
+++ b/app/components/forum_list/forum_list.svelte
@@ -1,8 +1,13 @@
 <script>
+  import { _ } from 'svelte-i18n';
   import { forums } from '../../stores/forums.js';
+  import ErrorBlock from '../error_block/error_block.svelte';
 </script>
 
 <nav title="List of Forums">
+  {#if !$forums.length}
+    <ErrorBlock message={$_('forum_list.error.unavailable')} />
+  {/if}
   <ul>
     {#each $forums as forum}
       <li>
diff --git a/app/components/topic_index/topic_index.svelte b/app/components/topic_index/topic_index.svelte
index ea748a6..3de83bb 100644
--- a/app/components/topic_index/topic_index.svelte
+++ b/app/components/topic_index/topic_index.svelte
@@ -1,6 +1,8 @@
 <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/app/config/i18n.js b/app/config/i18n.js
new file mode 100644
index 0000000..e00adb5
--- /dev/null
+++ b/app/config/i18n.js
@@ -0,0 +1,10 @@
+import { addMessages, getLocaleFromNavigator, init } from 'svelte-i18n';
+
+import en from './translations/en.json';
+
+addMessages('en', en);
+
+init({
+  fallbackLocale: 'en',
+  initialLocale: getLocaleFromNavigator()
+});
diff --git a/app/config/translations/en.json b/app/config/translations/en.json
new file mode 100644
index 0000000..935f4fe
--- /dev/null
+++ b/app/config/translations/en.json
@@ -0,0 +1,13 @@
+{
+  "error": {
+    "generic": {
+      "title": "Error!",
+      "message": "Unknown error has occurred. Panic!"
+    }
+  },
+  "forum_list": {
+    "error": {
+      "unavailable": "Forum list unavailable."
+    }
+  }
+}
diff --git a/app/forum.svelte b/app/forum.svelte
index 85c6d12..d83438d 100644
--- a/app/forum.svelte
+++ b/app/forum.svelte
@@ -1,6 +1,12 @@
 <script>
   import LightRouter from 'lightrouter';
 
+  // Initialize localization
+
+  import './config/i18n';
+
+  // Global components
+
   import ForumList from './components/forum_list/forum_list.svelte';
   import Header from './components/header/header.svelte';
 
diff --git a/app/stores/forums.js b/app/stores/forums.js
index 5c7c6e6..e826163 100644
--- a/app/stores/forums.js
+++ b/app/stores/forums.js
@@ -15,11 +15,8 @@ const internals = {
 
   handleChangeFeed(data) {
 
-    console.log(data);
-
     // No old value == add
     if (!data.old_val) {
-      console.log('Adding new data');
       return internals.forums.push(data.new_val);
     }
 
@@ -27,8 +24,6 @@ const internals = {
     const index = internals.forums.findIndex((element) => element.id === data.old_val.id);
 
     if (index > -1) {
-      console.log(`Found old data at index ${index}`);
-
       if (data.new_val) {
         return internals.forums.splice(index, 1, data.new_val || undefined);
       }
-- 
cgit