Feature(frontend): add i18n support

Closes #345

Author: Armour

README.md

@@ -39,6 +39,8 @@
 * [x] [react-redux](https://github.com/reactjs/react-redux) - the official react bindings for [redux 4](https://github.com/reactjs/redux) (a predictable state container for js apps)
 * [x] [react-saga](https://github.com/redux-saga/redux-saga/) - make redux asynchronous flows easy to read, write and test, the replacement for [redux-thunk](https://github.com/reduxjs/redux-thunk)
 * [x] [connected-react-router](https://github.com/supasate/connected-react-router) - a redux binding for react-router 4, the replacement for [react-router-redux v5](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)
+* [x] [react-loadable](https://github.com/jamiebuilds/react-loadable) - better user experience for dynamic loading components
+* [x] [react-i18next](https://github.com/i18next/react-i18next) - internationalization for react done right
 * [x] [immutable.js](https://github.com/facebook/immutable-js/) - persistent Immutable data structures for react redux state management
 * [x] [editorconfig](http://editorconfig.org/) - maintain consistent coding styles between different editors and IDEs
 * [x] [eslint](http://eslint.org/) - lint javascript files (.js, .jsx)

frontend/src/App.tsx

@@ -1,9 +1,11 @@
 import { ConnectedRouter } from 'connected-react-router';
 import { History } from 'history';
 import * as React from 'react';
+import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 
+import i18n from 'i18n';
 import router from 'router';
 import { IGlobalState } from 'types/global';
 
@@ -13,9 +15,11 @@ interface IAppProps {
 }
 
 export default (props: IAppProps) => (
-  <Provider store={props.store}>
-    <ConnectedRouter history={props.history}>
-      {router}
-    </ConnectedRouter>
-  </Provider>
+  <I18nextProvider i18n={i18n}>
+    <Provider store={props.store}>
+      <ConnectedRouter history={props.history}>
+        {router}
+      </ConnectedRouter>
+    </Provider>
+  </I18nextProvider>
 );

frontend/src/components/Dropdown/dropdown.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import { upperCaseFirstChar } from 'utils';
+import i18ns from './i18n';
 
-interface IDropdownProps {
+interface IDropdownProps extends InjectedI18nProps, InjectedTranslateProps {
   id: string;
   dropdownLists: string[];
 }
@@ -12,15 +13,30 @@ const dropdownConfig: Partial<M.DropdownOptions> = {
   coverTrigger: false,
 };
 
-export default class Dropdown extends React.Component<IDropdownProps> {
+class Dropdown extends React.Component<IDropdownProps> {
+  constructor(props: IDropdownProps) {
+    super(props);
+    this.loadI18ns();
+  }
+
+  public loadI18ns() {
+    const { i18n } = this.props;
+    for (const key in i18ns) {
+      if (i18ns.hasOwnProperty(key)) {
+        i18n.addResourceBundle(key, 'Dropdown', i18ns[key]);
+      }
+    }
+  }
+
   public componentDidMount() {
     const elems = document.querySelectorAll('.dropdown-button');
     M.Dropdown.init(elems, dropdownConfig);
   }
 
   public render() {
+    const { t } = this.props;
     const links = this.props.dropdownLists.map((key) =>
-      <li key={key}><Link to={`/${key}`}>{upperCaseFirstChar(key)}</Link></li>,
+      <li key={key}><Link to={`/${key}`}>{t(key)}</Link></li>,
     );
     return (
       <ul id={this.props.id} className='dropdown-content'>
@@ -29,3 +45,5 @@ export default class Dropdown extends React.Component<IDropdownProps> {
     );
   }
 }
+
+export default translate('Dropdown')(Dropdown);

frontend/src/components/Dropdown/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "parallax": "Parallax"
+}

frontend/src/components/Dropdown/i18n/index.tsx

@@ -0,0 +1,11 @@
+const en = require('./en.json');
+const jp = require('./jp.json');
+const zh = require('./zh.json');
+
+const i18ns: { [id: string]: string; } = {
+  en,
+  jp,
+  zh,
+};
+
+export default i18ns;

frontend/src/components/Dropdown/i18n/jp.json

@@ -0,0 +1,3 @@
+{
+  "parallax": "視差"
+}

frontend/src/components/Dropdown/i18n/zh.json

@@ -0,0 +1,3 @@
+{
+  "parallax": "视差"
+}

frontend/src/components/Footer/footer.tsx

@@ -1,35 +1,55 @@
 import * as React from 'react';
+import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+
+import i18ns from './i18n';
+
+interface IFooterProps extends InjectedI18nProps, InjectedTranslateProps { }
+
+class Footer extends React.Component<IFooterProps> {
+  constructor(props: IFooterProps) {
+    super(props);
+    this.loadI18ns();
+  }
+
+  public loadI18ns() {
+    const { i18n } = this.props;
+    for (const key in i18ns) {
+      if (i18ns.hasOwnProperty(key)) {
+        i18n.addResourceBundle(key, 'Footer', i18ns[key]);
+      }
+    }
+  }
 
-export default class Footer extends React.Component {
   public render() {
+    const { t } = this.props;
     return (
       <footer className='page-footer'>
         <div className='container'>
           <div className='row'>
             <div className='col l6 s12'>
-              <h5 className='white-text'>Footer Content</h5>
-              <p className='grey-text text-lighten-4'>
-                You can use rows and columns here to organize your footer content.
-              </p>
+              <h5 className='white-text'>{t('footer-title')}</h5>
+              <p className='grey-text text-lighten-4'>{t('footer-content')}</p>
             </div>
-            <div className='col l4 offset-l2 s12'>
-              <h5 className='white-text'>Links</h5>
+            <div className='col l3 offset-l3 s12'>
+              <h5 className='white-text'>{t('links')}</h5>
               <ul>
-                <li><a className='grey-text text-lighten-3' href='#'>Link 1</a></li>
-                <li><a className='grey-text text-lighten-3' href='#'>Link 2</a></li>
-                <li><a className='grey-text text-lighten-3' href='#'>Link 3</a></li>
-                <li><a className='grey-text text-lighten-3' href='#'>Link 4</a></li>
+                <li><a className='grey-text text-lighten-3' href='#'>{t('link-1')}</a></li>
+                <li><a className='grey-text text-lighten-3' href='#'>{t('link-2')}</a></li>
+                <li><a className='grey-text text-lighten-3' href='#'>{t('link-3')}</a></li>
+                <li><a className='grey-text text-lighten-3' href='#'>{t('link-4')}</a></li>
               </ul>
             </div>
           </div>
         </div>
         <div className='footer-copyright'>
           <div className='container'>
-            © 2017 Copyright Text
-            <a className='grey-text text-lighten-4 right' href='#'>More Links</a>
+            © 2017 Copyright <a className='grey-text text-lighten-4' href='https://github.com/Armour'>Armour</a>
+            <a className='grey-text text-lighten-4 right' href='#'>{t('more-links')}</a>
           </div>
         </div>
       </footer>
     );
   }
 }
+
+export default translate('Footer')(Footer);

frontend/src/components/Footer/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "footer-title": "Footer Content",
+  "footer-content": "You can use rows and columns here to organize your footer content.",
+  "links": "Links",
+  "link-1": "Link 1",
+  "link-2": "Link 2",
+  "link-3": "Link 3",
+  "link-4": "Link 4",
+  "more-links": "More Links"
+}

frontend/src/components/Footer/i18n/index.tsx

@@ -0,0 +1,11 @@
+const en = require('./en.json');
+const jp = require('./jp.json');
+const zh = require('./zh.json');
+
+const i18ns: { [id: string]: string; } = {
+  en,
+  jp,
+  zh,
+};
+
+export default i18ns;