Localization (and language chooser)...

src/components/map/GpxRecord.tsx

@@ -29,7 +29,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { mapActions } from '../../store/map';
 import { SettingsState } from '../../store/settings';
 
-import i18n from '../../i18n/index';
+import i18n, { setI18nLanguage } from '../../i18n/index';
 
 
 declare global {
@@ -37,6 +37,13 @@ declare global {
 }
 
 const GpxRecord: React.FC<{}> = () => {
+
+  const language = useSelector(
+    (state: { settings: SettingsState }) => state.settings.language
+  );
+
+  setI18nLanguage(language);
+
   const db = useDB();
 
   const [isRecording, setIsRecording] = useState(false);

src/components/map/Settings.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useRef } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 
 import { useDB } from 'react-pouchdb';
 
@@ -13,6 +13,8 @@ import {
   IonList,
   IonListHeader,
   IonModal,
+  IonSelect,
+  IonSelectOption,
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
@@ -22,7 +24,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { settingsActions, SettingsState } from '../../store/settings';
 import uri from '../../lib/ids';
 import _ from 'lodash';
-import i18n from '../../i18n/index';
+import i18n, { setI18nLanguage } from '../../i18n/index';
 
 const Settings: React.FC<{}> = () => {
   const dispatch = useDispatch();
@@ -66,18 +68,18 @@ const Settings: React.FC<{}> = () => {
       };
       settingsFromRedux();
     }
+    setLocalLanguage(settingsState.language);
   }, [db, settingsState]);
 
+  const [localLanguage, setLocalLanguage] = useState(settingsState.language);
+
+  const languageSelect = useRef<HTMLIonSelectElement>(null);
   const pseudo = useRef<HTMLIonInputElement>(null);
   const minTimeInterval = useRef<HTMLIonInputElement>(null);
   const minDistance = useRef<HTMLIonInputElement>(null);
 
   const modal = useRef<HTMLIonModalElement>(null);
 
-  const dismiss = () => {
-    modal.current?.dismiss();
-  };
-
   const save = () => {
     dispatch(
       settingsActions.saveSettings({
@@ -88,11 +90,19 @@ const Settings: React.FC<{}> = () => {
           minTimeInterval: minTimeInterval.current?.value,
           minDistance: minDistance.current?.value,
         },
+        language: languageSelect.current?.value,
       })
     );
     dismiss();
   };
 
+  setI18nLanguage(localLanguage);
+
+  const dismiss = () => {
+    modal.current?.dismiss();
+    setLocalLanguage(settingsState.language);
+  };
+
   return (
     <Fragment>
       <IonButton id='open-SettingsDialog'>
@@ -112,6 +122,27 @@ const Settings: React.FC<{}> = () => {
           </IonButtons>
         </IonToolbar>
         <IonContent>
+          <IonList lines='full' class='ion-no-margin'>
+            <IonListHeader lines='full'>
+              <IonLabel>{i18n.language}</IonLabel>
+            </IonListHeader>
+            <IonItem>
+              <IonLabel>{i18n.colonize(i18n.language)} </IonLabel>
+              <IonSelect
+                placeholder={i18n.languageSelect.placeHolder}
+                ref={languageSelect}
+                value={localLanguage}
+                interface='popover'
+                onIonChange={(ev) => setLocalLanguage(ev.detail.value)}
+              >
+                {i18n.languageSelect.choices.map((choice) => (
+                  <IonSelectOption key={choice.value} value={choice.value}>
+                    {choice.label}
+                  </IonSelectOption>
+                ))}
+              </IonSelect>
+            </IonItem>
+          </IonList>
           <IonList lines='full' class='ion-no-margin'>
             <IonListHeader lines='full'>
               <IonLabel>{i18n.user}</IonLabel>

src/components/map/TileServerChooserDialog.tsx

@@ -16,13 +16,20 @@ import { useDispatch, useSelector } from 'react-redux';
 import { enterAnimation, leaveAnimation } from '../../lib/animation';
 import { mapActions, MapState } from '../../store/map';
 import { tileProviders } from './tile';
-import i18n from '../../i18n/index';
+import i18n, { setI18nLanguage } from '../../i18n/index';
+import { SettingsState } from '../../store/settings';
 
 const TileServerChooserDialog: React.FC<{}> = () => {
   const tileProvider = useSelector(
     (state: { map: MapState }) => state.map.scope.tileProvider
   ) as keyof typeof tileProviders;
 
+  const language = useSelector(
+    (state: { settings: SettingsState }) => state.settings.language
+  );
+
+  setI18nLanguage(language);
+
   const dispatch = useDispatch();
 
   const modal = useRef<HTMLIonModalElement>(null);

src/components/map/TracksBrowser.tsx

@@ -21,7 +21,9 @@ import { enterAnimation, leaveAnimation } from '../../lib/animation';
 import phoneRoute from '../../theme/icons/font-gis/svg/routing/uEB08-phone-route-nons.svg';
 import GpxImport from './gpx-import';
 import GpxExport from './GpxExport';
-import i18n from '../../i18n/index';
+import i18n, { setI18nLanguage } from '../../i18n/index';
+import { useSelector } from 'react-redux';
+import { SettingsState } from '../../store/settings';
 
 const TrackBrowser: React.FC<{}> = () => {
   const gpxes = useFind({
@@ -38,6 +40,13 @@ const TrackBrowser: React.FC<{}> = () => {
     modal.current?.dismiss();
   };
 
+  const language = useSelector(
+    (state: { settings: SettingsState }) => state.settings.language
+  );
+
+  setI18nLanguage(language);
+
+
   return (
     <Fragment>
       <IonButton id='track-browser-button'>