[user settings] rewrote it with react

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { gettext, siteRoot } from '../../utils/constants';
+
+const {
+  currentLang, langList
+} = window.app.pageOptions;
+
+class LanguageSetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownOpen: false,
+    };
+  }
+
+    toggle = () => {
+      this.setState({
+        dropdownOpen: !this.state.dropdownOpen
+      });
+    }
+
+    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>
+      );
+    }
+}
+
+export default LanguageSetting;