From 1225d387633720a8ccce27746bbefb7f2845ac8e Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Mon, 17 Jul 2017 09:12:05 -0400
Subject: [PATCH] Integrate react-intl with redux

Using react-intl-redux package.

This just sets up the default English. Language switching in another PR. Requires locale/messages.json to exist, `{}` is ok.
---
 package.json         |  3 ++-
 src/index.jsx        | 11 ++++++++---
 src/lib/intl.jsx     | 19 +++++++++++++++++++
 src/reducers/gui.js  | 15 +++++++++++----
 src/reducers/intl.js |  5 +++++
 5 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/intl.jsx
 create mode 100644 src/reducers/intl.js

diff --git a/package.json b/package.json
index 87ec36bad..1a5d5ef54 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "GraphicaL User Interface for creating and running Scratch 3.0 projects",
   "main": "./src/index.js",
   "scripts": {
-    "build": "npm run clean && webpack --progress --colors --bail",
+    "build": "npm run clean && npm run i18n:msgs && webpack --progress --colors --bail",
     "clean": "rimraf ./build && mkdirp build",
     "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
     "i18n:msgs": "./scripts/generate-locale-messages.js",
@@ -60,6 +60,7 @@
     "react-dom": "15.5.4",
     "react-draggable": "2.2.6",
     "react-intl": "2.3.0",
+    "react-intl-redux": "0.6.0",
     "react-modal": "2.2.1",
     "react-redux": "5.0.5",
     "react-style-proptype": "3.0.0",
diff --git a/src/index.jsx b/src/index.jsx
index 22e2bb241..48f4a12da 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 import {createStore, applyMiddleware} from 'redux';
 import throttle from 'redux-throttle';
-import {IntlProvider} from 'react-intl';
+import {intlInitialState, IntlProvider} from './lib/intl.jsx';
 
 import GUI from './containers/gui.jsx';
 import log from './lib/log';
@@ -65,11 +65,16 @@ const store = applyMiddleware(
     throttle(300, {leading: true, trailing: true})
 )(createStore)(
     reducer,
-    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+    Object.assign(
+        {},
+        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
+        intlInitialState
+    )
 );
+
 ReactDOM.render((
     <Provider store={store}>
-        <IntlProvider locale="en">
+        <IntlProvider>
             <App />
         </IntlProvider>
     </Provider>
diff --git a/src/lib/intl.jsx b/src/lib/intl.jsx
new file mode 100644
index 000000000..2c39f2ce3
--- /dev/null
+++ b/src/lib/intl.jsx
@@ -0,0 +1,19 @@
+import {addLocaleData} from 'react-intl';
+import languages from '../../languages.json';
+import messages from '../../locale/messages.json';
+
+export {IntlProvider, intlReducer} from 'react-intl-redux';
+
+Object.keys(languages).forEach(locale => {
+    // TODO: will need to handle locales not in the default intl - see www/custom-locales
+    const data = require(`react-intl/locale-data/${locale}`);
+    addLocaleData(data);
+});
+
+export const intlInitialState = {
+    intl: {
+        defaultLocale: 'en',
+        locale: 'en',
+        messages: messages.en
+    }
+};
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index f27977aa5..c08306e99 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -1,8 +1,15 @@
 import {combineReducers} from 'redux';
+import intlReducer from './intl';
+import modalReducer from './modals';
+import monitorReducer from './monitors';
+import targetReducer from './targets';
+import vmReducer from './vm';
+
 
 module.exports = combineReducers({
-    modals: require('./modals'),
-    monitors: require('./monitors'),
-    targets: require('./targets'),
-    vm: require('./vm')
+    intl: intlReducer,
+    modals: modalReducer,
+    monitors: monitorReducer,
+    targets: targetReducer,
+    vm: vmReducer
 });
diff --git a/src/reducers/intl.js b/src/reducers/intl.js
new file mode 100644
index 000000000..12c4b35b5
--- /dev/null
+++ b/src/reducers/intl.js
@@ -0,0 +1,5 @@
+import {updateIntl as superUpdateIntl} from 'react-intl-redux';
+import {messages} from '../../locale/messages.json';
+
+export {intlReducer as default} from 'react-intl-redux';
+export const updateIntl = locale => superUpdateIntl(locale, messages[locale] || messages.en);