feat: added libs/RouterContextDataWrapper.js; refactored App.js;

Author: ngduc

src/containers/App/App.js

@@ -8,23 +8,17 @@ import jaLocaleData from 'react-intl/locale-data/ja'
 addLocaleData(enLocaleData)
 addLocaleData(jaLocaleData)
 
-let translations
 let currentLocale
 let messages
 
-if (!__CLIENT__) {
-  const i18n = require('server/libs/i18n') // eslint-disable-line global-require
-  translations = i18n.getTranslations()
-}
-
 export default class App extends React.Component {
   componentWillMount () {
     if (__CLIENT__) {
       currentLocale = (__CLIENT__ ? window.App.locale : 'en-US')
       messages = window.App.messages
     } else {
-      currentLocale = this.props.location.query.locale || 'en-US'
-      messages = translations[ currentLocale ]
+      currentLocale = this.context.data.i18nData.locale || 'en-US'
+      messages = this.context.data.i18nData.messages || {}
     }
     addLocaleData({
       locale: currentLocale,
@@ -42,3 +36,7 @@ export default class App extends React.Component {
     )
   }
 }
+
+App.contextTypes = {
+  data: React.PropTypes.object
+}

src/containers/Home/Home.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Transmit from 'react-transmit'
 import { Link } from 'react-router'
-import { injectIntl, FormattedDate } from 'react-intl'
+import { FormattedDate } from 'react-intl'
 
 import { ButtonGroup, Button } from 'react-bootstrap'
 import { CommentBox, NavBar, Utils } from 'components'

src/server/libs/RouterContextDataWrapper.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { RouterContext } from 'react-router'
+
+
+export function createRouterContextDataWrapper(dataObj) {
+  return React.createClass({
+    childContextTypes: {
+      data: React.PropTypes.object.isRequired
+    },
+    getChildContext: function() {
+      return {
+        data: dataObj
+      }
+    },
+    render: function() {
+      return <RouterContext { ...this.props } />
+    }
+  })
+}

src/server/renderAppRouter.js

@@ -11,8 +11,10 @@ const IGNORED_FILES = ['/favicon.ico']
 const INDEX_TEMPLATE_FILE = 'dist/views/index.tpl.html'
 
 const indexFileContent = fs.readFileSync(INDEX_TEMPLATE_FILE).toString()
+
+import { createRouterContextDataWrapper } from './libs/RouterContextDataWrapper'
 const i18n = require('./libs/i18n')
-const i18nObj = { locale: '', messages: {} }
+let i18nData = { locale: '', messages: {} }
 
 
 export default function renderAppRouter () {
@@ -21,8 +23,9 @@ export default function renderAppRouter () {
     if (IGNORED_FILES.indexOf(location) >= 0) {
       return next()
     }
-    i18nObj.locale = ctx.query.locale || 'en-US'
-    const messagesJsonString = JSON.stringify(i18n.getLocaleMessages(i18nObj.locale))
+    const locale = ctx.query.locale || 'en-US'
+    i18nData = i18n.getLocaleMessages(locale)
+    const i18nDataString = JSON.stringify(i18nData)
 
     match({ routes, location }, (error, redirectLocation, renderProps) => {
       if (redirectLocation) {
@@ -36,10 +39,11 @@ export default function renderAppRouter () {
       }
       else {
         const webserver = (__PRODUCTION__ ? '' : '//' + hostname + ':8080')
+        var RouterContextDataWrapper = createRouterContextDataWrapper({ i18nData })
 
-        Transmit.renderToString(RouterContext, renderProps).then(({ reactString, reactData }) => {
+        Transmit.renderToString(RouterContextDataWrapper, renderProps).then(({ reactString, reactData }) => {
           const renderedHtml = mustache.render(indexFileContent, {
-            i18n: messagesJsonString,
+            i18n: i18nDataString,
             reactString
           })
           const output = Transmit.injectIntoMarkup(renderedHtml, reactData, [`${webserver}/client.js`])