Starting to work on internationalization

4 files changed, 69 insertions, 55 deletions

diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index c513fc5c..73d6deac 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -7,8 +7,6 @@ import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
 import { SiteForm } from './site-form';
 import { msgOp, repoUrl, mdToHtml, fetchLimit, routeSortTypeToEnum, routeListingTypeToEnum } from '../utils';
-import { useTranslation } from 'react-i18next';
-const { t } = useTranslation();
 
 interface MainState {
   subscribedCommunities: Array<CommunityUser>;
@@ -122,26 +120,34 @@ export class Main extends Component<any, MainState> {
             {this.posts()}
           </div>
           <div class="col-12 col-md-4">
-            {!this.state.loading &&
+            {this.my_sidebar()}
+          </div>
+        </div>
+      </div>
+    )
+  }
+    
+  my_sidebar() {
+    return(
+      <div>
+        {!this.state.loading &&
+          <div>
+            {this.trendingCommunities()}
+            {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && 
               <div>
-                {this.trendingCommunities()}
-                {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && 
-                  <div>
-                    <h5>Subscribed <Link class="text-white" to="/communities">communities</Link></h5> 
-                    <ul class="list-inline"> 
-                      {this.state.subscribedCommunities.map(community =>
-                        <li class="list-inline-item"><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
-                      )}
-                    </ul>
-                  </div>
-                }
-                <Link class="btn btn-sm btn-secondary btn-block mb-3" 
-                  to="/create_community">Create a Community</Link>
-                {this.sidebar()}
+                <h5><T i18nKey="subscribed_to_communities">#<Link class="text-white" to="/communities">#</Link></T></h5> 
+                <ul class="list-inline"> 
+                  {this.state.subscribedCommunities.map(community =>
+                    <li class="list-inline-item"><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
+                  )}
+                </ul>
               </div>
             }
-          </div>
-        </div>
+            <Link class="btn btn-sm btn-secondary btn-block mb-3" 
+              to="/create_community"><T i18nKey="create_a_community"> </T></Link>
+              {this.sidebar()}
+            </div>
+        }
       </div>
     )
   }
@@ -149,7 +155,7 @@ export class Main extends Component<any, MainState> {
   trendingCommunities() {
     return (
       <div>
-        <h5>{t('Trending')} <Link class="text-white" to="/communities">communities</Link></h5> 
+        {/* <h5>{t('Trending')} <Link class="text-white" to="/communities">communities</Link></h5> */} 
         <ul class="list-inline"> 
           {this.state.trendingCommunities.map(community =>
             <li class="list-inline-item"><Link to={`/c/${community.name}`}>{community.name}</Link></li>
diff --git a/ui/src/i18n.ts b/ui/src/i18n.ts
deleted file mode 100644
index 46604e91..00000000
--- a/ui/src/i18n.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import i18n from "i18next";
-import { initReactI18next } from "inferno-i18next";
-
-// the translations
-// (tip move them in a JSON file and import them)
-const resources = {
-  en: {
-    translation: {
-      trending: "Trending",
-    }
-  },
-  es: {
-    translation: {
-      trending: "Trending, but in spanish",
-    }
-  }
-};
-
-i18n
-  .use(initReactI18next) // passes i18n down to react-i18next
-  .init({
-    resources,
-    lng: "en",
-
-    keySeparator: false, // we do not use keys in form messages.welcome
-
-    interpolation: {
-      escapeValue: false // react already safes from xss
-    }
-  });
-
-export default i18n;
diff --git a/ui/src/i18next.ts b/ui/src/i18next.ts
new file mode 100644
index 00000000..b2eb9688
--- /dev/null
+++ b/ui/src/i18next.ts
@@ -0,0 +1,40 @@
+import * as i18next from 'i18next';
+
+const resources = {
+	en: {
+		translation: {
+      trending: 'NO',
+      subscribed_to_communities:'Subscribed to <1>communities</1>',
+      create_a_community: 'Create a community',
+
+
+
+
+
+
+      foo: 'foo',
+			bar: '<1>bar</1>',
+			baz: '<1>{{count}}</1>',
+			qux: 'qux<1></1>',
+			qux_plural: 'quxes<1></1>',
+			quux: '<1>{{name, uppercase}}</1>',
+			userMessagesUnread: 'Hello <1>{{name}}</1>, you have {{count}} unread messages. <3>Go to messages</3>.',
+			userMessagesUnread_plural: 'Hello <1>{{name}}</1>, you have {{count}} unread messages. <3>Go to messages</3>.'
+		},
+	},
+};
+
+function format(value: any, format: any, lng: any) {
+	if (format === 'uppercase') return value.toUpperCase();
+	return value;
+}
+
+i18next.init({
+	lng: 'en',
+	resources,
+	interpolation: {
+		format: format
+	}
+});
+
+export { i18next, resources };
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index a13b84f8..2067c06b 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -1,5 +1,5 @@
 import { render, Component } from 'inferno';
-import { HashRouter, BrowserRouter, Route, Switch } from 'inferno-router';
+import { BrowserRouter, Route, Switch } from 'inferno-router';
 import { Provider } from 'inferno-i18next';
 import { Main } from './components/main';
 import { Navbar } from './components/navbar';
@@ -17,7 +17,7 @@ import { Inbox } from './components/inbox';
 import { Search } from './components/search';
 import { Sponsors } from './components/sponsors';
 import { Symbols } from './components/symbols';
-import './i18n';
+import { i18next } from './i18next';
 
 import './css/bootstrap.min.css';
 import './css/main.css';
@@ -36,7 +36,7 @@ class Index extends Component<any, any> {
 
   render() {
     return (
-      <Provider i18next={i18n}>
+      <Provider i18next={i18next}>
         <BrowserRouter>
           <Navbar />
           <div class="mt-1 p-0">