From bed6a56fb9942507268034001ae04d54930cc47d Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 19 Aug 2020 15:00:56 -0400
Subject: [PATCH 1/5] Add prorotype of language selector design

---
 client/components/Nav.jsx | 14 +++++++++-----
 client/i18n.js            |  8 ++++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 4056607f31..327dcd547b 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -6,6 +6,7 @@ import { Link } from 'react-router';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 import i18next from 'i18next';
+import { languageKeyToLabel } from '../i18n';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
 import * as projectActions from '../modules/IDE/actions/project';
@@ -549,7 +550,7 @@ class Nav extends React.PureComponent {
 
   renderLanguageMenu(navDropdownState) {
     return (
-      <ul className="nav__items-right" title="user-menu">
+      <React.Fragment>
         <li className={navDropdownState.lang}>
           <button
             onClick={this.toggleDropdownForLang}
@@ -561,7 +562,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
+            <span className="nav__item-header"> {languageKeyToLabel(this.props.language)}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -597,7 +598,7 @@ class Nav extends React.PureComponent {
             </li>
           </ul>
         </li>
-      </ul>
+      </React.Fragment>
     );
   }
 
@@ -605,6 +606,7 @@ class Nav extends React.PureComponent {
   renderUnauthenticatedUserMenu(navDropdownState) {
     return (
       <ul className="nav__items-right" title="user-menu">
+        {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
         <li className="nav__item">
           <Link to="/login" className="nav__auth-button">
             <span className="nav__item-header">{this.props.t('Nav.Login')}</span>
@@ -623,6 +625,7 @@ class Nav extends React.PureComponent {
   renderAuthenticatedUserMenu(navDropdownState) {
     return (
       <ul className="nav__items-right" title="user-menu">
+        {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
         <li className="nav__item">
           <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
         </li>
@@ -755,7 +758,6 @@ class Nav extends React.PureComponent {
       <header>
         <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
           {this.renderLeftLayout(navDropdownState)}
-          {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
           {this.renderUserMenu(navDropdownState)}
         </nav>
       </header>
@@ -809,6 +811,7 @@ Nav.propTypes = {
   }),
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
 };
 
 Nav.defaultProps = {
@@ -829,7 +832,8 @@ function mapStateToProps(state) {
     project: state.project,
     user: state.user,
     unsavedChanges: state.ide.unsavedChanges,
-    rootFile: state.files.filter(file => file.name === 'root')[0]
+    rootFile: state.files.filter(file => file.name === 'root')[0],
+    language: state.preferences.language
   };
 }
 
diff --git a/client/i18n.js b/client/i18n.js
index 66131bab04..4871e50063 100644
--- a/client/i18n.js
+++ b/client/i18n.js
@@ -6,6 +6,14 @@ import Backend from 'i18next-http-backend';
 const fallbackLng = ['en-US'];
 const availableLanguages = ['en-US', 'es-419'];
 
+export function languageKeyToLabel(lang) {
+  const languageMap = {
+    'en-US': 'English',
+    'es-419': 'Español'
+  };
+  return languageMap[lang];
+}
+
 const options = {
   loadPath: '/locales/{{lng}}/translations.json',
   requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })

From bf1d7da96044d47849a311825417ed02c8d7e655 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 19 Aug 2020 15:14:48 -0400
Subject: [PATCH 2/5] Adjust authenticated nav to consolidate Account dropdown

---
 client/components/Nav.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 327dcd547b..2f5e13e9de 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -626,10 +626,6 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-right" title="user-menu">
         {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
-        <li className="nav__item">
-          <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
-        </li>
-        <span className="nav__item-spacer">|</span>
         <li className={navDropdownState.account}>
           <button
             className="nav__item-header"
@@ -642,7 +638,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            {this.props.t('Nav.Auth.MyAccount')}
+            <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">

From 108135e7e5ccf155e8fbc2dbe61a16dc7606612e Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Mon, 24 Aug 2020 21:48:09 +0100
Subject: [PATCH 3/5] Necesita las pruebas de Andrew

---
 client/components/Nav.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 2f5e13e9de..cbbcb7031a 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -5,7 +5,6 @@ import { withRouter } from 'react-router';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
-import i18next from 'i18next';
 import { languageKeyToLabel } from '../i18n';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
@@ -807,7 +806,7 @@ Nav.propTypes = {
   }),
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
-  language: PropTypes.string.isRequired,
+  language: PropTypes.string,
 };
 
 Nav.defaultProps = {
@@ -820,7 +819,8 @@ Nav.defaultProps = {
   warnIfUnsavedChanges: undefined,
   params: {
     username: undefined
-  }
+  },
+  language: 'en-US'
 };
 
 function mapStateToProps(state) {

From 61cee775c2af6f9cde87f760f7996e8c21ac66ba Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Thu, 27 Aug 2020 12:21:10 +0100
Subject: [PATCH 4/5] Removing default value for language.

---
 client/components/Nav.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index cbbcb7031a..1aff392709 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -806,7 +806,7 @@ Nav.propTypes = {
   }),
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
-  language: PropTypes.string,
+  language: PropTypes.string.isRequired,
 };
 
 Nav.defaultProps = {
@@ -819,8 +819,7 @@ Nav.defaultProps = {
   warnIfUnsavedChanges: undefined,
   params: {
     username: undefined
-  },
-  language: 'en-US'
+  }
 };
 
 function mapStateToProps(state) {

From c2dbbdb5798e2cb9dbaa5596c4c7c315cdf1c5de Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Thu, 27 Aug 2020 14:31:11 +0100
Subject: [PATCH 5/5] Adding language in NavTest

---
 client/components/__test__/Nav.test.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/components/__test__/Nav.test.jsx b/client/components/__test__/Nav.test.jsx
index ee175fe7df..791db4902c 100644
--- a/client/components/__test__/Nav.test.jsx
+++ b/client/components/__test__/Nav.test.jsx
@@ -46,7 +46,8 @@ describe('Nav', () => {
       id: 'root-file'
     },
     t: jest.fn(),
-    setLanguage: jest.fn()
+    setLanguage: jest.fn(),
+    language: 'en-US'
   };
 
   it('renders correctly', () => {