apps/organisations: add dropdown to remove languages from language-li…

…st-switch

My first thought was to move the tabs into the react component, but that
would have been a lot of effort. Instead (to make it slightly less
confusing), I added a second dropdown (-) to remove languages and use
the first dropdown (+) only add them.

euth/dashboard/static/language_switch/react_language_switch.jsx

@@ -1,7 +1,6 @@
 var PropTypes = require('prop-types')
 var React = require('react')
 var ReactDOM = require('react-dom')
-// var $ = require('jquery')
 
 class LanguageSwitch extends React.Component {
   constructor (props) {
@@ -11,35 +10,32 @@ class LanguageSwitch extends React.Component {
     }
   }
 
-  switchLanguage (e) {
+  addLanguage (e) {
     var languageCode = e.target.textContent
     var index = this.state.activeLanguages.indexOf(languageCode)
     var newActiveLanguages = this.state.activeLanguages.concat([])
     if (index === -1) {
       // adding language
       newActiveLanguages.push(languageCode)
-    } else {
-      // removing language
-      newActiveLanguages.splice(index, 1)
     }
 
     this.setState({
       activeLanguages: newActiveLanguages
     })
-    //, function () {
-    //   var checkbox = $('#' + languageCode + '_language-switch')
-    //   // language was active
-    //   if (!checkbox.is(':checked')) {
-    //     $(this.refs.checkboxList).find(':checked').first().next('a').tab('show')
-    //   } else {
-    //     checkbox.next('a').tab('show')
-    //   }
-    // })
   }
 
-  componentDidMount () {
-    // $(this.refs.toggleButton).dropdown()
-    // $(this.refs.checkboxList).find('.a').tab()
+  removeLanguage (e) {
+    var languageCode = e.target.textContent
+    var index = this.state.activeLanguages.indexOf(languageCode)
+    var newActiveLanguages = this.state.activeLanguages.concat([])
+    if (index !== -1) {
+      // removing language
+      newActiveLanguages.splice(index, 1)
+    }
+
+    this.setState({
+      activeLanguages: newActiveLanguages
+    })
   }
 
   render () {
@@ -70,10 +66,29 @@ class LanguageSwitch extends React.Component {
           </button>
           <ul className="dropdown-menu">
             {
-              this.props.languages.map(languageCode => {
+              this.props.languages.map((languageCode, i) => {
+                return (
+                  <span key={languageCode}>
+                    {this.state.activeLanguages.indexOf(languageCode) === -1 &&
+                      <li key={languageCode}>
+                        <button type="button" onClick={this.addLanguage.bind(this)}>{languageCode}</button>
+                      </li>}
+                  </span>
+                )
+              })
+            }
+          </ul>
+        </div>
+        <div className="dropdown">
+          <button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" ref="toggleButton">
+            <i className="fa fa-minus" />
+          </button>
+          <ul className="dropdown-menu">
+            {
+              this.state.activeLanguages.map(languageCode => {
                 return (
                   <li key={languageCode}>
-                    <button type="button" onClick={this.switchLanguage.bind(this)}>{languageCode}</button>
+                    <button type="button" onClick={this.removeLanguage.bind(this)}>{languageCode}</button>
                   </li>
                 )
               })