[DEMO CODE] implements i18next support

cypress/support/navigatorStubs.js

@@ -0,0 +1,35 @@
+const stubLanguages = language => {
+  return {
+    onBeforeLoad(win) {
+      Object.defineProperty(
+        win.navigator,
+        'language',
+        {
+          value: language[0]
+        }
+      );
+      Object.defineProperty(
+        win.navigator,
+        "languages",
+        {
+          value: [language[0], language[1]]
+        }
+      );
+    }
+  }
+}
+
+const stubLanguage = language => {
+  return {
+    onBeforeLoad(win) {
+      Object.defineProperty(
+        win.navigator,
+        'language',
+        {
+          get: cy.stub().returns(language).as('language')
+        }
+      )
+    }
+  }
+}
+export { stubLanguage, stubLanguages }

package.json

@@ -8,9 +8,13 @@
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
     "grommet": "^2.11.2",
+    "i18next": "^19.3.3",
+    "i18next-browser-languagedetector": "^4.0.2",
+    "i18next-xhr-backend": "^3.2.2",
     "polished": "^3.4.4",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-i18next": "^11.3.4",
     "react-redux": "^7.2.0",
     "react-scripts": "3.4.0",
     "redux": "^4.0.5",

public/locales/en/translation.json

@@ -0,0 +1,10 @@
+{
+  "header": {
+    "headline": "Urban Living {{key}}",
+    "tagline": "A source of work / life inspiration for young professionals."
+  },
+  "languages": {
+    "english": "English",
+    "swedish": "Swedish"
+  }
+}

public/locales/sv/translation.json

@@ -0,0 +1,10 @@
+{
+  "header": {
+    "headline": "Urban Livsstil",
+    "tagline": "En härlig tagline på svenska bör läggas till"
+  },
+  "languages": {
+    "english": "Engelska",
+    "swedish": "Svenska"
+  }
+}

src/App.jsx

@@ -1,23 +1,33 @@
-import React, { Component } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import ArticleList from "./components/ArticleList";
 import { Grommet, Main, Heading } from "grommet";
 import { grommet } from "grommet/themes";
 import SpecificArticle from "./components/SpecificArticle";
+import { useTranslation } from 'react-i18next'
+import i18n from './i18n'
 
-class App extends Component {
-  render() {
-    return (
-      <Grommet full theme={grommet}>
-        <Main fill align="center" justify="center">
-          <Heading>Urban Living</Heading>A source of work / life inspiration for
-          young professionals.
-          {this.props.state.showArticleList && <ArticleList />}
-          {this.props.state.readArticle && <SpecificArticle />}
-        </Main>
-      </Grommet>
-    );
-  }
+
+const App = props => {
+  const { t } = useTranslation()
+
+  return (
+    <Grommet full theme={grommet}>
+      <Main fill align="center" justify="center">
+        <Heading>{t('header.headline', { key: 'value' })}</Heading>{t('header.tagline')}
+        <small
+          style={{ cursor: 'pointer' }}
+          onClick={() => i18n.changeLanguage('sv')}
+        >{t('languages.swedish')}</small>
+        <small
+          style={{ cursor: 'pointer' }}
+          onClick={() => i18n.changeLanguage('en')}
+        >{t('languages.english')}</small>
+        {props.state.showArticleList && <ArticleList />}
+        {props.state.readArticle && <SpecificArticle />}
+      </Main>
+    </Grommet>
+  )
 }
 
 const mapStateToProps = state => {

src/components/ArticleList.jsx

@@ -14,7 +14,7 @@ class ArticleList extends Component {
     });
   }
 
-  async articleFetcher (event) {
+  async articleFetcher(event) {
     let id = event.target.dataset.id
     let response = await axios.get(`/articles/${id}`)
     this.props.dispatch({

src/i18n.js

@@ -0,0 +1,21 @@
+import i18n from 'i18next'
+import Backend from 'i18next-xhr-backend'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { initReactI18next } from 'react-i18next'
+
+const fallbackLng = ['en']
+const availableLanguages = ['en', 'sv']
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init(
+    {
+      fallbackLng,
+      whitelist: availableLanguages,
+      interpolation: { escapeValue: true }
+    }
+  )
+
+export default i18n

src/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
@@ -14,14 +14,11 @@ axios.defaults.baseURL = "http://localhost:3000/api/";
 const store = configureStore();
 window.store = store;
 
-
 ReactDOM.render(
-	<Provider store={store}>
-		<App />
-	</Provider>, document.getElementById('root'));
-
-serviceWorker.unregister();
+  <Provider store={store}>
+    <Suspense fallback={(<div>Loading...</div>)}>
+      <App />
+    </Suspense>
+  </Provider>, document.getElementById('root'));
 
-if (window.Cypress) {
-  window.store = store
-}
+serviceWorker.unregister();