Localization (and language chooser)...

src/i18n/index.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import LocalizedStrings from 'react-localization';
 
 const strings = new LocalizedStrings({
@@ -9,6 +8,7 @@ const strings = new LocalizedStrings({
     cancel: 'Cancel',
     close: 'Close',
     settings: 'Settings',
+    language: 'Language',
     user: 'User',
     pseudo: 'Pseudo',
     geolocation: 'Geolocation',
@@ -38,6 +38,15 @@ const strings = new LocalizedStrings({
 
     chooseYourMap: 'Choose your map',
 
+    languageSelect: {
+      placeHolder: 'Select your language',
+      choices: [
+        { value: 'auto', label: 'Automatic' },
+        { value: 'en', label: 'English' },
+        { value: 'fr', label: 'Français' },
+      ],
+    },
+
     tracks: 'Tracks',
   },
   fr: {
@@ -47,6 +56,7 @@ const strings = new LocalizedStrings({
     cancel: 'Annuler',
     close: 'Fermer',
     settings: 'Paramètres',
+    language: 'Langue',
     user: 'Utilisateur',
     pseudo: 'Pseudo',
     geolocation: 'Géolocalisation',
@@ -86,8 +96,25 @@ const strings = new LocalizedStrings({
 
     chooseYourMap: 'Choisissez votre carte',
 
+    languageSelect: {
+      placeHolder: 'Selectionner votre langue',
+      choices: [
+        { value: 'auto', label: 'Automatique' },
+        { value: 'fr', label: 'Français' },
+        { value: 'en', label: 'English' },
+      ],
+    },
+
     tracks: 'Traces',
   },
 });
 
 export default strings;
+
+export const setI18nLanguage = (language: string) => {
+  if (language === undefined || language === 'auto') {
+    strings.setLanguage(strings.getInterfaceLanguage());
+  } else {
+    strings.setLanguage(language);
+  }
+};