From b306d1cd9b26a602f3afc9e5989fe54c11315c7e Mon Sep 17 00:00:00 2001
From: ivan <ivan@opensupports.com>
Date: Tue, 11 Oct 2016 20:24:52 -0300
Subject: [PATCH] Ivan - Create LanguageSelector component (abstraction from
 header) [skip ci]

---
 .../src/app-components/language-selector.js   | 78 +++++++++++++++++++
 .../tickets/admin-panel-custom-responses.js   |  2 +-
 client/src/app/main/main-layout-header.js     | 47 ++---------
 3 files changed, 84 insertions(+), 43 deletions(-)
 create mode 100644 client/src/app-components/language-selector.js

diff --git a/client/src/app-components/language-selector.js b/client/src/app-components/language-selector.js
new file mode 100644
index 00000000..e4bce9ba
--- /dev/null
+++ b/client/src/app-components/language-selector.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import classNames from 'classnames';
+import DropDown from 'core-components/drop-down';
+
+const codeLanguages = {
+    'English': 'us',
+    'Spanish': 'es',
+    'German': 'de',
+    'French': 'fr',
+    'Chinese': 'cn',
+    'Turkish': 'tr',
+    'Indian': 'in'
+};
+const languages = Object.keys(codeLanguages);
+
+class LanguageSelector extends React.Component {
+    static propTypes = {
+        language: React.PropTypes.oneOf(languages)
+    };
+
+    render() {
+        return (
+            <DropDown {...this.getProps()}/>
+        );
+    }
+
+    getProps() {
+        return {
+            className: this.getClass(),
+            items: this.getLanguageList(),
+            selectedIndex: languages.map((key) => codeLanguages[key]).indexOf(this.getPropLanguage()),
+            onChange: this.changeLanguage.bind(this)
+        };
+    }
+
+    getClass() {
+        let classes = {
+            'language-selector': true
+        };
+
+        classes[this.props.className] = (this.props.className);
+
+        return classNames(classes);
+    }
+
+    getLanguageList() {
+        return languages.map((language) => {
+            return {
+                content: language,
+                icon: codeLanguages[language]
+            };
+        });
+    }
+
+    getPropLanguage() {
+        let language = this.props.language;
+
+        if (language === 'en') {
+            language = 'us';
+        }
+
+        return language;
+    }
+
+    changeLanguage(event) {
+        let language = codeLanguages[languages[event.index]];
+
+        if (language === 'us') {
+            language = 'en';
+        }
+
+        if (this.props.onChange) {
+            this.props.onChange(language);
+        }
+    }
+}
+
+export default LanguageSelector;
\ No newline at end of file
diff --git a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js
index 14f9c5d4..5b5b9e75 100644
--- a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js
+++ b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js
@@ -14,7 +14,7 @@ class AdminPanelCustomResponses extends React.Component {
     };
     
     componentDidMount() {
-        if(!this.props.loaded) {
+        if (!this.props.loaded) {
             this.props.dispatch(AdminDataActions.retrieveCustomResponses());
         }
     }
diff --git a/client/src/app/main/main-layout-header.js b/client/src/app/main/main-layout-header.js
index dc0d4ac3..00ff3f41 100644
--- a/client/src/app/main/main-layout-header.js
+++ b/client/src/app/main/main-layout-header.js
@@ -2,21 +2,10 @@ import React              from 'react';
 import { connect }        from 'react-redux'
 
 import i18n               from 'lib-app/i18n';
-import SessionActions     from 'actions/session-actions';
 import ConfigActions      from 'actions/config-actions';
 
+import LanguageSelector   from 'app-components/language-selector';
 import Button             from 'core-components/button';
-import DropDown           from 'core-components/drop-down';
-
-let codeLanguages = {
-    'English': 'us',
-    'Spanish': 'es',
-    'German': 'de',
-    'French': 'fr',
-    'Chinese': 'cn',
-    'Turkish': 'tr',
-    'Indian': 'in'
-};
 
 class MainLayoutHeader extends React.Component {
 
@@ -24,7 +13,7 @@ class MainLayoutHeader extends React.Component {
         return (
             <div className="main-layout-header">
                 {this.renderAccessLinks()}
-                <DropDown {...this.getLanguageSelectorProps()}/>
+                <LanguageSelector {...this.getLanguageSelectorProps()} />
             </div>
         );
     }
@@ -43,7 +32,7 @@ class MainLayoutHeader extends React.Component {
             result = (
                 <div className="main-layout-header__login-links">
                     <Button type="clean" route={{to:'/'}}>{i18n('LOG_IN')}</Button>
-                    <Button type="clean" route={{to:'/signup'}}>Sign up</Button>
+                    <Button type="clean" route={{to:'/signup'}}>{i18n('SIGN_UP')}</Button>
                 </div>
             );
         }
@@ -54,38 +43,12 @@ class MainLayoutHeader extends React.Component {
     getLanguageSelectorProps() {
         return {
             className: 'main-layout-header__languages',
-            items: this.getLanguageList(),
-            selectedIndex: Object.keys(codeLanguages).map((key) => codeLanguages[key]).indexOf(this.getPropLanguage()),
+            language: this.props.config.language,
             onChange: this.changeLanguage.bind(this)
         };
     }
 
-    getLanguageList() {
-        return Object.keys(codeLanguages).map((language) => {
-            return {
-                content: language,
-                icon: codeLanguages[language]
-            };
-        });
-    }
-
-    getPropLanguage() {
-        let language = this.props.config.language;
-
-        if (language === 'en') {
-            language = 'us';
-        }
-
-        return language;
-    }
-
-    changeLanguage(event) {
-        let language = codeLanguages[Object.keys(codeLanguages)[event.index]];
-
-        if (language === 'us') {
-            language = 'en';
-        }
-
+    changeLanguage(language) {
         this.props.dispatch(ConfigActions.changeLanguage(language));
     }
 }