Locales cleanup

* updated locales reducer to include current messages and messagesByLocale (the previous all messages)
* moved locales out of gui
* include locales in the things exported by gui (index.js)

src/containers/blocks.jsx

@@ -472,8 +472,8 @@ const mapStateToProps = state => ({
         state.scratchGui.mode.isFullScreen
     ),
     extensionLibraryVisible: state.scratchGui.modals.extensionLibrary,
-    locale: state.scratchGui.locales.locale,
-    messages: state.scratchGui.locales.messages[state.scratchGui.locales.locale],
+    locale: state.locales.locale,
+    messages: state.locales.messages,
     toolboxXML: state.scratchGui.toolbox.toolboxXML,
     customProceduresVisible: state.scratchGui.customProcedures.active
 });

src/containers/language-selector.jsx

@@ -16,7 +16,7 @@ class LanguageSelector extends React.Component {
     }
     handleChange (e) {
         const newLocale = e.target.value;
-        if (this.props.locales.hasOwnProperty(newLocale)) {
+        if (this.props.supportedLocales.includes(newLocale)) {
             this.props.onChangeLanguage(newLocale);
         }
     }
@@ -40,13 +40,13 @@ class LanguageSelector extends React.Component {
 LanguageSelector.propTypes = {
     children: PropTypes.node,
     currentLocale: PropTypes.string.isRequired,
-    locales: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
-    onChangeLanguage: PropTypes.func.isRequired
+    onChangeLanguage: PropTypes.func.isRequired,
+    supportedLocales: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string))
 };
 
 const mapStateToProps = state => ({
-    currentLocale: state.scratchGui.locales.locale,
-    locales: state.scratchGui.locales.messages
+    currentLocale: state.locales.locale,
+    supportedLocales: Object.keys(state.locales.messagesByLocale)
 });
 
 const mapDispatchToProps = dispatch => ({

src/index.js

 import GUI from './containers/gui.jsx';
-import GuiReducer, {guiInitialState, guiMiddleware, initFullScreen, initPlayer, initLocale} from './reducers/gui';
+import GuiReducer, {guiInitialState, guiMiddleware, initFullScreen, initPlayer} from './reducers/gui';
+import LocalesReducer, {localesInitialState, initLocale} from './reducers/locales';
 import {ScratchPaintReducer} from 'scratch-paint';
 import {setFullScreen, setPlayer} from './reducers/mode';
 import {setAppElement} from 'react-modal';
 
 const guiReducers = {
+    locales: LocalesReducer,
     scratchGui: GuiReducer,
     scratchPaint: ScratchPaintReducer
 };
@@ -18,6 +20,7 @@ export {
     initPlayer,
     initFullScreen,
     initLocale,
+    localesInitialState,
     setFullScreen,
     setPlayer
 };

src/lib/app-state-hoc.jsx

@@ -4,7 +4,8 @@ import {Provider} from 'react-redux';
 import {createStore, combineReducers, compose} from 'redux';
 import ConnectedIntlProvider from './connected-intl-provider.jsx';
 
-import guiReducer, {guiInitialState, guiMiddleware, initFullScreen, initLocale, initPlayer} from '../reducers/gui';
+import guiReducer, {guiInitialState, guiMiddleware, initFullScreen, initPlayer} from '../reducers/gui';
+import localesReducer, {initLocale, localesInitialState} from '../reducers/locales';
 
 import {setPlayer, setFullScreen} from '../reducers/mode.js';
 
@@ -30,20 +31,25 @@ const AppStateHOC = function (WrappedComponent) {
             if (props.isPlayerOnly) {
                 initializedGui = initPlayer(initializedGui);
             }
-            const reducer = combineReducers({
-                scratchGui: guiReducer,
-                scratchPaint: ScratchPaintReducer
-            });
 
+            let initializedLocales = localesInitialState;
             if (window.location.search.indexOf('locale=') !== -1 ||
                 window.location.search.indexOf('lang=') !== -1) {
                 const locale = window.location.search.match(/(?:locale|lang)=([\w]+)/)[1];
-                initializedGui = initLocale(initializedGui, locale);
+                initializedLocales = initLocale(initializedLocales, locale);
             }
 
+            const reducer = combineReducers({
+                locales: localesReducer,
+                scratchGui: guiReducer,
+                scratchPaint: ScratchPaintReducer
+            });
             this.store = createStore(
                 reducer,
-                {scratchGui: initializedGui},
+                {
+                    locales: initializedLocales,
+                    scratchGui: initializedGui
+                },
                 enhancer);
         }
         componentDidUpdate (prevProps) {

src/lib/connected-intl-provider.jsx

@@ -2,9 +2,9 @@ import {IntlProvider as ReactIntlProvider} from 'react-intl';
 import {connect} from 'react-redux';
 
 const mapStateToProps = state => ({
-    key: state.scratchGui.locales.locale,
-    locale: state.scratchGui.locales.locale,
-    messages: state.scratchGui.locales.messages[state.scratchGui.locales.locale]
+    key: state.locales.locale,
+    locale: state.locales.locale,
+    messages: state.locales.messages
 });
 
 export default connect(mapStateToProps)(ReactIntlProvider);

src/reducers/gui.js

@@ -7,7 +7,6 @@ import blockDragReducer, {blockDragInitialState} from './block-drag';
 import editorTabReducer, {editorTabInitialState} from './editor-tab';
 import hoveredTargetReducer, {hoveredTargetInitialState} from './hovered-target';
 import menuReducer, {menuInitialState} from './menus';
-import localesReducer, {localesInitialState} from './locales';
 import modalReducer, {modalsInitialState} from './modals';
 import modeReducer, {modeInitialState} from './mode';
 import monitorReducer, {monitorsInitialState} from './monitors';
@@ -27,7 +26,6 @@ const guiInitialState = {
     colorPicker: colorPickerInitialState,
     customProcedures: customProceduresInitialState,
     editorTab: editorTabInitialState,
-    locales: localesInitialState,
     mode: modeInitialState,
     hoveredTarget: hoveredTargetInitialState,
     stageSize: stageSizeInitialState,
@@ -60,20 +58,7 @@ const initFullScreen = function (currentState) {
         }}
     );
 };
-const initLocale = function (currentState, locale) {
-    if (currentState.locales.messages.hasOwnProperty(locale)) {
-        return Object.assign(
-            {},
-            currentState,
-            {locales: {
-                locale: locale,
-                messages: currentState.locales.messages
-            }}
-        );
-    }
-    // don't change locale if it's not in the current messages
-    return currentState;
-};
+
 const guiReducer = combineReducers({
     assetDrag: assetDragReducer,
     blockDrag: blockDragReducer,
@@ -81,7 +66,6 @@ const guiReducer = combineReducers({
     colorPicker: colorPickerReducer,
     customProcedures: customProceduresReducer,
     editorTab: editorTabReducer,
-    locales: localesReducer,
     mode: modeReducer,
     hoveredTarget: hoveredTargetReducer,
     stageSize: stageSizeReducer,
@@ -99,6 +83,5 @@ export {
     guiInitialState,
     guiMiddleware,
     initFullScreen,
-    initLocale,
     initPlayer
 };

src/reducers/locales.js

@@ -10,7 +10,8 @@ const SELECT_LOCALE = 'scratch-gui/locales/SELECT_LOCALE';
 
 const initialState = {
     locale: 'en',
-    messages: editorMessages
+    messagesByLocale: editorMessages,
+    messages: editorMessages.en
 };
 
 const reducer = function (state, action) {
@@ -19,12 +20,14 @@ const reducer = function (state, action) {
     case SELECT_LOCALE:
         return Object.assign({}, state, {
             locale: action.locale,
-            messages: state.messages
+            messagesByLocale: state.messagesByLocale,
+            messages: state.messagesByLocale[action.locale]
         });
     case UPDATE_LOCALES:
         return Object.assign({}, state, {
             locale: state.locale,
-            messages: action.messages
+            messagesByLocale: action.messagesByLocale,
+            messages: action.messagesByLocale[state.locale]
         });
     default:
         return state;
@@ -41,13 +44,28 @@ const selectLocale = function (locale) {
 const setLocales = function (localesMessages) {
     return {
         type: UPDATE_LOCALES,
-        messages: localesMessages
+        messagesByLocale: localesMessages
     };
 };
-
+const initLocale = function (currentState, locale) {
+    if (currentState.messagesByLocale.hasOwnProperty(locale)) {
+        return Object.assign(
+            {},
+            currentState,
+            {
+                locale: locale,
+                messagesByLocale: currentState.messagesByLocale,
+                messages: currentState.messagesByLocale[locale]
+            }
+        );
+    }
+    // don't change locale if it's not in the current messages
+    return currentState;
+};
 export {
     reducer as default,
     initialState as localesInitialState,
+    initLocale,
     selectLocale,
     setLocales
 };