Multi language support (#13)

* Fix: Module not found: Error: Can't resolve 'react-hot-loader/webpack'

* add IntlProvider for mulit language support

* add some sample translation

* fix warning on console

* Revert "Fix: Module not found: Error: Can't resolve 'react-hot-loader/webpack'"

This reverts commit f02318f.

* Revert "fix warning on console"

This reverts commit 3fcb3e7.

* use yarn

* attempt to fix indent

* use a single line here

package.json

@@ -109,6 +109,7 @@
     "react-dom": "^16.3.2",
     "react-ga": "^2.1.2",
     "react-image": "^1.0.1",
+    "react-intl": "^2.4.0",
     "react-masonry-component": "^6.2.0",
     "react-mdl": "^1.10.3",
     "react-modal": "^3.3.1",

src/components/Item.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import CSSModules from 'react-css-modules';
 import { Link } from 'react-router-dom';
 import Icon from 'react-mdl/lib/Icon';
+import { FormatMessage } from '@/locale';
 
 @CSSModules(styles, { allowMultiple: true })
 export default class Item extends React.Component {
@@ -39,7 +40,7 @@ export default class Item extends React.Component {
 
   renderRankText() {
     if (this.props.item.previous_rank === 0) {
-      return <span styleName="rank-text-outer no-previous-rank">初登场</span>;
+      return <span styleName="rank-text-outer no-previous-rank"><FormatMessage id="初登场" /></span>;
     }
     let icon;
     if (this.props.item.previous_rank < this.props.item.rank) {
@@ -49,7 +50,7 @@ export default class Item extends React.Component {
     }
     return (
       <span styleName="rank-text-outer">
-        {icon} {'前日 ' + this.props.item.previous_rank + '位'}
+        {icon} <FormatMessage id="前日x位" values={{rank: this.props.item.previous_rank}} />
       </span>
     );
   }

src/index.js

@@ -6,16 +6,23 @@ import { Provider } from 'react-redux';
 import { configureStore } from '@/stores';
 import AppContainer from '@/containers/AppContainer';
 
+import { IntlProvider } from 'react-intl';
+import { chooseLocale } from '@/locale';
+
+const lang = chooseLocale(navigator.language);
+
 const store = configureStore();
 
 // Render the main component into the dom
 const render = Component => {
   ReactDOM.render(
-    <Provider store={store}>
-      <Root>
-        <Component />
-      </Root>
-    </Provider>,
+    <IntlProvider locale={lang.lang} messages={lang.message}>
+      <Provider store={store}>
+        <Root>
+          <Component />
+        </Root>
+      </Provider>
+    </IntlProvider>,
     document.getElementById('app')
   );
 };

src/locale/chooseLocale.js

@@ -0,0 +1,15 @@
+import { addLocaleData } from 'react-intl';
+import jaLocaleData from 'react-intl/locale-data/ja';
+import ja from '@/locale/ja';
+
+const chooseLocale = (language) => {
+	switch (language.split('_')[0]) {
+    // case 'zh':
+    // return 'zh_CN';
+    default:
+      addLocaleData(jaLocaleData);
+      return { lang: 'ja', message: ja };
+  }
+};
+
+export default chooseLocale;

src/locale/format.js

@@ -0,0 +1,7 @@
+import { injectIntl, intlShape } from 'react-intl';
+
+const ChildComponent = ({ intl, id, values }) => intl.formatMessage({ id }, values);
+
+ChildComponent.propTypes = { intl: intlShape.isRequired };
+
+export default injectIntl(ChildComponent);

src/locale/index.js

@@ -0,0 +1,2 @@
+export chooseLocale from '@/locale/chooseLocale';
+export FormatMessage from '@/locale/format';

src/locale/ja.js

@@ -0,0 +1,6 @@
+const ja = {
+  初登场: '初登场',
+  前日x位: '前日 {rank}位'
+};
+
+export default ja;

yarn.lock

@@ -4079,21 +4079,41 @@ interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
+intl-format-cache@^2.0.5:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.1.0.tgz#04a369fecbfad6da6005bae1f14333332dcf9316"
+
+intl-messageformat-parser@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075"
+
+intl-messageformat@^2.0.0, intl-messageformat@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc"
+  dependencies:
+    intl-messageformat-parser "1.4.0"
+
+intl-relativeformat@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-2.1.0.tgz#010f1105802251f40ac47d0e3e1a201348a255df"
+  dependencies:
+    intl-messageformat "^2.0.0"
+
 invariant@^2.0.0, invariant@^2.2.0:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.3.tgz#1a827dfde7dcbd7c323f0ca826be8fa7c5e9d688"
   dependencies:
     loose-envify "^1.0.0"
 
-invariant@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+invariant@^2.1.1, invariant@^2.2.2:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
     loose-envify "^1.0.0"
 
-invariant@^2.2.2:
-  version "2.2.4"
-  resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+invariant@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
     loose-envify "^1.0.0"
 
@@ -6538,6 +6558,15 @@ react-image@^1.0.1:
   dependencies:
     prop-types "15.6.0"
 
+react-intl@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.4.0.tgz#66c14dc9df9a73b2fbbfbd6021726e80a613eb15"
+  dependencies:
+    intl-format-cache "^2.0.5"
+    intl-messageformat "^2.1.0"
+    intl-relativeformat "^2.0.0"
+    invariant "^2.1.1"
+
 react-is@^16.3.2:
   version "16.3.2"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.3.2.tgz#f4d3d0e2f5fbb6ac46450641eb2e25bf05d36b22"