feat: implement and use initial language switcher component for french

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "history": "4.10.1",
     "i18next": "19.7.0",
+    "i18next-browser-languagedetector": "^6.0.1",
     "lodash.difference": "4.5.0",
     "lodash.intersection": "4.4.0",
     "lodash.union": "4.6.0",

src/components/InfoPage.js

@@ -10,6 +10,7 @@ import InfoParticipants from './InfoParticipants';
 import InfoRecommendation from './InfoRecommendation';
 import InfoReports from './InfoReports';
 import InfoUsage from './InfoUsage';
+import LanguageSwitcher from './LanguageSwitcher';
 
 import styles from './InfoPage.module.css';
 
@@ -21,6 +22,11 @@ function InfoPage() {
       title: { content: t('info.aboutTitle') },
       content: { content: <InfoAbout /> },
     },
+    {
+      key: 'info.language',
+      title: { content: t('app.language') },
+      content: { content: <LanguageSwitcher /> },
+    },
     {
       key: 'info.bugs',
       title: { content: t('info.bugsTitle') },

src/components/LanguageSwitcher.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Button from './Button';
+
+function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+  return (
+    <Button.Group>
+      <Button
+        active={i18n.language !== 'de'}
+        disabled={i18n.language === 'de'}
+        content="deutsch"
+        onClick={() => i18n.changeLanguage('de')}
+      />
+      <Button
+        active={i18n.language !== 'fr'}
+        disabled={i18n.language === 'fr'}
+        content="français"
+        onClick={() => i18n.changeLanguage('fr')}
+      />
+    </Button.Group>
+  );
+}
+
+export default LanguageSwitcher;

src/components/WelcomeModal.js

@@ -5,6 +5,7 @@ import { Icon, Image, Modal } from 'semantic-ui-react';
 
 import Button from './Button';
 import InfoAbout from './InfoAbout';
+import LanguageSwitcher from './LanguageSwitcher';
 import { ReactComponent as Logo } from '../icons/logo.svg';
 import { setWelcomeModal } from '../store/actions';
 import styles from './WelcomeModal.module.css';
@@ -25,6 +26,7 @@ function WelcomeModal() {
         </Modal.Description>
       </Modal.Content>
       <Modal.Actions>
+        <LanguageSwitcher />
         <Button
           active
           data-cypress="welcomeModalGo"

src/i18n/index.js

@@ -1,14 +1,18 @@
 import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import resources from './resources';
 
-i18n.use(initReactI18next).init({
-  lng: 'de',
-  debug: process.env.NODE_ENV === 'development',
-  interpolation: {
-    escapeValue: false, // not needed for React as it escapes by default
-  },
-  resources,
-});
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'de',
+    debug: process.env.NODE_ENV === 'development',
+    interpolation: {
+      escapeValue: false, // not needed for React as it escapes by default
+    },
+    resources,
+  });
 
 export default i18n;

src/i18n/resources/de/translation.json

@@ -6,7 +6,8 @@
     "recommendation": "Empfehlung",
     "result": "Baumartenempfehlung",
     "ribbon": "Test",
-    "title": "Tree App"
+    "title": "Tree App",
+    "language": "Sprache"
   },
   "ecogram": {
     "acid": "Sauer",

src/i18n/resources/fr/index.js

@@ -0,0 +1,3 @@
+import translation from './translation.json';
+
+export default { translation };

src/i18n/resources/index.js

@@ -1,3 +1,4 @@
 import de from './de';
+import fr from './fr';
 
-export default { de };
+export default { de, fr };

yarn.lock

@@ -6309,6 +6309,13 @@ [email protected]:
     slash "^3.0.0"
     which-pm-runs "^1.0.0"
 
+i18next-browser-languagedetector@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.0.1.tgz#83654bc87302be2a6a5a75146ffea97b4ca268cf"
+  integrity sha512-3H+OsNQn3FciomUU0d4zPFHsvJv4X66lBelXk9hnIDYDsveIgT7dWZ3/VvcSlpKk9lvCK770blRZ/CwHMXZqWw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 [email protected]:
   version "19.7.0"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.7.0.tgz#e637bbbf36481d34b7d5e6d3b04e1bb654bf2a26"