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>

src/i18n/index.ts

@@ -0,0 +1,32 @@
+import LocalizedStrings from 'react-localization';
+
+const strings = new LocalizedStrings({
+  en: {
+    colonize: (input: string): any => strings.formatString('{0}:', input),
+
+    save: 'Save',
+    cancel: 'Cancel',
+    close: 'Close',
+    settings: 'Settings',
+    user: 'User',
+    pseudo: 'Pseudo',
+    geolocation: 'Geolocation',
+    minTimeInt: 'Minimal time interval (ms)',
+    minDist:'Minimal distance (m)',
+  },
+  fr: {
+    colonize: (input: string): any => strings.formatString('{0} :', input),
+
+    save: 'Sauvegarder',
+    cancel: 'Annuler',
+    close: 'Fermer',
+    settings: 'Paramètres',
+    user: 'Utilisateur',
+    pseudo: 'Pseudo',
+    geolocation: 'Géolocalisation',
+    minTimeInt: 'Interval minimal (ms)',
+    minDist:'Distance minimale (m)',
+},
+});
+
+export default strings;