Fix up language dropdown

* Read languages from the available ones rather than the config
 * Make the search work (add searchEnabled=true)
 * Move variables to the class since they were populated there

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;
+        languageHandler.getAllLanguageKeysFromJson().then((langKeys) => {
-
+            const langs = [];
-        // Build const LANGUAGES in a way that counterpart allows translation inside object:
+            langKeys.forEach((languageKey) => {
-        languageKeys.forEach(function(languageKey) {
+                langs.push({
-            var l = {};
+                    value: languageKey,
-            l.id = "language";
+                    label: _t(languageKey)
-            l.label = _t(languageKey);
+                });
-            l.value = languageKey;
+            });
-            LANGUAGES.push(l);
+            langs.sort(function(a, b){
-        });
+                if(a.label < b.label) return -1;
-
+                if(a.label > b.label) return 1;
-      LANGUAGES = LANGUAGES.sort(function(a, b){
+                return 0;
-                          if(a.label < b.label) return -1;
+            });
-                          if(a.label > b.label) return 1;
+            this.setState({langs});
-                          return 0;
+        }).catch(() => {
-                      })
+            this.setState({langs: ['en']});
-
+        }).done();
-        for (const l of LANGUAGES) {
-            LANGUAGES_BY_VALUE[l.value] = l;
-        }
-
 
         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 <Spinner />;
+        }
+
         const Dropdown = sdk.getComponent('elements.Dropdown');
 
         let displayedLanguages;
         if (this.state.searchQuery) {
-            displayedLanguages = LANGUAGES.filter(
+            displayedLanguages = this.state.langs.filter((lang) => {
-                languageMatchesSearchQuery.bind(this, this.state.searchQuery),
+                return languageMatchesSearchQuery(this.state.searchQuery, lang);
-            );
+            });
-            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);
-            }
         } else {
-            displayedLanguages = LANGUAGES;
+            displayedLanguages = this.state.langs;
         }
 
         const options = displayedLanguages.map((language) => {
@@ -126,7 +113,7 @@ export default class LanguageDropdown extends React.Component {
 
         return <Dropdown className={this.props.className}
             onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
-            value={value}
+            searchEnabled={true} value={value}
         >
             {options}
         </Dropdown>