Merge pull request #7 from MacareuxDigital/poc/modal-title-translation

POC: manually set language translation to "choose an extension" modal title

src/containers/extension-library.jsx

@@ -2,26 +2,21 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
+import {compose} from 'redux';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
 
 import extensionLibraryContent from '../lib/libraries/extensions/index.jsx';
-
 import LibraryComponent from '../components/library/library.jsx';
 import extensionIcon from '../components/action-menu/icon--sprite.svg';
+import TranslationHOC from '../lib/translation-hoc.jsx';
 
 const messages = defineMessages({
-    extensionTitle: {
-        defaultMessage: 'Choose an Extension',
-        description: 'Heading for the extension library',
-        id: 'gui.extensionLibrary.chooseAnExtension'
-    },
     extensionUrl: {
         defaultMessage: 'Enter the URL of the extension',
         description: 'Prompt for unoffical extension url',
         id: 'gui.extensionLibrary.extensionUrl'
     }
 });
-
 class ExtensionLibrary extends React.PureComponent {
     constructor (props) {
         super(props);
@@ -56,7 +51,7 @@ class ExtensionLibrary extends React.PureComponent {
                 data={extensionLibraryThumbnailData}
                 filterable={false}
                 id="extensionLibrary"
-                title={this.props.intl.formatMessage(messages.extensionTitle)}
+                title={this.props.messagesTranslation.chooseExtensionModalTitle || ""}
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}
                 onRequestClose={this.props.onRequestClose}
@@ -67,10 +62,11 @@ class ExtensionLibrary extends React.PureComponent {
 
 ExtensionLibrary.propTypes = {
     intl: intlShape.isRequired,
+    messagesTranslation: PropTypes.object,
     onCategorySelected: PropTypes.func,
     onRequestClose: PropTypes.func,
     visible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired // eslint-disable-line react/no-unused-prop-types
 };
 
-export default injectIntl(ExtensionLibrary);
+export default compose(injectIntl, TranslationHOC)(ExtensionLibrary);

src/lib/translation-hoc.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+
+const messagesEnglish = {
+    "chooseExtensionModalTitle": "Optional Extensions for Your Project :)"
+  }
+
+const messagesJapanese = {
+    "chooseExtensionModalTitle": "プロジェクトのオプション拡張機能 :)"
+  }
+
+const TranslationHOC = function(WrappedComponent) {
+    class TranslationContainer extends React.PureComponent {
+        constructor (props) {
+            super(props);
+        }
+        state = {
+            messages: {},
+        };
+        componentDidMount() {
+            this.updateTranslation();
+        }
+        componentDidUpdate(){
+            this.updateTranslation();
+        }
+        updateTranslation = () => {
+            if (this.props.currentLocale === 'ja') {
+                this.setState({
+                    messages: messagesJapanese,
+                  });
+            } else {
+                this.setState({
+                    messages: messagesEnglish,
+                  });
+            }
+          }
+        render () {
+            return (<WrappedComponent
+                messagesTranslation={this.state.messages}
+                {...this.props}
+            />);
+        }
+    }
+    TranslationContainer.propTypes = {
+        currentLocale: PropTypes.string.isRequired,
+    };
+    const mapStateToProps = state => {
+        return {
+            currentLocale: state.locales.locale,
+        }
+    }
+    return connect(
+        mapStateToProps,
+    )(TranslationContainer);
+
+};
+
+export default TranslationHOC;