Merge pull request #2210 from lindapaiste/refactor/lang-menu

Cleanup language menu code in `Nav` component

Author: raclim

client/components/Nav.jsx

@@ -1,11 +1,11 @@
+import classNames from 'classnames';
+import { sortBy } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
-import { Link } from 'react-router';
-import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
-import { languageKeyToLabel } from '../i18n';
+import { connect } from 'react-redux';
+import { Link, withRouter } from 'react-router';
+import { availableLanguages, 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';
@@ -613,7 +613,6 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">
-              {' '}
               {languageKeyToLabel(this.props.language)}
             </span>
             <TriangleIcon
@@ -623,146 +622,18 @@ class Nav extends React.PureComponent {
             />
           </button>
           <ul className="nav__dropdown">
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="de"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                Deutsch
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="en-US"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                English
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="es-419"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                Español
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="fr-CA"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                Français
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="hi"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                हिन्दी
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="ko"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                한국어
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="it"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                Italiano
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="ja"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                日本語
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="pt-BR"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                Português
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="sv"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                Svenska
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="uk-UA"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                Українська
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="zh-CN"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                简体中文
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="zh-TW"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                正體中文
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="tr"
-                onClick={(e) => this.handleLangSelection(e)}
-              >
-                Türkçe
-              </button>
-            </li>
+            {sortBy(availableLanguages).map((key) => (
+              <li className="nav__dropdown-item" key={key}>
+                <button
+                  onFocus={this.handleFocusForLang}
+                  onBlur={this.handleBlur}
+                  value={key}
+                  onClick={this.handleLangSelection}
+                >
+                  {languageKeyToLabel(key)}
+                </button>
+              </li>
+            ))}
           </ul>
         </li>
       </React.Fragment>

client/i18n.js

@@ -20,7 +20,8 @@ import {
 } from 'date-fns/locale';
 
 const fallbackLng = ['en-US'];
-const availableLanguages = [
+
+export const availableLanguages = [
   'de',
   'en-US',
   'es-419',

contributor_docs/translations.md

@@ -11,32 +11,25 @@ In order to simplify the translations process the following rules of thumb were
 
 * There is only one file to translate all the texts in any specific language, which is located under the directory, in the respective locale [subdirectory](https://github.com/processing/p5.js-web-editor/tree/develop/translations/locales)
 * The new language code must be added to [client/i18n.js](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/i18n.js#L22)
-* New languages will need to be selected using a dropdown in the Nav component, specifically in function [renderLanguageMenu.](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/components/Nav.jsx#L599)
 * Need to add `TRANSLATIONS_ENABLED=true` to `.env` to activate the dropdown for the languages.
 
-#### Nav.js
-Need to add the following code to add a new language as a dropdown menu.
-```js
-<li className="nav__dropdown-item">
-   <button
-      onFocus={this.handleFocusForLang}
-      onBlur={this.handleBlur}
-      value="newLanguageValue"
-      onClick={e => this.handleLangSelection(e)}
-   >
-      new language name in the new language ex: 日本語 (Japanese)
-   </button>
-</li>
-```
+#### Language codes
+We use standard [IETF language codes](https://en.wikipedia.org/wiki/IETF_language_tag) to identify languages.  In most cases, the code is either two lowercase letters representing a language (`ja` for Japanese) or a language code followed by a hyphen and two uppercase letters for a country (`en-US` for American English).
 
 #### i18n.js
-In terms of `i18n.js`, you will need to update 2 things. One is to import a new language from `date-fns/locale`. The other is to add a new language to `languageMap`.
+In terms of `i18n.js`, you will need to update 4 things:
 
+1. Add the code for your language to the array of `availableLanguages`.
 ```js
-import { enUS, es, ja, newLanguage } from 'date-fns/locale';
 const availableLanguages = ['en-US', 'es-419', 'ja', 'newLanguage'];
 ```
 
+2. Import the locale for your language from `date-fns/locale`.  This is used to translate dates and times.
+```js
+import { enUS, es, ja, newLanguage } from 'date-fns/locale';
+```
+
+3. Associate the locale with the country code by adding it to the map in the `languageKeyToDateLocale` function.
 ```js
 export function languageKeyToDateLocale(lang) {
   const languageMap = {
@@ -49,7 +42,18 @@ export function languageKeyToDateLocale(lang) {
 }
 ```
 
-
+4. Add the name of your language to the map in the `languageKeyToLabel` function. This will determine what is shown in the dropdown menu.
+```js
+export function languageKeyToLabel(lang) {
+  const languageMap = {
+    'en-US': 'English',
+    'es-419': 'Español',
+    ja: '日本語',
+    'newLanguage': 'New Language Name'
+  };
+  return languageMap[lang];
+}
+```
 
 ## Translations