set up basic i18n

src/app/i18n/I18nProvider.jsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
+
+import i18n from './i18n';
+
+class I18nProvider extends Component {
+  componentWillUpdate(nextProps) {
+    if (nextProps.preferredLanguage !== this.props.preferredLanguage) {
+      i18n.changeLanguage(nextProps.preferredLanguage);
+    }
+  }
+
+  render() {
+    return (
+      <I18nextProvider i18n={i18n}>
+        {this.props.children}
+      </I18nextProvider>
+    );
+  }
+}
+
+I18nProvider.propTypes = {
+  children: PropTypes.node,
+  // connect:
+  preferredLanguage: PropTypes.string
+};
+
+const mapStateToProps = state => ({
+  preferredLanguage: state.i18n.preferredLanguage
+});
+
+export default connect(mapStateToProps)(I18nProvider);

src/app/i18n/i18n.js

@@ -0,0 +1,27 @@
+import i18next from 'i18next';
+
+i18next.init({
+  interpolation: {
+    // React already does escaping
+    escapeValue: false
+  },
+  lng: 'ro',
+  resources: {
+    ro: {
+      translation: {
+        proposals: {
+          pageTitle: 'Pagina de propuneri'
+        }
+      }
+    },
+    en: {
+      translation: {
+        proposals: {
+          pageTitle: 'Proposals page'
+        }
+      }
+    }
+  }
+});
+
+export default i18next;

src/app/i18n/index.js

@@ -0,0 +1,2 @@
+export { default as I18nProvider } from './I18nProvider';
+export { default as i18n } from './reducer';

src/app/i18n/reducer.js

@@ -0,0 +1,10 @@
+const i18n = (state = {
+  preferredLanguage: 'ro',
+}, action) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};
+
+export default i18n;

src/index.js

@@ -5,13 +5,16 @@ import { Provider } from 'react-redux';
 import { combineReducers, createStore } from 'redux';
 
 import { App } from './app';
+import { I18nProvider } from './app/i18n';
 import registerServiceWorker from './registerServiceWorker';
 
 // Import module reducers
+import { i18n } from './app/i18n';
 import { categorySelection } from './category-selection';
 import { categories } from './categories';
 
 const rootReducer = combineReducers({
+  i18n,
   categorySelection,
   categories
 });
@@ -23,7 +26,9 @@ const store = createStore(
 
 ReactDOM.render(
   <Provider store={store}>
-    <App />
+    <I18nProvider>
+      <App />
+    </I18nProvider>
   </Provider>,
   document.getElementById('root')
 );

src/proposals/components/ProposalsPage/ProposalsPage.jsx

@@ -1,7 +1,16 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
 
-export default class ProposalsPage extends Component {
+class ProposalsPage extends Component {
   render() {
-    return <p>Proposals page</p>;
+    return <p>{this.props.t('proposals.pageTitle')}</p>;
   }
 }
+
+ProposalsPage.propTypes = {
+  // translate HoC:
+  t: PropTypes.func
+};
+
+export default translate()(ProposalsPage);