Création d'un fichier de message global & amélioration du système de localization

src/index.js

@@ -1,42 +1,50 @@
+import './index.css';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl';
 
-
-import './index.css';
 import App from './App';
+import messages from './messages';
 import reportWebVitals from './reportWebVitals';
-import messages_fr from './messages/fr.json';
-import messages_en from './messages/en.json';
 
-const messages = {
- 'fr': messages_fr,
- 'en': messages_en,
-};
 
+const GLOBAL_MESSAGE_KEY = "global";
 const i18nConfig = {
- defaultLocale: 'fr',
- messages,
+  defaultLocale: 'fr',
+  messages,
 };
 
-const language = function() {
+const language = function () {
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
   let lang = urlParams.get("lang");
-  if(messages[lang] === undefined){
+  if (messages[lang] === undefined) {
     lang = navigator.language.split(/[-_]/)[0];
   }
   return lang;
 }
 
+const langJson = function () {
+  const messageLocalized = i18nConfig.messages[language()];
+  const messageGlobal = i18nConfig.messages[GLOBAL_MESSAGE_KEY];
+  const messageMerged = {
+    ...messageLocalized,
+    ...messageGlobal
+  };
+
+  console.log(JSON.stringify(messageMerged))
+  return messageMerged;
+}
+
 ReactDOM.render(
   <React.StrictMode>
-      <IntlProvider
+    <IntlProvider
       locale={language}
       defaultLocale={i18nConfig.defaultLocale}
-      messages={i18nConfig.messages[language()]}
+      messages={langJson()}
     >
-    <App />
+      <App />
     </IntlProvider>
   </React.StrictMode>,
   document.getElementById('root')

src/messages/global.json

@@ -0,0 +1,10 @@
+{
+  "global": {
+    "buttons": {
+      "languages": {
+        "fr": "En Français 🇫🇷",
+        "en": "In English 🇮🇪"
+      }
+    }
+  }
+}

src/messages/index.js

@@ -0,0 +1,12 @@
+import messages_en from './en.json';
+import messages_fr from './fr.json';
+import messages_global from './global.json';
+
+
+const messages = {
+    "fr": messages_fr,
+    "en": messages_en,
+    "global": messages_global
+}
+
+export default messages;