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

src/index.js

@@ -1,19 +1,15 @@
+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,
@@ -29,12 +25,24 @@ const language = function() {
   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
       locale={language}
       defaultLocale={i18nConfig.defaultLocale}
-      messages={i18nConfig.messages[language()]}
+      messages={langJson()}
     >
       <App />
     </IntlProvider>

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;