User setting redesign (#3443)

* [user settings] modification

* [user setting] side nav: show current item & improvement

* [user stting] webdav password: redesigned it

* [user settings] language setting: redesigned it

frontend/src/components/user-settings/language-setting.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Select from 'react-select';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 
@@ -10,40 +11,33 @@ class LanguageSetting extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      dropdownOpen: false,
-    };
   }
 
-    toggle = () => {
-      this.setState({
-        dropdownOpen: !this.state.dropdownOpen
-      });
-    }
+  onSelectChange = (selectedItem) => {
+    // selectedItem: {value: '...', label: '...'}
+    location.href = `${siteRoot}i18n/?lang=${selectedItem.value}`;
+  }
 
-    render() {
-      return (
-        <div className="setting-item" id="lang-setting">
-          <h3 className="setting-item-heading">{gettext('Language Setting')}</h3>
-          <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
-            <DropdownToggle caret>
-              {currentLang}
-            </DropdownToggle>
-            <DropdownMenu>
-              {langList.map((item, index) => {
-                return (
-                  <DropdownItem key={index}>
-                    <a href={`${siteRoot}i18n/?lang=${item.langCode}`} className="text-inherit">
-                      {item.langName}
-                    </a>
-                  </DropdownItem>
-                );
-              })}
-            </DropdownMenu>
-          </Dropdown>
-        </div>
-      );
-    }
+  render() {
+    const options = langList.map((item, index) => {
+      return {
+        value: item.langCode,
+        label: item.langName
+      };
+    });
+
+    return (
+      <div className="setting-item" id="lang-setting">
+        <h3 className="setting-item-heading">{gettext('Language Setting')}</h3>
+        <Select
+          className='w-25'
+          defaultValue={{value: currentLang.langCode, label: currentLang.langName}}
+          options={options}
+          onChange={this.onSelectChange}
+        />
+      </div>
+    );
+  }
 }
 
 export default LanguageSetting;