Wire up LanguageDropdownComponent to use Redux actions and remove local state.

common/components/Header/components/LanguageDropdownComponent.jsx

@@ -1,83 +1,45 @@
 import React, {Component} from 'react'
+import {languages} from 'reducers/config'
+import PropTypes from 'prop-types';
 
-const languages = [
-    {
-        'sign': 'en',
-        'name': 'English'
-    },
-    {
-        'sign': 'de',
-        'name': 'Deutsch'
-    },
-    {
-        'sign': 'el',
-        'name': 'Ελληνικά'
-    },
-    // {
-    //     "sign": 'el',
-    //     "name": 'Ελληνικά'
-    // },
-    // {
-    //     "sign": 'el',
-    //     "name": 'Ελληνικά'
-    // },
-    // {
-    //     "sign": 'el',
-    //     "name": 'Ελληνικά'
-    // },
-    // {
-    //     "sign": 'el',
-    //     "name": 'Ελληνικά'
-    // },
-    // {
-    //     "sign": 'el',
-    //     "name": 'Ελληνικά'
-    // },
-
-]
 
 export default class LanguageDropdownComponent extends Component {
     constructor(props) {
         super(props);
-
-        this.state = {
-            languageToggle: false,
-            languageSelection: 0
-        }
     }
 
-    languageToggle() {
+    static propTypes = {
-        let nextState = this.state;
+        changeLanguage: PropTypes.func,
-        nextState['languageToggle'] = !nextState['languageToggle'];
+        languageSelection: PropTypes.number,
-        this.setState(nextState)
+        languageToggle: PropTypes.bool,
-    }
+        toggleLanguageDropdown: PropTypes.func
-
+    };
-
-    changeLanguage(i) {
-        let nextState = this.state;
-        nextState["languageSelection"] = i;
-        nextState['languageToggle'] = false;
-        this.setState(nextState);
-    }
 
     render() {
+        let {
+            languageSelection,
+            changeLanguage,
+            toggleLanguageDropdown,
+            languageToggle
+        } = this.props;
+
         return (
             <span className="dropdown">
               <a tabIndex="0" aria-haspopup="true" aria-expanded="false"
                  aria-label="change language. current language English"
                  className="dropdown-toggle"
-                 onClick={() => this.languageToggle()}>
+                 onClick={() => toggleLanguageDropdown()}>
-                  {languages[this.state.languageSelection].name}
+                  {languages[languageSelection].name}
                   <i className="caret"/>
               </a>
                 {
-                    this.state.languageToggle &&
+                    languageToggle &&
                     <ul className="dropdown-menu">
                         {languages.map((object, i) => {
                             return (
                                 <li key={i}>
-                                    <a className={i === this.state.languageSelection ? 'active' : ''}
+                                    <a className={i === languageSelection ? 'active' : ''}
-                                       onClick={() => this.changeLanguage(i)}>
+                                       onClick={() => changeLanguage(i)}>
                                         {object.name}
                                     </a>
                                 </li>