diff --git a/src/components/views/elements/LanguageDropdown.js b/src/components/views/elements/LanguageDropdown.js index 9524b3ff27..764657830c 100644 --- a/src/components/views/elements/LanguageDropdown.js +++ b/src/components/views/elements/LanguageDropdown.js @@ -20,11 +20,6 @@ import sdk from '../../../index'; import UserSettingsStore from '../../../UserSettingsStore'; import _t from 'counterpart-riot'; import * as languageHandler from '../../../languageHandler'; -import SdkConfig from '../../../SdkConfig'; - -let LANGUAGES = []; - -const LANGUAGES_BY_VALUE = new Object(null); function languageMatchesSearchQuery(query, language) { if (language.label.toUpperCase().indexOf(query.toUpperCase()) == 0) return true; @@ -39,31 +34,28 @@ export default class LanguageDropdown extends React.Component { this.state = { searchQuery: '', + langs: null, } } componentWillMount() { - const languageKeys = SdkConfig.get().languages; - - // Build const LANGUAGES in a way that counterpart allows translation inside object: - languageKeys.forEach(function(languageKey) { - var l = {}; - l.id = "language"; - l.label = _t(languageKey); - l.value = languageKey; - LANGUAGES.push(l); - }); - - LANGUAGES = LANGUAGES.sort(function(a, b){ - if(a.label < b.label) return -1; - if(a.label > b.label) return 1; - return 0; - }) - - for (const l of LANGUAGES) { - LANGUAGES_BY_VALUE[l.value] = l; - } - + languageHandler.getAllLanguageKeysFromJson().then((langKeys) => { + const langs = []; + langKeys.forEach((languageKey) => { + langs.push({ + value: languageKey, + label: _t(languageKey) + }); + }); + langs.sort(function(a, b){ + if(a.label < b.label) return -1; + if(a.label > b.label) return 1; + return 0; + }); + this.setState({langs}); + }).catch(() => { + this.setState({langs: ['en']}); + }).done(); if (!this.props.value) { // If no value is given, we start with the first @@ -86,25 +78,20 @@ export default class LanguageDropdown extends React.Component { } render() { + if (this.state.langs === null) { + const Spinner = sdk.getComponent('elements.Spinner'); + return ; + } + const Dropdown = sdk.getComponent('elements.Dropdown'); let displayedLanguages; if (this.state.searchQuery) { - displayedLanguages = LANGUAGES.filter( - languageMatchesSearchQuery.bind(this, this.state.searchQuery), - ); - if ( - this.state.searchQuery.length == 2 && - LANGUAGES_BY_VALUE[this.state.searchQuery.toUpperCase()] - ) { - const matched = LANGUAGES_BY_VALUE[this.state.searchQuery.toUpperCase()]; - displayedLanguages = displayedLanguages.filter((l) => { - return l.id != matched.id; - }); - displayedLanguages.unshift(matched); - } + displayedLanguages = this.state.langs.filter((lang) => { + return languageMatchesSearchQuery(this.state.searchQuery, lang); + }); } else { - displayedLanguages = LANGUAGES; + displayedLanguages = this.state.langs; } const options = displayedLanguages.map((language) => { @@ -126,7 +113,7 @@ export default class LanguageDropdown extends React.Component { return {options}