Localization, WIP, (#8)

src/components/map/Settings.tsx

@@ -22,6 +22,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';
 
 const Settings: React.FC<{}> = () => {
   const dispatch = useDispatch();
@@ -105,18 +106,18 @@ const Settings: React.FC<{}> = () => {
         className='full-height'
       >
         <IonToolbar>
-          <IonTitle>Settings</IonTitle>
+          <IonTitle>{i18n.settings}</IonTitle>
           <IonButtons slot='end'>
-            <IonButton onClick={() => dismiss()}>Close</IonButton>
+            <IonButton onClick={() => dismiss()}>{i18n.close}</IonButton>
           </IonButtons>
         </IonToolbar>
         <IonContent>
           <IonList lines='full' class='ion-no-margin'>
             <IonListHeader lines='full'>
-              <IonLabel>User</IonLabel>
+              <IonLabel>{i18n.user}</IonLabel>
             </IonListHeader>
             <IonItem>
-              <IonLabel>Pseudo: </IonLabel>
+              <IonLabel>{i18n.colonize(i18n.pseudo)} </IonLabel>
               <IonInput
                 ref={pseudo}
                 value={settingsState.user.pseudo}
@@ -126,10 +127,10 @@ const Settings: React.FC<{}> = () => {
           </IonList>
           <IonList lines='full' class='ion-no-margin'>
             <IonListHeader lines='full'>
-              <IonLabel>Geolocation</IonLabel>
+              <IonLabel>{i18n.geolocation}</IonLabel>
             </IonListHeader>
             <IonItem>
-              <IonLabel>Minimal time interval (ms): </IonLabel>
+              <IonLabel>{i18n.colonize(i18n.minTimeInt)}</IonLabel>
               <IonInput
                 value={settingsState.geolocation.minTimeInterval}
                 ref={minTimeInterval}
@@ -138,7 +139,7 @@ const Settings: React.FC<{}> = () => {
               ></IonInput>
             </IonItem>
             <IonItem>
-              <IonLabel>Minimal distance (m): </IonLabel>
+              <IonLabel>{i18n.colonize(i18n.minDist)}</IonLabel>
               <IonInput
                 value={settingsState.geolocation.minDistance}
                 ref={minDistance}
@@ -156,7 +157,7 @@ const Settings: React.FC<{}> = () => {
                   color='primary'
                   onClick={() => save()}
                 >
-                  Save
+                  {i18n.save}
                 </IonButton>
                 <IonButton
                   shape='round'
@@ -164,7 +165,7 @@ const Settings: React.FC<{}> = () => {
                   color='primary'
                   onClick={() => dismiss()}
                 >
-                  Cancel
+                  {i18n.cancel}{' '}
                 </IonButton>
               </IonButtons>
             </IonToolbar>