Localization, WIP, (#8)

package-lock.json

@@ -50,6 +50,7 @@
         "react": "^18.2.0",
         "react-app-polyfill": "^3.0.0",
         "react-dom": "^18.2.0",
+        "react-localization": "^1.0.19",
         "react-pouchdb": "^2.1.0",
         "react-redux": "^8.0.2",
         "react-router": "^6.3.0",
@@ -12451,6 +12452,11 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/localized-strings": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/localized-strings/-/localized-strings-0.2.4.tgz",
+      "integrity": "sha512-TKDhqFPkIIN/if2FSvVVZTaM/GP9TzfgdQ2uY65mr32xgFu5nqkKXprXbzy5rfx32DF5LDvS/y1UqYF/mAscYA=="
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -15733,6 +15739,17 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-localization": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/react-localization/-/react-localization-1.0.19.tgz",
+      "integrity": "sha512-f4E6T8xRis19K8qMOnnhjGV2quy1YH2lrSsnAiytvgt7uOSp6WgDhrZH6XZEaEFqupTOCFSf8uagIoIAkjl4JA==",
+      "dependencies": {
+        "localized-strings": "^0.2.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^17.0.0 || ^16.0.0 || ^15.6.0"
+      }
+    },
     "node_modules/react-pouchdb": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-pouchdb/-/react-pouchdb-2.1.0.tgz",
@@ -28809,6 +28826,11 @@
         "json5": "^2.1.2"
       }
     },
+    "localized-strings": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/localized-strings/-/localized-strings-0.2.4.tgz",
+      "integrity": "sha512-TKDhqFPkIIN/if2FSvVVZTaM/GP9TzfgdQ2uY65mr32xgFu5nqkKXprXbzy5rfx32DF5LDvS/y1UqYF/mAscYA=="
+    },
     "locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -31084,6 +31106,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-localization": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/react-localization/-/react-localization-1.0.19.tgz",
+      "integrity": "sha512-f4E6T8xRis19K8qMOnnhjGV2quy1YH2lrSsnAiytvgt7uOSp6WgDhrZH6XZEaEFqupTOCFSf8uagIoIAkjl4JA==",
+      "requires": {
+        "localized-strings": "^0.2.0"
+      }
+    },
     "react-pouchdb": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-pouchdb/-/react-pouchdb-2.1.0.tgz",

package.json

@@ -45,6 +45,7 @@
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
+    "react-localization": "^1.0.19",
     "react-pouchdb": "^2.1.0",
     "react-redux": "^8.0.2",
     "react-router": "^6.3.0",

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;