Basic Internationalization Support

src/components/MenuComponent/MenuComponent.js

@@ -1,27 +1,70 @@
 import React, {Component} from '../../../node_modules/react';
+import {FormattedMessage} from 'react-intl';
 import './MenuComponent.scss'
 
-// import { connect } from "react-redux";
-// import { bindActionCreators } from "redux";
-// import * as MenuComponentActions from "../../store/MenuComponent/actions";
-let title = "Anthony Dumas";
-let jobTitle = "Développeur Full Stack @ Harvest";
+const URL_add_parameter = function(url, param, value){
+  var hash       = {};
+  var parser     = document.createElement('a');
+
+  parser.href    = url;
+
+  var parameters = parser.search.split(/\?|&/);
+
+  for(var i=0; i < parameters.length; i++) {
+      if(!parameters[i])
+          continue;
+
+      var ary      = parameters[i].split('=');
+      hash[ary[0]] = ary[1];
+  }
+
+  hash[param] = value;
+
+  var list = [];  
+  Object.keys(hash).forEach(function (key) {
+      list.push(key + '=' + hash[key]);
+  });
+
+  parser.search = '?' + list.join('&');
+  return parser.href;
+}
 export default class MenuComponent extends Component {
     // constructor(props) {
     //     super(props);
     //     this.state = {};
     // }
+    honhonhon() {
+      window.location.href=URL_add_parameter(window.location.href, "lang", "fr");
+    }
+
+    heygovna() {
+      window.location.href=URL_add_parameter(window.location.href, "lang", "en");
+    }
+
+
     render() {
       return <section id="menu" class="hero is-primary dontPrint is-bold">
         <div class="hero-body">
             <div class="container">
                 <h1 class="title">
-                  {title}
+                    <FormattedMessage id="title"/>
                 </h1>
                 <h2 class="subtitle">
-                  {jobTitle}
+                    <FormattedMessage id="subtitle"/>
                 </h2>
             </div>
+            <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="buttons">
+          <a class="button is-light" onClick={this.honhonhon}>
+            🇫🇷
+          </a>
+          <a class="button is-light" onClick={this.heygovna}>
+            🇮🇪
+          </a>
+        </div>
+      </div>
+    </div>
         </div>
     </section>;
     }

src/index.js

@@ -1,12 +1,43 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl';
+
+
 import './index.css';
 import App from './App';
 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 i18nConfig = {
+ defaultLocale: 'fr',
+ messages,
+};
+
+const language = function() {
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  let lang = urlParams.get("lang");
+  if(messages[lang] == undefined){
+    lang = navigator.language.split(/[-_]/)[0];
+  }
+  return lang;
+}
 
 ReactDOM.render(
   <React.StrictMode>
+      <IntlProvider
+      locale={language}
+      defaultLocale={i18nConfig.defaultLocale}
+      messages={i18nConfig.messages[language()]}
+    >
     <App />
+    </IntlProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/messages/en.json

@@ -0,0 +1,4 @@
+{
+    "title":"Anthony Dumas",
+    "subtitle":"Full Stack Developer @ Harvest"
+}

src/messages/fr.json

@@ -0,0 +1,4 @@
+{
+    "title":"Anthony Yvon Dumas",
+    "subtitle":"Développeur Full Stack @ Harvest"
+}