chrisgarrity
8136ac4fdd
This is taking advantage of the fact that react-intl can support nested IntlProviders. GUI will use it’s own ConnectedIntlProvider, that maintains the translations in redux, while www will continue to have it’s own IntlProvider that is initialized when the page loads. Moving the IntlProvider into GUI meant that nothing in the playground can use injectIntl, so the default project name needed to move into the component instead of being in the reducer. The Localization HOC is added, it takes an optional onSetLanguage handler, so www can pass a function that will set the cookie that www needs.
56 lines
1.7 KiB
React
56 lines
1.7 KiB
React
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {connect} from 'react-redux';
|
|
|
|
import ConnectedIntlProvider from './connected-intl-provider.jsx';
|
|
|
|
/*
|
|
* Higher Order Component to provide localiztion state. Creates a nested IntlProvider
|
|
* to handle Gui intl context. The component accepts an onSetLanguage callback that is
|
|
* called when the locale chagnes.
|
|
* @param {React.Component} WrappedComponent - component to provide state for
|
|
* @returns {React.Component} component with intl state provided from redux
|
|
*/
|
|
const LocalizationHOC = function (WrappedComponent) {
|
|
class LocalizationWrapper extends React.Component {
|
|
componentDidUpdate (prevProps) {
|
|
if (prevProps.locale !== this.props.locale) {
|
|
this.props.onSetLanguage(this.props.locale);
|
|
}
|
|
}
|
|
render () {
|
|
const {
|
|
locale, // eslint-disable-line no-unused-vars
|
|
onSetLanguage, // eslint-disable-line no-unused-vars
|
|
...componentProps
|
|
} = this.props;
|
|
return (
|
|
<ConnectedIntlProvider>
|
|
<WrappedComponent {...componentProps} />
|
|
</ConnectedIntlProvider>
|
|
);
|
|
}
|
|
}
|
|
LocalizationWrapper.propTypes = {
|
|
locale: PropTypes.string,
|
|
onSetLanguage: PropTypes.func
|
|
};
|
|
|
|
LocalizationWrapper.defaultProps = {
|
|
onSetLanguage: () => {}
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
locale: state.locales.locale
|
|
});
|
|
|
|
const mapDispatchToProps = () => ({});
|
|
|
|
return connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(LocalizationWrapper);
|
|
};
|
|
|
|
export default LocalizationHOC;
|