bigbluebutton-Github/bigbluebutton-html5/imports/startup/client/intl.jsx
2017-10-27 11:23:18 -02:00

76 lines
1.8 KiB
JavaScript

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { IntlProvider } from 'react-intl';
const propTypes = {
locale: PropTypes.string.isRequired,
baseControls: PropTypes.shape.isRequired,
children: PropTypes.shape.isRequired,
};
const BROWSER_LANGUAGE = window.navigator.userLanguage || window.navigator.language;
const DEFAULT_LANGUAGE = Meteor.settings.public.app.defaultSettings.application.locale;
const defaultProps = {
locale: BROWSER_LANGUAGE,
};
class IntlStartup extends Component {
constructor(props) {
super(props);
this.state = {
messages: {},
};
this.fetchLocalizedMessages = this.fetchLocalizedMessages.bind(this);
}
componentWillMount() {
this.fetchLocalizedMessages(this.props.locale);
}
componentWillUpdate(nextProps) {
if (this.props.locale !== nextProps.locale) {
this.fetchLocalizedMessages(nextProps.locale);
}
}
fetchLocalizedMessages(locale) {
const url = `/html5client/locale?locale=${locale}`;
const { baseControls } = this.props;
baseControls.updateLoadingState(true);
fetch(url)
.then((response) => {
if (!response.ok) {
return Promise.reject();
}
return response.json();
})
.then(({ messages, normalizedLocale }) => {
this.setState({ messages, locale: normalizedLocale.replace('_', '-') }, () => {
baseControls.updateLoadingState(false);
});
})
.catch(() => {
this.setState({ locale: DEFAULT_LANGUAGE });
baseControls.updateLoadingState(false);
});
}
render() {
return (
<IntlProvider locale={this.state.locale} messages={this.state.messages}>
{this.props.children}
</IntlProvider>
);
}
}
export default IntlStartup;
IntlStartup.propTypes = propTypes;
IntlStartup.defaultProps = defaultProps;