Merge pull request #13 from ngduc/use-koa-session

feat: use koa-session to keep locale

Author: ngduc

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-setup",
   "description": "A Universal React setup with i18n: Babel 6, Koa 2, React, React Router, React Transmit, React Bootstrap, React-intl, Mocha, Webpack HMR, PostCSS, ESLint.",
-  "version": "2.2.9",
+  "version": "2.3.0",
   "author": "Duc Nguyen (https://github.com/ngduc)",
   "license": "MIT",
   "homepage": "https://github.com/ngduc/react-setup",
@@ -46,64 +46,64 @@
     "clean": "rm -rf ./dist && rm -rf ./static"
   },
   "dependencies": {
+    "autoprefixer": "6.3.3",
     "babel": "6.5.2",
     "babel-cli": "^6.6.5",
     "babel-core": "6.7.2",
     "babel-eslint": "^5.0.0",
     "babel-loader": "6.2.4",
     "babel-plugin-react-intl": "2.1.1",
+    "babel-polyfill": "6.7.2",
     "babel-preset-es2015": "6.6.0",
     "babel-preset-react": "6.5.0",
     "babel-preset-react-hmre": "1.1.1",
     "babel-preset-stage-0": "6.5.0",
-    "babel-polyfill": "6.7.2",
+    "bootstrap": "^3.3.6",
+    "classnames": "^2.2.3",
+    "concurrently": "2.0.0",
+    "copy-webpack-plugin": "^1.1.1",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
     "fetch-plus": "3.8.1",
     "fetch-plus-bearerauth": "3.5.0",
     "fetch-plus-json": "3.6.0",
+    "forever": "0.15.1",
+    "glob": "^7.0.3",
+    "html-webpack-plugin": "^2.10.0",
     "intl": "^1.1.0",
     "intl-locales-supported": "^1.0.0",
+    "intl-messageformat-parser": "^1.2.0",
     "isomorphic-fetch": "2.2.1",
+    "json-loader": "0.5.4",
+    "just-wait": "1.0.5",
     "koa": "^2.0.0-alpha.3",
     "koa-bodyparser": "^3.0",
     "koa-compose": "^3.0.0",
     "koa-compress": "^2.0.0",
     "koa-convert": "^1.2",
-    "koa-generic-session": "^1.10",
     "koa-passport": "^2.0",
     "koa-router": "7.0.1",
     "koa-serve-static": "^1.0.0",
-    "mustache": "^2.2.1",
-    "react": "0.14.7",
-    "react-bootstrap": "^0.28.3",
-    "react-dom": "0.14.7",
-    "react-inline-css": "2.1.0",
-    "react-intl": "2.0.0-rc-1",
-    "react-router": "2.0.1",
-    "react-transmit": "https://github.com/ngduc/react-transmit.git",
-    "serialize-javascript": "^1.2.0",
-    "forever": "0.15.1",
-    "concurrently": "2.0.0",
-    "autoprefixer": "6.3.3",
-    "bootstrap": "^3.3.6",
-    "classnames": "^2.2.3",
-    "copy-webpack-plugin": "^1.1.1",
-    "css-loader": "^0.23.1",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "glob": "^7.0.3",
-    "html-webpack-plugin": "^2.10.0",
-    "intl-messageformat-parser": "^1.2.0",
-    "json-loader": "0.5.4",
-    "just-wait": "1.0.5",
+    "koa-session": "^3.3.1",
     "mkdirp": "^0.5.1",
+    "mustache": "^2.2.1",
     "postcss-cssnext": "^2.4.0",
     "postcss-import": "8.0.2",
     "postcss-loader": "^0.8.2",
     "postcss-mixins": "4.0.1",
     "postcss-modules-values": "1.1.1",
     "postcss-nested": "1.0.0",
     "postcss-simple-vars": "1.2.0",
+    "react": "0.14.7",
     "react-addons-css-transition-group": "^0.14.7",
     "react-addons-test-utils": "^0.14.7",
+    "react-bootstrap": "^0.28.3",
+    "react-dom": "0.14.7",
+    "react-inline-css": "2.1.0",
+    "react-intl": "2.0.0-rc-1",
+    "react-router": "2.0.1",
+    "react-transmit": "https://github.com/ngduc/react-transmit.git",
+    "serialize-javascript": "^1.2.0",
     "style-loader": "^0.13.0",
     "webpack": "1.12.14",
     "webpack-node-externals": "1.0.0"

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.js

@@ -6,6 +6,7 @@ import Router from 'koa-router'
 import serveStatic from 'koa-serve-static'
 import koaConvert from 'koa-convert'
 import koaCompress from 'koa-compress'
+import koaSession from 'koa-session'
 import zlib from 'zlib'
 
 import routesContainer from 'containers/routes'
@@ -15,11 +16,14 @@ import renderAppRouter from './server/renderAppRouter'
 
 try {
   const app = new Koa()
+  app.keys = ['seekreet', 'r3act-s3tup-k3y']
+
   const hostname = process.env.HOSTNAME || 'localhost'
   const port = process.env.PORT || 8000
   let routes = routesContainer
 
   app.use(koaCompress({ flush: zlib.Z_SYNC_FLUSH }))
+  app.use(koaConvert(koaSession(app)))
 
   app.use(apiRouter())
 

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: () => {
+      return {
+        data: dataObj
+      }
+    },
+    render: () => {
+      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,11 @@ 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 || ctx.session.locale || 'en-US'
+    ctx.session.locale = locale
+    i18nData = i18n.getLocaleMessages(locale)
+    const i18nDataString = JSON.stringify(i18nData)
 
     match({ routes, location }, (error, redirectLocation, renderProps) => {
       if (redirectLocation) {
@@ -36,10 +41,11 @@ export default function renderAppRouter () {
       }
       else {
         const webserver = (__PRODUCTION__ ? '' : '//' + hostname + ':8080')
+        const 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`])