I18n using react-localization (#8)

src/components/map/GpxRecord.tsx

@@ -29,6 +29,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { mapActions } from '../../store/map';
 import { SettingsState } from '../../store/settings';
 
+import i18n from '../../i18n/index';
+
+
 declare global {
   var $lastValidLocationTime: number;
 }
@@ -144,9 +147,9 @@ const GpxRecord: React.FC<{}> = () => {
         leaveAnimation={leaveAnimation}
       >
         <IonToolbar>
-          <IonTitle>Track recording</IonTitle>
+          <IonTitle>{i18n.trackRecording}</IonTitle>
           <IonButtons slot='end'>
-            <IonButton onClick={() => dismiss()}>Close</IonButton>
+            <IonButton onClick={() => dismiss()}>{i18n.close}</IonButton>
           </IonButtons>
         </IonToolbar>
         <IonContent>
@@ -159,9 +162,9 @@ const GpxRecord: React.FC<{}> = () => {
             >
               <IonIcon slot='start' icon={recording}></IonIcon>
               {hasCurrentTrack ? (
-                <span>Resume recording</span>
+                <span>{i18n.resumeRecording}</span>
               ) : (
-                <span>Start recording</span>
+                <span>{i18n.startRecording}</span>
               )}
             </IonButton>
           )}
@@ -172,7 +175,7 @@ const GpxRecord: React.FC<{}> = () => {
               size='large'
               onClick={pauseRecording}
             >
-              <IonIcon slot='start' icon={pauseCircle}></IonIcon>Pause
+              <IonIcon slot='start' icon={pauseCircle}></IonIcon>{i18n.pauseRecording}
             </IonButton>
           )}
           {hasCurrentTrack && (
@@ -183,9 +186,7 @@ const GpxRecord: React.FC<{}> = () => {
                 size='large'
                 onClick={stopRecording}
               >
-                <IonIcon slot='start' icon={stop}></IonIcon>Stop recording
-                <br />
-                (and save track)
+                <IonIcon slot='start' icon={stop}></IonIcon>{i18n.stopRecording}
               </IonButton>
               <IonButton
                 expand='block'
@@ -193,10 +194,7 @@ const GpxRecord: React.FC<{}> = () => {
                 size='large'
                 onClick={deleteRecording}
               >
-                <IonIcon slot='start' icon={closeCircle}></IonIcon>Cancel
-                recording
-                <br />
-                (and clear track)
+                <IonIcon slot='start' icon={closeCircle}></IonIcon>{i18n.cancelRecording}
               </IonButton>
             </>
           )}

src/components/map/TileServerChooserDialog.tsx

@@ -16,6 +16,7 @@ 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';
 
 const TileServerChooserDialog: React.FC<{}> = () => {
   const tileProvider = useSelector(
@@ -35,7 +36,6 @@ const TileServerChooserDialog: React.FC<{}> = () => {
     dismiss();
   };
 
-
   return (
     <IonModal
       ref={modal}
@@ -44,9 +44,9 @@ const TileServerChooserDialog: React.FC<{}> = () => {
       leaveAnimation={leaveAnimation}
     >
       <IonToolbar>
-        <IonTitle>Choose your map</IonTitle>
+        <IonTitle>{i18n.chooseYourMap}</IonTitle>
         <IonButtons slot='end'>
-          <IonButton onClick={() => dismiss()}>Close</IonButton>
+          <IonButton onClick={() => dismiss()}>{i18n.close}</IonButton>
         </IonButtons>
       </IonToolbar>
       <IonContent>

src/components/map/TracksBrowser.tsx

@@ -21,6 +21,7 @@ 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';
 
 const TrackBrowser: React.FC<{}> = () => {
   const gpxes = useFind({
@@ -50,10 +51,10 @@ const TrackBrowser: React.FC<{}> = () => {
         leaveAnimation={leaveAnimation}
       >
         <IonToolbar>
-          <IonTitle>Tracks</IonTitle>
+          <IonTitle>{i18n.tracks}</IonTitle>
           <IonButtons slot='end'>
             <GpxImport />
-            <IonButton onClick={() => dismiss()}>Close</IonButton>
+            <IonButton onClick={() => dismiss()}>{i18n.close}</IonButton>
           </IonButtons>
         </IonToolbar>
         <IonContent>