Merge pull request #33 from LuisValgoi/issue-16

[ISSUE-16] Refactor i18n
SAP · Oct 21, 2020 · 48587f1 · 48587f1
1 parent 6b04344
commit 48587f1
Show file tree

Hide file tree

Showing 15 changed files with 194 additions and 58 deletions.
diff --git a/packages/ui5-webcomponents-react-seed/README.md b/packages/ui5-webcomponents-react-seed/README.md
@@ -13,9 +13,9 @@ The goal of this repository is to increase the boostrap time spent on a new proj
 
 - Enviroment Variables Up & Running.
 
-- PR Template
+- Internalization Up & Running.
 
-<!-- - Redux Up & Running. -->
+- PR Template.
 
 - IE Support.
 
@@ -78,11 +78,19 @@ Builds the app for production to the `build` folder.
 
 Used to manipulate async request, data fetching, cache and more (no redux / saga anymore).
 
+[Tutorial Link](https://www.youtube.com/watch?v=yccbCol546c), [Random Post](https://blog.bitsrc.io/how-to-start-using-react-query-4869e3d5680d) and [Creator Official Video](https://www.youtube.com/watch?v=seU46c6Jz7E).
+
 ### `react-helmet`
 
 Used to manpilate DOM attributes through JSX such as `<head>`.
 
-[Tutorial Link](https://www.youtube.com/watch?v=yccbCol546c), [Random Post](https://blog.bitsrc.io/how-to-start-using-react-query-4869e3d5680d) and [Creator Official Video](https://www.youtube.com/watch?v=seU46c6Jz7E).
+### `react-i18next`
+
+Used to translate strings and text in the application following the Internationalization pattern.
+
+### `i18next-browser-languagedetector`
+
+Used to identify the browsers culture and change the applications text accordingly.
 
 ### `commitlint`
 

diff --git a/packages/ui5-webcomponents-react-seed/package.json b/packages/ui5-webcomponents-react-seed/package.json
@@ -11,10 +11,13 @@
     "@ui5/webcomponents-icons": "1.0.0-rc.8",
     "@ui5/webcomponents-react": "^0.10.0",
     "axios": "^0.20.0",
+    "i18next": "^19.7.0",
+    "i18next-browser-languagedetector": "^6.0.1",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
+    "react-i18next": "^11.7.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"
   },

diff --git a/packages/ui5-webcomponents-react-seed/public/index.html b/packages/ui5-webcomponents-react-seed/public/index.html
@@ -1,49 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="utf-8"/>
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <meta name="theme-color" content="#000000"/>
-    <meta
-            name="description"
-            content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
 
-    <script data-ui5-config type="application/json">
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="TodoList App" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <title>TodoList App</title>
+  <script data-ui5-config type="application/json">
         {
-            "compactSize": false
+          "theme": "sap_fiori_3",
+          "compactSize": false
+          "language": "EN",
+          "rtl": false
         }
     </script>
 </head>
-<body>
-<noscript>You need to enable JavaScript to run this app.</noscript>
-<div id="root"></div>
-<!--
-  This HTML file is a template.
-  If you open it directly in the browser, you will see an empty page.
 
-  You can add webfonts, meta tags, or analytics to this file.
-  The build step will place the bundled scripts into the <body> tag.
-
-  To begin the development, run `npm start` or `yarn start`.
-  To create a production bundle, use `npm run build` or `yarn build`.
--->
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
 </body>
+
 </html>
diff --git a/packages/ui5-webcomponents-react-seed/src/App.js b/packages/ui5-webcomponents-react-seed/src/App.js
@@ -1,18 +1,22 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { BrowserRouter } from "react-router-dom";
 import { Helmet } from 'react-helmet';
 
+
 import ErrorBoundary from './pages/Fallback/ErrorBoundary';
 import Shell from './components/Shell/Shell';
 import Routes from './routes/Routes';
 
 import './App.css';
 
 function App() {
+  const { t } = useTranslation();
+
   return (
     <BrowserRouter>
-      <Helmet title="Home - TodoList App" />
-      <Shell title='TodoList App' />
+      <Helmet title={t('helmet.title.app')} />
+      <Shell title={t('shell.title')} />
       <div style={{ paddingTop: '44px' }} />
       <ErrorBoundary>
         <Routes />

diff --git a/packages/ui5-webcomponents-react-seed/src/components/Shell/Shell.js b/packages/ui5-webcomponents-react-seed/src/components/Shell/Shell.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 
 import { ShellBar } from '@ui5/webcomponents-react/lib/ShellBar';
@@ -13,15 +14,18 @@ const style = {
 };
 
 const Shell = ({ title, ...props }) => {
+  const { t } = useTranslation();
   const history = useHistory();
 
   return (
     <ShellBar
       data-testid='shell-wrapper'
       style={style.shell}
       onLogoClick={() => history.push(BrowserURL.HOME)}
-      logo={<img alt="SAP Logo" src="https://sap.github.io/ui5-webcomponents/assets/images/sap-logo-svg.svg" />}
       primaryTitle={title}
+      logo={
+        <img alt={t('shell.logo.alt')} src="https://sap.github.io/ui5-webcomponents/assets/images/sap-logo-svg.svg" />
+      }
       {...props} />
   );
 }

diff --git a/packages/ui5-webcomponents-react-seed/src/components/Shell/__snapshots__/Shell.test.js.snap b/packages/ui5-webcomponents-react-seed/src/components/Shell/__snapshots__/Shell.test.js.snap
@@ -7,7 +7,7 @@ exports[`should match snapshot 1`] = `
     style="position: fixed; width: 100%; z-index: 100;"
   >
     <img
-      alt="SAP Logo"
+      alt="shell.logo.alt"
       slot="logo"
       src="https://sap.github.io/ui5-webcomponents/assets/images/sap-logo-svg.svg"
     />

diff --git a/packages/ui5-webcomponents-react-seed/src/index.js b/packages/ui5-webcomponents-react-seed/src/index.js
@@ -12,6 +12,8 @@ import '@ui5/webcomponents-react/dist/Assets';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import './util/i18n';
 import App from './App';
 
+
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/packages/ui5-webcomponents-react-seed/src/locales/en/translation.json b/packages/ui5-webcomponents-react-seed/src/locales/en/translation.json
@@ -0,0 +1,12 @@
+{
+  "helmet.title.app": "TodoList App",
+  "helmet.title.error": "Buggy Component - TodoList App",
+  "helmet.title.notfound": "NotFound - TodoList App",
+  "shell.title": "TodoList Application",
+  "shell.logo.alt": "SAP Logo",
+  "page.error.text": "Ops! There was an error in loading this page",
+  "page.error.alt": "Error",
+  "page.notfound.text": "Hmmm, we could find this URL",
+  "page.notfound.alt": "Not Found",
+  "page.fallback.reload.text": "Reload this page"
+}
diff --git a/packages/ui5-webcomponents-react-seed/src/locales/pt/translation.json b/packages/ui5-webcomponents-react-seed/src/locales/pt/translation.json
@@ -0,0 +1,12 @@
+{
+  "helmet.title.app": "TodoList Applicação",
+  "helmet.title.error": "Component Bugado - TodoList App",
+  "helmet.title.notfound": "Não Encontrado - TodoList App",
+  "shell.title": "TodoList Applicação",
+  "shell.logo.alt": "SAP Logotipo",
+  "page.error.text": "Ops! Houve um erro durante o carregamento desta página",
+  "page.error.alt": "Erro",
+  "page.notfound.text": "Hmmm, não conseguimos encontrar esta página",
+  "page.notfound.alt": "Não Encontrado",
+  "page.fallback.reload.text": "Recarregar"
+}
diff --git a/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Error.js b/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Error.js
@@ -1,14 +1,22 @@
 import React from 'react';
 import { Helmet } from 'react-helmet'
+import { useTranslation } from 'react-i18next';
 
 import error from '../../assets/error.png';
 import Fallback from './Fallback';
 
 const Error = () => {
+  const { t } = useTranslation();
+
   return (
     <>
-      <Helmet title="Buggy Component - TodoList App" />
-      <Fallback image={error} altImage='Error' text='Ops! There was an error in loading this page' reload />
+      <Helmet title={t('helmet.title.error')} />
+      <Fallback
+        image={error}
+        altImage={t('page.error.alt')}
+        text={t('page.error.text')}
+        reload
+      />
     </>
   );
 };

diff --git a/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Fallback.js b/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Fallback.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
 import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
@@ -8,23 +9,34 @@ import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJusti
 import BrowserURL from '../../util/BrowserURL'
 
 const style = {
+  wrapper: {
+    width: '100%',
+    height: '100vh'
+  },
   image: {
     width: '30%'
   }
 };
 
 const Fallback = ({ image, altImage, text, reload }) => {
+  const { t } = useTranslation();
+
   return (
     <FlexBox
-      style={{ width: '100%', height: '100vh' }}
+      style={style.wrapper}
       direction={FlexBoxDirection.Column}
       justifyContent={FlexBoxJustifyContent.Center}
       alignItems={FlexBoxAlignItems.Center}
     >
       <img src={image} style={style.image} alt={altImage} />
       <h3 className='text-center'>{text}</h3>
       {reload && (
-        <a style={{ cursor: 'pointer', color: '#0077FF' }} href={BrowserURL.HOME} target="_self">Reload this page</a>
+        <a
+          style={{ cursor: 'pointer', color: '#0077FF' }}
+          href={BrowserURL.HOME}
+          target="_self">
+          {t('page.fallback.reload.text')}
+        </a>
       )}
     </FlexBox>
   );

diff --git a/packages/ui5-webcomponents-react-seed/src/pages/Fallback/NotFound.js b/packages/ui5-webcomponents-react-seed/src/pages/Fallback/NotFound.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 
 import notfound from '../../assets/notfound.png';
 import Fallback from './Fallback';
 
 const NotFound = () => {
+  const { t } = useTranslation();
+
   return (
     <>
-      <Helmet title="NotFound - TodoList App" />
-      <Fallback image={notfound} altImage='Not Found' text='Hmmm, we could find this URL' />
+      <Helmet title={t('helmet.title.notfound')} />
+      <Fallback
+        image={notfound}
+        altImage={t('page.notfound.alt')}
+        text={t('page.notfound.text')}
+      />
     </>
   );
 };

diff --git a/packages/ui5-webcomponents-react-seed/src/pages/Todo/List/TodoList.js b/packages/ui5-webcomponents-react-seed/src/pages/Todo/List/TodoList.js
@@ -11,13 +11,20 @@ export default function TodoList() {
 
   return (
     <>
-      <Helmet title="List - TodoList App" />
-      <CenteredLink onClick={() => history.push('/dontexist')} text='Test NotFound Page' />
+      <Helmet title='List - TodoList App' />
+      <CenteredLink
+        onClick={() => history.push('/dontexist')}
+        text='Test NotFound Page' />
       <br />
-      <CenteredLink onClick={() => history.push(BrowserURL.BUGGY)} text='Test Error Page' />
+      <CenteredLink
+        onClick={() => history.push(BrowserURL.BUGGY)}
+        text='Test Error Page' />
       <br />
-      <ComponentValidator allowedAuthorities={['canAccessDropApplication']} authorityKey='permissions'>
-        <CenteredLink text='Drop Application (this is a restricted text and you should not see unless you have access)' />
+      <ComponentValidator
+        allowedAuthorities={['canAccessDropApplication']}
+        authorityKey='permissions'>
+        <CenteredLink
+          text='Drop Application (this is a restricted text and you should not see unless you have access)' />
       </ComponentValidator>
     </>
   )

diff --git a/packages/ui5-webcomponents-react-seed/src/util/i18n.js b/packages/ui5-webcomponents-react-seed/src/util/i18n.js
@@ -0,0 +1,31 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import translationEN from '../locales/en/translation.json';
+import translationPT from '../locales/pt/translation.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    debug: true,
+    keySeparator: false,
+    interpolation: {
+      escapeValue: false
+    },
+    resources: {
+      en: {
+        translation: translationEN
+      },
+      pt: {
+        translation: translationPT
+      }
+    },
+    react: {
+      useSuspense: false
+    }
+  });
+
+export default i18n;