Prototype with proposed i18n architecture

client/components/__test__/Nav.test.jsx

@@ -44,7 +44,8 @@ describe('Nav', () => {
     setToastText: jest.fn(),
     rootFile: {
       id: 'root-file'
-    }
+    },
+    t: jest.fn()
   };
   const getWrapper = () => shallow(<NavComponent {...props} />);
 

client/components/__test__/__snapshots__/Nav.test.jsx.snap

@@ -30,9 +30,7 @@ exports[`Nav renders correctly 1`] = `
         >
           <span
             className="nav__item-header"
-          >
-            File
-          </span>
+          />
           <test-file-stub
             aria-hidden="true"
             className="nav__item-header-triangle"
@@ -49,9 +47,7 @@ exports[`Nav renders correctly 1`] = `
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
-            >
-              New
-            </button>
+            />
           </li>
           <li
             className="nav__dropdown-item"
@@ -60,9 +56,7 @@ exports[`Nav renders correctly 1`] = `
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
-            >
-              Duplicate
-            </button>
+            />
           </li>
           <li
             className="nav__dropdown-item"
@@ -71,9 +65,7 @@ exports[`Nav renders correctly 1`] = `
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
-            >
-              Share
-            </button>
+            />
           </li>
           <li
             className="nav__dropdown-item"
@@ -82,9 +74,7 @@ exports[`Nav renders correctly 1`] = `
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
-            >
-              Download
-            </button>
+            />
           </li>
           <li
             className="nav__dropdown-item"
@@ -94,9 +84,7 @@ exports[`Nav renders correctly 1`] = `
               onClick={[Function]}
               onFocus={[Function]}
               style={Object {}}
-            >
-              Open
-            </a>
+            />
           </li>
         </ul>
       </li>
@@ -111,9 +99,7 @@ exports[`Nav renders correctly 1`] = `
         >
           <span
             className="nav__item-header"
-          >
-            Edit
-          </span>
+          />
           <test-file-stub
             aria-hidden="true"
             className="nav__item-header-triangle"
@@ -131,7 +117,6 @@ exports[`Nav renders correctly 1`] = `
               onClick={[Function]}
               onFocus={[Function]}
             >
-              Tidy Code
               <span
                 className="nav__keyboard-shortcut"
               >
@@ -148,7 +133,6 @@ exports[`Nav renders correctly 1`] = `
               onClick={[Function]}
               onFocus={[Function]}
             >
-              Find
               <span
                 className="nav__keyboard-shortcut"
               >
@@ -165,7 +149,6 @@ exports[`Nav renders correctly 1`] = `
               onClick={[Function]}
               onFocus={[Function]}
             >
-              Find Next
               <span
                 className="nav__keyboard-shortcut"
               >
@@ -182,7 +165,6 @@ exports[`Nav renders correctly 1`] = `
               onClick={[Function]}
               onFocus={[Function]}
             >
-              Find Previous
               <span
                 className="nav__keyboard-shortcut"
               >
@@ -206,9 +188,7 @@ exports[`Nav renders correctly 1`] = `
         >
           <span
             className="nav__item-header"
-          >
-            Sketch
-          </span>
+          />
           <test-file-stub
             aria-hidden="true"
             className="nav__item-header-triangle"
@@ -225,9 +205,7 @@ exports[`Nav renders correctly 1`] = `
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
-            >
-              Add File
-            </button>
+            />
           </li>
           <li
             className="nav__dropdown-item"
@@ -236,9 +214,7 @@ exports[`Nav renders correctly 1`] = `
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
-            >
-              Add Folder
-            </button>
+            />
           </li>
           <li
             className="nav__dropdown-item"
@@ -248,7 +224,6 @@ exports[`Nav renders correctly 1`] = `
               onClick={[Function]}
               onFocus={[Function]}
             >
-              Run
               <span
                 className="nav__keyboard-shortcut"
               >
@@ -265,7 +240,6 @@ exports[`Nav renders correctly 1`] = `
               onClick={[Function]}
               onFocus={[Function]}
             >
-              Stop
               <span
                 className="nav__keyboard-shortcut"
               >
@@ -289,9 +263,7 @@ exports[`Nav renders correctly 1`] = `
         >
           <span
             className="nav__item-header"
-          >
-            Help
-          </span>
+          />
           <test-file-stub
             aria-hidden="true"
             className="nav__item-header-triangle"
@@ -308,9 +280,7 @@ exports[`Nav renders correctly 1`] = `
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
-            >
-              Keyboard Shortcuts
-            </button>
+            />
           </li>
           <li
             className="nav__dropdown-item"
@@ -322,9 +292,7 @@ exports[`Nav renders correctly 1`] = `
               onFocus={[Function]}
               rel="noopener noreferrer"
               target="_blank"
-            >
-              Reference
-            </a>
+            />
           </li>
           <li
             className="nav__dropdown-item"
@@ -334,9 +302,7 @@ exports[`Nav renders correctly 1`] = `
               onClick={[Function]}
               onFocus={[Function]}
               style={Object {}}
-            >
-              About
-            </a>
+            />
           </li>
         </ul>
       </li>

client/i18n.js

@@ -0,0 +1,38 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
+
+const fallbackLng = ['en-US'];
+const availableLanguages = ['en-US', 'es-419'];
+
+const options = {
+  loadPath: '/translations/{{lng}}/translations.json',
+  requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })
+    mode: 'no-cors'
+  },
+  allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading
+};
+
+i18n
+  .use(initReactI18next) // pass the i18n instance to react-i18next.
+  .use(LanguageDetector)// to detect the language from currentBrowser
+  .use(Backend) // to fetch the data from server
+  .init({
+    lng: 'en-US',
+    defaultNS: 'WebEditor',
+    fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
+    debug: false,
+    backend: options,
+    getAsync: false,
+    initImmediate: false,
+    useSuspense: true,
+    whitelist: availableLanguages,
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+    saveMissing: false, // if a key is not found AND this flag is set to true, i18next will call the handler missingKeyHandler
+    missingKeyHandler: false // function(lng, ns, key, fallbackValue) { }  custom logic about how to handle the missing keys
+  });
+
+export default i18n;

client/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { render } from 'react-dom';
 import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
@@ -7,6 +7,8 @@ import { Router, browserHistory } from 'react-router';
 import configureStore from './store';
 import routes from './routes';
 import ThemeProvider from './modules/App/components/ThemeProvider';
+import Loader from './modules/App/components/loader';
+import i18n from './i18n';
 
 require('./styles/main.scss');
 
@@ -29,6 +31,8 @@ const App = () => (
 const HotApp = hot(App);
 
 render(
-  <HotApp />,
+  <Suspense fallback={(<Loader />)}>
+    <HotApp />
+  </Suspense>,
   document.getElementById('root')
 );

client/modules/IDE/components/About.jsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-
+import { useTranslation } from 'react-i18next';
 import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
 // import PlayIcon from '../../../images/play.svg';
 import AsteriskIcon from '../../../images/p5-asterisk.svg';
 
 function About(props) {
+  const { t } = useTranslation();
   return (
     <div className="about__content">
       <Helmet>
-        <title>p5.js Web Editor | About</title>
+        <title>p5.js Web Editor | About </title>
       </Helmet>
       <div className="about__content-column">
         <SquareLogoIcon className="about__logo" role="img" aria-label="p5.js Logo" focusable="false" />
@@ -25,15 +26,15 @@ function About(props) {
         </p>  */}
       </div>
       <div className="about__content-column">
-        <h3 className="about__content-column-title">New to p5.js?</h3>
+        <h3 className="about__content-column-title">{t('NewP5')}</h3>
         <p className="about__content-column-list">
           <a
             href="https://p5js.org/examples/"
             target="_blank"
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            Examples
+            {t('Examples')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -43,20 +44,20 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            Learn
+            {t('Learn')}
           </a>
         </p>
       </div>
       <div className="about__content-column">
-        <h3 className="about__content-column-title">Resources</h3>
+        <h3 className="about__content-column-title">{t('Resources')}</h3>
         <p className="about__content-column-list">
           <a
             href="https://p5js.org/libraries/"
             target="_blank"
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            Libraries
+            {t('Libraries')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -66,7 +67,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            Reference
+            {t('Reference')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -76,7 +77,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            Forum
+            {t('Forum')}
           </a>
         </p>
       </div>
@@ -86,15 +87,15 @@ function About(props) {
             href="https://github.com/processing/p5.js-web-editor"
             target="_blank"
             rel="noopener noreferrer"
-          >Contribute
+          >{t('Contribute')}
           </a>
         </p>
         <p className="about__footer-list">
           <a
             href="https://github.com/processing/p5.js-web-editor/issues/new"
             target="_blank"
             rel="noopener noreferrer"
-          >Report a bug
+          >{t('Report')}
           </a>
         </p>
         <p className="about__footer-list">