bigbluebutton-Github/bigbluebutton-html5/imports/startup/client/intl.js
2017-06-05 13:52:46 +00:00

74 lines
1.7 KiB
JavaScript
Executable File

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { IntlProvider } from 'react-intl';
const propTypes = {
locale: PropTypes.string.isRequired,
};
const defaultProps = {
locale: 'en',
};
class IntlStartup extends Component {
constructor(props) {
super(props);
this.state = {
messages: {},
appLocale: this.props.locale,
};
this.fetchLocalizedMessages = this.fetchLocalizedMessages.bind(this);
}
fetchLocalizedMessages(locale) {
const url = `/html5client/locale?locale=${locale}`;
const { baseControls } = this.props;
baseControls.updateLoadingState(true);
fetch(url)
.then((response) => {
if (response.ok) {
return response.json();
}
this.setState({ appLocale: 'en' });
return response.json();
})
.then((messages) => {
this.setState({ messages }, () => {
baseControls.updateLoadingState(false);
});
})
.catch((reason) => {
baseControls.updateErrorState(reason);
baseControls.updateLoadingState(false);
});
}
componentWillMount() {
this.fetchLocalizedMessages(this.state.appLocale);
}
componentWillUpdate(nextProps, nextState) {
if (this.props.locale !== nextProps.locale) {
this.setState({ appLocale: nextProps.locale });
this.fetchLocalizedMessages(nextProps.locale);
}
}
render() {
return (
<IntlProvider locale={this.state.appLocale} messages={this.state.messages}>
{this.props.children}
</IntlProvider>
);
}
}
export default IntlStartup;
IntlStartup.propTypes = propTypes;
IntlStartup.defaultProps = defaultProps;