Add locale store

kokororin · Jun 21, 2018 · 451069b · 451069b
1 parent 42dce25
commit 451069b
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 37 deletions.
diff --git a/src/actions/locale.js b/src/actions/locale.js
@@ -0,0 +1,10 @@
+import namespacedTypes from 'namespaced-types';
+
+export const types = namespacedTypes('locale', ['SET_LOCALE']);
+
+export function setLocale(data) {
+  return {
+    type: types.SET_LOCALE,
+    payload: data
+  };
+}
diff --git a/src/components/ConnectedIntlProvider.js b/src/components/ConnectedIntlProvider.js
@@ -0,0 +1,7 @@
+import { connect } from 'react-redux';
+import { IntlProvider } from 'react-intl';
+
+export default connect(state => ({
+  locale: state.locale.lang,
+  messages: state.locale.messages
+}))(IntlProvider);
diff --git a/src/components/Item.js b/src/components/Item.js
@@ -19,10 +19,6 @@ export default class Item extends React.Component {
     super(props);
   }
 
-  shouldComponentUpdate() {
-    return false;
-  }
-
   onImageMouseMove(event) {
     event = event.nativeEvent;
     const target = event.target;
@@ -78,7 +74,12 @@ export default class Item extends React.Component {
             <span>{this.props.item.work.title}</span>
           </div>
           <div styleName="meta">
-            <span styleName="rank-num">{`${this.props.item.rank}位`}</span>
+            <span styleName="rank-num">
+              <FormattedMessage
+                id="x rank"
+                values={{ rank: this.props.item.rank }}
+              />
+            </span>
             <span>{this.renderRankText()}</span>
           </div>
         </Link>

diff --git a/src/containers/GalleryContainer.js b/src/containers/GalleryContainer.js
@@ -25,8 +25,11 @@ import Message from '@/components/Message';
 import scrollTo from '@/utils/scrollTo';
 import Storage from '@/utils/Storage';
 
+import chooseLocale from '@/locale/chooseLocale';
+
+@connect(state => ({ gallery: state.gallery }))
 @injectIntl
-export class GalleryContainerWithoutStore extends React.Component {
+export default class GalleryContainer extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -117,8 +120,7 @@ export class GalleryContainerWithoutStore extends React.Component {
     this.layoutDOMNode.MaterialLayout.toggleDrawer();
     const value = event.target.dataset.value;
     Storage.set('lang', value);
-    // TODO Create LocaleStore
-    location.reload();
+    chooseLocale(value, this.props.dispatch);
   }
 
   @autobind
@@ -172,7 +174,9 @@ export class GalleryContainerWithoutStore extends React.Component {
             'nav-link__highlight': highlight
           })}>
           {highlight && <Icon name="done" />}
-          {elem.jp}
+          {elem.en === 'ranking'
+            ? this.props.intl.formatMessage({ id: 'Ranking' })
+            : elem.jp}
         </a>
       );
     });
@@ -252,7 +256,3 @@ export class GalleryContainerWithoutStore extends React.Component {
     );
   }
 }
-
-export default connect(state => ({ gallery: state.gallery }))(
-  GalleryContainerWithoutStore
-);
diff --git a/src/containers/IllustContainer.js b/src/containers/IllustContainer.js
@@ -30,9 +30,10 @@ import cachedFetch from '@/utils/cachedFetch';
 import moment from '@/utils/moment';
 import Storage from '@/utils/Storage';
 
+@connect(state => ({ illust: state.illust }))
 @injectIntl
 @CSSModules(styles, { allowMultiple: true })
-export class IllustContainerWithoutStore extends React.Component {
+export default class IllustContainer extends React.Component {
   constructor(props) {
     super(props);
 
@@ -332,7 +333,3 @@ export class IllustContainerWithoutStore extends React.Component {
     );
   }
 }
-
-export default connect(state => ({ illust: state.illust }))(
-  IllustContainerWithoutStore
-);
diff --git a/src/index.ejs b/src/index.ejs
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="ja">
+<html>
 
 <head>
   <meta charset="utf-8">

diff --git a/src/index.js b/src/index.js
@@ -6,23 +6,23 @@ import { Provider } from 'react-redux';
 import { configureStore } from '@/stores';
 import AppContainer from '@/containers/AppContainer';
 
-import { IntlProvider } from 'react-intl';
+import ConnectedIntlProvider from '@/components/ConnectedIntlProvider';
 import chooseLocale from '@/locale/chooseLocale';
 
-const lang = chooseLocale(navigator.language);
-
 const store = configureStore();
 
+chooseLocale(navigator.language, store.dispatch);
+
 // Render the main component into the dom
 const render = Component => {
   ReactDOM.render(
-    <IntlProvider locale={lang.lang} messages={lang.message}>
-      <Provider store={store}>
+    <Provider store={store}>
+      <ConnectedIntlProvider textComponent={React.Fragment}>
         <Root>
           <Component />
         </Root>
-      </Provider>
-    </IntlProvider>,
+      </ConnectedIntlProvider>
+    </Provider>,
     document.getElementById('app')
   );
 };

diff --git a/src/locale/chooseLocale.js b/src/locale/chooseLocale.js
@@ -4,11 +4,12 @@ import ja from '@/locale/ja';
 import enLocaleData from 'react-intl/locale-data/en';
 import en from '@/locale/en';
 import Storage from '@/utils/Storage';
+import * as LocaleActions from '@/actions/locale';
 
-const chooseLocale = language => {
+const chooseLocale = (language, dispatch) => {
   const cachedLang = Storage.get('lang');
   let lang;
-  let message;
+  let messages;
 
   if (!cachedLang) {
     lang = language.split('-')[0];
@@ -20,20 +21,22 @@ const chooseLocale = language => {
     case 'en':
       addLocaleData(enLocaleData);
       lang = 'en';
-      message = en;
+      messages = en;
       break;
     default:
       addLocaleData(jaLocaleData);
       lang = 'ja';
-      message = ja;
+      messages = ja;
   }
 
   Storage.set('lang', lang);
 
-  return {
-    lang,
-    message
-  };
+  dispatch(
+    LocaleActions.setLocale({
+      lang,
+      messages
+    })
+  );
 };
 
 export default chooseLocale;
diff --git a/src/locale/en.js b/src/locale/en.js
@@ -25,7 +25,8 @@ const en = {
   'Failed to Load': 'Failed to Load',
   Tags: 'Tags',
   'Redirecting to pixiv.net': 'Redirecting to pixiv.net',
-  Language: 'Language'
+  Language: 'Language',
+  Ranking: 'Ranking'
 };
 
 export default en;
diff --git a/src/locale/ja.js b/src/locale/ja.js
@@ -26,7 +26,8 @@ const ja = {
   'Failed to Load': '読み込みに失敗しました',
   Tags: 'タグ',
   'Redirecting to pixiv.net': 'あなたはpixiv.netへリダイレクトしています',
-  Language: '言語'
+  Language: '言語',
+  Ranking: 'ランキング'
 };
 
 export default ja;
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -2,10 +2,12 @@ import { combineReducers } from 'redux';
 
 import gallery from '@/reducers/gallery';
 import illust from '@/reducers/illust';
+import locale from '@/reducers/locale';
 
 const reducers = combineReducers({
   gallery,
-  illust
+  illust,
+  locale
 });
 
 export default reducers;
diff --git a/src/reducers/locale.js b/src/reducers/locale.js
@@ -0,0 +1,23 @@
+import * as LocaleActions from '@/actions/locale';
+
+const types = LocaleActions.types;
+
+export default function locale(
+  state = {
+    lang: '',
+    messages: {}
+  },
+  action
+) {
+  switch (action.type) {
+    case types.SET_LOCALE:
+      return {
+        ...state,
+        lang: action.payload.lang,
+        messages: action.payload.messages
+      };
+
+    default:
+      return state;
+  }
+}