Add i18next

packages/concordia-app/public/locales/en/translation.json

@@ -0,0 +1,4 @@
+{
+  "topbar.button.signup": "Sign Up",
+  "signup.form.button.submit": "Sign Up"
+}

packages/concordia-app/src/App.jsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import LoadingContainer from './components/LoadingContainer';
 import Routes from './Routes';
+import './intl/index';
 
 // CSS
 import './assets/css/app.css';

packages/concordia-app/src/components/SignUpForm.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {
   Button, Form, Menu, Message, Modal,
 } from 'semantic-ui-react';
-
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import AppContext from './AppContext';
 
@@ -78,7 +78,6 @@ class SignUpForm extends Component {
     const { user, account } = this.props;
 
     if (user.hasSignedUp) {
-      console.log('Signing up..');
       this.contract.methods.signUp.cacheSend(usernameInput);
     } else {
       this.setState({
@@ -97,6 +96,7 @@ class SignUpForm extends Component {
     const {
       error, usernameInput, errorHeader, errorMessage, signingUp,
     } = this.state;
+    const { t } = this.props;
 
     return (
         <Modal
@@ -106,7 +106,7 @@ class SignUpForm extends Component {
               <Menu.Item
                 name="signup"
                 position="right"
-                content="Sign Up"
+                content={t('topbar.button.signup')}
               />
           )}
         >
@@ -127,7 +127,7 @@ class SignUpForm extends Component {
                   header={errorHeader}
                   content={errorMessage}
                 />
-                <Button type="submit" color="black" content="Sign Up" />
+                <Button type="submit" color="black" content={t('signup.form.button.submit')} />
 
             </Modal.Content>
         </Modal>
@@ -141,4 +141,4 @@ const mapStateToProps = (state) => ({
   user: state.user,
 });
 
-export default connect(mapStateToProps)(SignUpForm);
+export default connect(mapStateToProps)(withTranslation()(SignUpForm));

packages/concordia-app/src/intl/index.js

@@ -0,0 +1,25 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+const currentLanguage = localStorage.getItem('i18nextLng');
+
+if (currentLanguage === null) {
+  localStorage.setItem('i18nextLng', 'en');
+}
+
+i18n
+  .use(Backend) // load translation using http -> see /public/locales
+  .use(LanguageDetector) // detect user language
+  .use(initReactI18next) // pass the i18n instance to react-i18next.
+  .init({ // init i18next
+    fallbackLng: 'en',
+    keySeparator: false, // we do not use keys in form messages.welcome
+    debug: process.env.NODE_ENV === 'development',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  });
+
+export default i18n;