From 2275bf4b88c67bf66d0ddb15683dffd8861972d2 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 16 Nov 2020 19:38:16 -0500
Subject: [PATCH] Updated the code links that are mentioned in Technical Part
 since the codes have benn updated and pointed out the different code block.
 Added the details on Nav.js and i18n.js.

---
 developer_docs/translations.md | 41 ++++++++++++++++++++++++++++++++--
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/developer_docs/translations.md b/developer_docs/translations.md
index 584b9137d8..2e624e64c2 100644
--- a/developer_docs/translations.md
+++ b/developer_docs/translations.md
@@ -10,10 +10,47 @@ In order to simplify the translations process the following rules of thumb were
 ## Technical Part
 
 * There is only one file to translate all the texts in any specific language, which is located under the directory, in 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/develop/client/i18n.js#L7)
-* New languages will need to be selected using a dropdown in Nav component, specifically in function [renderLanguageMenu.](https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L550)
+* The new language code must be added to [client/i18n.js](https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L8)
+* New languages will need to be selected using a dropdown in Nav component, specifically in function [renderLanguageMenu.](https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L611)
 * Need to add `TRANSLATIONS_ENABLED=true` to `.env` to activate 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>
+```
+
+#### 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`.
+
+```js
+import { enUS, es, ja, newLanguage } from 'date-fns/locale';
+const availableLanguages = ['en-US', 'es-419', 'ja', 'newLanguage'];
+```
+
+```js
+export function languageKeyToDateLocale(lang) {
+  const languageMap = {
+    'en-US': enUS,
+    'es-419': es,
+    'ja': ja
+    'newLanguage': newLanguage
+  };
+  return languageMap[lang];
+}
+```
+
+
+
 ## Translations
 
 * Every component should introduce its own subset of keys inside a dictionary named after the component.