#1559 Internationalize mobile text using i18n

client/components/mobile/Explorer.jsx

@@ -1,15 +1,19 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Sidebar from './Sidebar';
 import ConnectedFileNode from '../../modules/IDE/components/FileNode';
 
 
-const Explorer = ({ id, canEdit, onPressClose }) => (
-  <Sidebar title="Files" onPressClose={onPressClose}>
-    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
-  </Sidebar>
-);
+const Explorer = ({ id, canEdit, onPressClose }) => {
+  const { t } = useTranslation();
+  return (
+    <Sidebar title={t('Explorer.Files')} onPressClose={onPressClose}>
+      <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
+    </Sidebar>
+  );
+};
 
 Explorer.propTypes = {
   id: PropTypes.number.isRequired,

client/modules/IDE/components/Preferences/PreferenceCreators.jsx

@@ -1,11 +1,16 @@
-export const optionsOnOff = (name, onLabel = 'On', offLabel = 'Off') => [
-  {
-    value: true, label: onLabel, ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-')
-  },
-  {
-    value: false, label: offLabel, ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-')
-  },
-];
+import { useTranslation } from 'react-i18next';
+
+export const optionsOnOff = (name) => {
+  const { t } = useTranslation();
+  return [
+    {
+      value: true, label: t('PreferenceCreators.On'), ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-')
+    },
+    {
+      value: false, label: t('PreferenceCreators.Off'), ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-')
+    }
+  ];
+};
 
 export const optionsPickOne = (name, ...options) => options.map(option => ({
   value: option,

client/modules/IDE/pages/MobileIDEView.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 // Imports to be Refactored
@@ -60,22 +61,24 @@ const NavItem = styled.li`
   position: relative;
 `;
 
-const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) =>
-  (username
+const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) => {
+  const { t } = useTranslation();
+  return (username
     ? [
-      { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
-      { icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` },
-      { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
-      { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
-      { icon: PreferencesIcon, title: 'Logout', action: logoutUser, },
+      { icon: PreferencesIcon, title: t('MobileIDEView.Preferences'), href: '/preferences', },
+      { icon: PreferencesIcon, title: t('MobileIDEView.MyStuff'), href: `/${username}/sketches` },
+      { icon: PreferencesIcon, title: t('MobileIDEView.Examples'), href: '/p5/sketches' },
+      { icon: PreferencesIcon, title: t('MobileIDEView.OriginalEditor'), action: toggleForceDesktop, },
+      { icon: PreferencesIcon, title: t('MobileIDEView.Logout'), action: logoutUser, },
     ]
     : [
-      { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
-      { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
-      { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
-      { icon: PreferencesIcon, title: 'Login', href: '/login', },
+      { icon: PreferencesIcon, title: t('MobileIDEView.Preferences'), href: '/preferences', },
+      { icon: PreferencesIcon, title: t('MobileIDEView.Examples'), href: '/p5/sketches' },
+      { icon: PreferencesIcon, title: t('MobileIDEView.OriginalEditor'), action: toggleForceDesktop, },
+      { icon: PreferencesIcon, title: t('MobileIDEView.Login'), href: '/login', },
     ]
   );
+};
 
 const canSaveProject = (isUserOwner, project, user) =>
   isUserOwner || (user.authenticated && !project.owner);

client/modules/Mobile/MobileDashboardView.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 import { withRouter } from 'react-router';
+import { useTranslation } from 'react-i18next';
 
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
@@ -137,10 +138,13 @@ const Panels = {
 };
 
 
-const navOptions = username => [
-  { title: 'Create Sketch', href: '/' },
-  { title: 'Create Collection', href: `/${username}/collections/create` }
-];
+const navOptions = (username) => {
+  const { t } = useTranslation();
+  return [
+    { title: t('MobileDashboardView.CreateSketch'), href: '/' },
+    { title: t('MobileDashboardView.CreateCollection'), href: `/${username}/collections/create` }
+  ];
+};
 
 
 const getPanel = (pathname) => {
@@ -162,8 +166,14 @@ const MobileDashboard = ({ params, location }) => {
   const user = useSelector(state => state.user);
   const { username: paramsUsername } = params;
   const { pathname } = location;
+  const { t } = useTranslation();
 
   const Tabs = Object.keys(Panels);
+  const TabLabels = {
+    sketches: t('MobileDashboardView.Sketches'),
+    collections: t('MobileDashboardView.Collections'),
+    assets: t('MobileDashboardView.Assets')
+  };
   const isExamples = paramsUsername === EXAMPLE_USERNAME;
   const panel = getPanel(pathname);
 
@@ -173,9 +183,10 @@ const MobileDashboard = ({ params, location }) => {
     align="right"
   />);
 
+
   return (
     <Screen fullscreen key={pathname}>
-      <Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
+      <Header slim inverted title={isExamples ? t('MobileDashboardView.Examples') : t('MobileDashboardView.MyStuff')}>
         <NavItem>
           <IconButton
             onClick={toggleNavDropdown}
@@ -205,7 +216,7 @@ const MobileDashboard = ({ params, location }) => {
                 selected={tab === panel}
                 to={pathname.replace(panel, tab)}
               >
-                <h3>{(isExamples && tab === 'Sketches') ? 'Examples' : tab}</h3>
+                <h3>{(isExamples && tab === 'Sketches') ? t('MobileDashboardView.Examples') : (TabLabels[tab] || tab)}</h3>
               </FooterTab>))
             }
           </FooterTabSwitcher>

client/modules/Mobile/MobilePreferences.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect, useSelector, useDispatch } from 'react-redux';
 import { withRouter } from 'react-router';
+import { useTranslation } from 'react-i18next';
+
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -42,27 +44,33 @@ const MobilePreferences = () => {
     setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput, setLineNumbers, setLintWarning,
   } = bindActionCreators({ ...PreferencesActions, ...IdeActions }, useDispatch());
 
+  const { t } = useTranslation();
 
   const generalSettings = [
     {
-      title: 'Theme',
+      title: t('MobilePreferences.Theme'),
       value: theme,
-      options: optionsPickOne('theme', 'light', 'dark', 'contrast'),
+      options: optionsPickOne(
+        t('MobilePreferences.Theme'),
+        t('MobilePreferences.LightTheme'),
+        t('MobilePreferences.DarkTheme'),
+        t('MobilePreferences.HighContrastTheme')
+      ),
       onSelect: x => setTheme(x) // setTheme
     },
-    preferenceOnOff('Autosave', autosave, setAutosave, 'autosave'),
-    preferenceOnOff('Word Wrap', linewrap, setLinewrap, 'linewrap')
+    preferenceOnOff(t('MobilePreferences.Autosave'), autosave, setAutosave, 'autosave'),
+    preferenceOnOff(t('MobilePreferences.WordWrap'), linewrap, setLinewrap, 'linewrap')
   ];
 
   const outputSettings = [
-    preferenceOnOff('Plain-text', textOutput, setTextOutput, 'text output'),
-    preferenceOnOff('Table-text', gridOutput, setGridOutput, 'table output'),
-    preferenceOnOff('Lint Warning Sound', soundOutput, setSoundOutput, 'sound output')
+    preferenceOnOff(t('MobilePreferences.PlainText'), textOutput, setTextOutput, 'text output'),
+    preferenceOnOff(t('MobilePreferences.TableText'), gridOutput, setGridOutput, 'table output'),
+    preferenceOnOff(t('MobilePreferences.Sound'), soundOutput, setSoundOutput, 'sound output')
   ];
 
   const accessibilitySettings = [
-    preferenceOnOff('Line Numbers', lineNumbers, setLineNumbers),
-    preferenceOnOff('Lint Warning Sound', lintWarning, setLintWarning)
+    preferenceOnOff(t('MobilePreferences.LineNumbers'), lineNumbers, setLineNumbers),
+    preferenceOnOff(t('MobilePreferences.LintWarningSound'), lintWarning, setLintWarning)
   ];
 
   return (
@@ -73,14 +81,14 @@ const MobilePreferences = () => {
         </Header>
         <section className="preferences">
           <Content>
-            <SectionHeader>General Settings</SectionHeader>
+            <SectionHeader>{t('MobilePreferences.GeneralSettings')}</SectionHeader>
             { generalSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
 
-            <SectionHeader>Accessibility</SectionHeader>
+            <SectionHeader>{t('MobilePreferences.Accessibility')}</SectionHeader>
             { accessibilitySettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
 
-            <SectionHeader>Accessible Output</SectionHeader>
-            <SectionSubeader>Used with screen reader</SectionSubeader>
+            <SectionHeader>{t('MobilePreferences.AccessibleOutput')}</SectionHeader>
+            <SectionSubeader>{t('MobilePreferences.UsedScreenReader')}</SectionSubeader>
             { outputSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
 
           </Content>

translations/locales/en-US/translations.json

@@ -538,5 +538,47 @@
   "PreviewNav": {
     "EditSketchARIA": "Edit Sketch",
     "ByUser": "by"
+  },
+  "MobilePreferences": {
+    "Settings": "Settings",
+    "GeneralSettings": "General settings",
+    "Accessibility": "Accessibility",
+    "AccessibleOutput": "Accessible Output",
+    "Theme": "Theme",
+    "LightTheme": "Light",
+    "DarkTheme": "Dark",
+    "HighContrastTheme": "High Contrast",
+    "Autosave": "Autosave",
+    "WordWrap": "Word Wrap",
+    "LineNumbers": "Line numbers",
+    "LintWarningSound": "Lint warning sound",
+    "UsedScreenReader": "Used with screen reader",
+    "PlainText": "Plain-text",
+    "TableText": "Table-text",
+    "Sound": "Sound"
+  },
+  "PreferenceCreators": {
+    "On": "On",
+    "Off": "Off"
+  },
+  "MobileIDEView":{
+    "Preferences": "Preferences",
+    "MyStuff": "My Stuff",
+    "Examples": "Examples",
+    "OriginalEditor": "Original Editor",
+    "Login": "Login",
+    "Logout": "Logout"
+  },
+  "MobileDashboardView": {
+    "Examples": "Examples",
+    "Sketches": "Sketches",
+    "Collections": "Collections",
+    "Assets": "Assets",
+    "MyStuff": "My Stuff",
+    "CreateSketch": "Create Sketch",
+    "CreateCollection": "Create Collection"
+  },
+  "Explorer": {
+    "Files": "Files"
   }
 }

translations/locales/es-419/translations.json

@@ -538,5 +538,47 @@
   "PreviewNav": {
     "EditSketchARIA": "Editar Bosquejo",
     "ByUser": "por"
+  },
+  "MobilePreferences": {
+    "Settings": "Configuración",
+    "GeneralSettings": "Configuración general",
+    "Accessibility": "Accesibilidad",
+    "AccessibleOutput": "Salida accesible",
+    "Theme": "Modo de visualización",
+    "LightTheme": "Claro",
+    "DarkTheme": "Oscuro",
+    "HighContrastTheme": "Alto contraste",
+    "Autosave": "Grabar automáticamente",
+    "WordWrap": "Ajuste automático de línea",
+    "LineNumbers": "Número de línea",
+    "LintWarningSound": "Sonido de alarma Lint",
+    "UsedScreenReader": "Uso con screen reader",
+    "PlainText": "Texto sin formato",
+    "TableText": "Tablero de texto",
+    "Sound": "Sonido"
+  },
+  "PreferenceCreators": {
+    "On": "Activar",
+    "Off": "Desactivar"
+  },
+  "MobileIDEView":{
+    "Preferences": "Preferencias",
+    "MyStuff": "Mis cosas",
+    "Examples": "Ejemplos",
+    "OriginalEditor": "Editor Original",
+    "Login": "Ingresa",
+    "Logout": "Cerrar sesión"
+  },
+  "MobileDashboardView": {
+    "Examples": "Ejemplos",
+    "Sketches": "Bosquejos",
+    "Collections": "Colecciones",
+    "Assets": "Assets",
+    "MyStuff": "Mis cosas",
+    "CreateSketch": "Crear bosquejo",
+    "CreateCollection": "Crear colección"
+  },
+  "Explorer": {
+    "Files": "Archivos"
   }
 }