Add setup for internationalization

package.json

@@ -4,9 +4,13 @@
   "private": true,
   "dependencies": {
     "caniuse-lite": "^1.0.30000974",
+    "i18next": "^19.0.0",
+    "i18next-browser-languagedetector": "^4.0.1",
+    "i18next-xhr-backend": "^3.2.2",
     "node-sass": "^4.11.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-i18next": "^11.2.1",
     "react-image-magnify": "^2.7.4",
     "react-markdown": "^4.0.8",
     "react-router-dom": "^5.0.1",
@@ -28,4 +32,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

public/locales/en-us/translation.json

@@ -0,0 +1,3 @@
+{
+  "welcome": "Welcome to react and react-i18next"
+}

public/locales/en/translation.json

@@ -0,0 +1,5 @@
+{
+  "about": { "h1": "What is Habitica?" },
+  "disciplina": { "h1": "About the discipline" },
+  "contributors": "Contributors"
+}

src/components/LandingPage/sections/AboutHabitica/AboutHabitica.js

@@ -1,14 +1,18 @@
-import React from 'react'
-import './AboutHabitica.scss'
+import React from "react";
+import "./AboutHabitica.scss";
+import { Trans } from "react-i18next";
 
 const AboutHabitica = () => (
   <section className="content about-habitica">
-    <h1>O que é o Habitica ?</h1>
+    <h1>
+      <Trans i18nKey="about.h1">O que é o Habitica ?</Trans>
+    </h1>
     <p className="about-habitica__text">
-      Habitica é uma aplicação gamificada para ajudar seus usuários a criar ou melhorar hábitos na vida real.
-      O app contém prêmios e punições para motivar o usuário e uma rede social para inspirá-lo.
+      Habitica é uma aplicação gamificada para ajudar seus usuários a criar ou
+      melhorar hábitos na vida real. O app contém prêmios e punições para
+      motivar o usuário e uma rede social para inspirá-lo.
     </p>
   </section>
-)
+);
 
-export default AboutHabitica
+export default AboutHabitica;

src/components/LandingPage/sections/Contributors/Contributors.js

@@ -1,15 +1,20 @@
-import React from 'react'
-import contributors from '../../../../utils/contributors'
-import Contributor from '../../../UI/Contributor/Contributor'
-import './Contributors.scss'
+import React from "react";
+import contributors from "../../../../utils/contributors";
+import Contributor from "../../../UI/Contributor/Contributor";
+import "./Contributors.scss";
+import { Trans } from "react-i18next";
 
 const Contributors = () => (
   <section className="content contributors">
-    <h1>Contribuidores</h1>
+    <h1>
+      <Trans i18nKey="contributors">Contribuidores</Trans>
+    </h1>
     <div className="contributors__container">
-      { contributors.map(contributor => <Contributor key={ contributor.name } { ...contributor }/>) }
+      {contributors.map(contributor => (
+        <Contributor key={contributor.name} {...contributor} />
+      ))}
     </div>
   </section>
-)
+);
 
-export default Contributors
+export default Contributors;

src/components/docs/Disciplina/Disciplina.js

@@ -1,26 +1,43 @@
-import React from 'react'
-import './Disciplina.scss'
+import React from "react";
+import "./Disciplina.scss";
+import { Trans } from "react-i18next";
 
 const Disciplina = () => (
   <div className="content artefact disciplina">
-    <h1>Sobre a Disciplina</h1>
+    <h1>
+      <Trans i18nKey="disciplina.h1">Sobre a Disciplina</Trans>
+    </h1>
 
     <h2>Engenharia de Software</h2>
     <p>
-      A Engenharia de Software é uma disciplina da engenharia dedicada aos aspectos da produção de software. Assim como em toda engenharia, os engenheiros de software adotam abordagens sistemáticas e organizadas, através de diversos conhecimentos específicos, visando criar a melhor solução para um problema, levando em consideração as restrições e recursos disponíveis.
-      O curso de Engenharia de Software da Universidade de Brasília contempla diversas áreas, onde se encontra a disciplina Requisitos de Software.
+      A Engenharia de Software é uma disciplina da engenharia dedicada aos
+      aspectos da produção de software. Assim como em toda engenharia, os
+      engenheiros de software adotam abordagens sistemáticas e organizadas,
+      através de diversos conhecimentos específicos, visando criar a melhor
+      solução para um problema, levando em consideração as restrições e recursos
+      disponíveis. O curso de Engenharia de Software da Universidade de Brasília
+      contempla diversas áreas, onde se encontra a disciplina Requisitos de
+      Software.
     </p>
 
     <h2>Requisitos de Software</h2>
     <p>
-      Engenharia de Requisitos é o ramo da engenharia de Software responsável por elicitar, modelar, validar e rastrear toda a vida útil de um requisito ao decorrer de um projeto. A área se mostra muito importante tendo em vista que a maior parte dos fracassos de produtos de software ocorrem devido à má elicitação de seus requisitos.
-      A disciplina da UnB possui como objetivo capacitar o estudante a compreender conceitos, técnicas, procedimentos e ferramentas para o levantamento de requisitos.
+      Engenharia de Requisitos é o ramo da engenharia de Software responsável
+      por elicitar, modelar, validar e rastrear toda a vida útil de um requisito
+      ao decorrer de um projeto. A área se mostra muito importante tendo em
+      vista que a maior parte dos fracassos de produtos de software ocorrem
+      devido à má elicitação de seus requisitos. A disciplina da UnB possui como
+      objetivo capacitar o estudante a compreender conceitos, técnicas,
+      procedimentos e ferramentas para o levantamento de requisitos.
     </p>
 
     <h2>Grupo 2 - Habitica</h2>
     <p>
-      Ao decorrer da disciplina, a equipe utilizou-se dos conhecimentos adquiridos durante as aulas de Requisitos de Software para consolidar o conhecimento dos casos estudados e serem avaliados pelos professores responsáveis pela matéria.
-      O Grupo 2 é composto pelos seguintes integrantes:
+      Ao decorrer da disciplina, a equipe utilizou-se dos conhecimentos
+      adquiridos durante as aulas de Requisitos de Software para consolidar o
+      conhecimento dos casos estudados e serem avaliados pelos professores
+      responsáveis pela matéria. O Grupo 2 é composto pelos seguintes
+      integrantes:
     </p>
 
     <table cellSpacing="8">
@@ -94,13 +111,16 @@ const Disciplina = () => (
 
     <h2>Professores</h2>
     <p>
-      Os professores responsáveis por ministrar a matéria de Requisitos de Software forneceram os materiais de estudo a respeito do conteúdo dado em sala de aula e avaliaram os grupos pelo seus trabalhos entregues. Os professores responsáveis são:
+      Os professores responsáveis por ministrar a matéria de Requisitos de
+      Software forneceram os materiais de estudo a respeito do conteúdo dado em
+      sala de aula e avaliaram os grupos pelo seus trabalhos entregues. Os
+      professores responsáveis são:
     </p>
     <ul>
       <li>Maurício Serrano</li>
       <li>Milene Serrano</li>
     </ul>
   </div>
-)
+);
 
-export default Disciplina
+export default Disciplina;

src/i18n.js

@@ -0,0 +1,27 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import Backend from "i18next-xhr-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+i18n
+  // load translation using xhr -> see /public/locales
+  // learn more: https://github.com/i18next/i18next-xhr-backend
+  .use(Backend)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    fallbackLng: "pt-br",
+    debug: false,
+
+    interpolation: {
+      escapeValue: false // not needed for react as it escapes by default
+    }
+  });
+
+export default i18n;

src/index.js

@@ -1,5 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import AppWithTranslationFooter from "./App";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import "./i18n";
+
+ReactDOM.render(<AppWithTranslationFooter />, document.getElementById("root"));