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

@@ -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",

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>

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
+    }
+};

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
 });

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);