set up localisation

Author: neilbryson

src/App.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import styled from 'styled-components';
+import { LocaleProvider } from 'react-locale-hoc';
 
 import configureStore from './configureStore';
 
 import RootView from './views/RootView';
 
+import locales from './helpers/locales';
+
 const { store } = configureStore({});
 
 const Container = styled('div')`
@@ -16,9 +19,11 @@ const Container = styled('div')`
 
 const App = () => (
   <Provider store={store}>
-    <Container>
-      <RootView />
-    </Container>
+    <LocaleProvider strings={locales}>
+      <Container>
+        <RootView />
+      </Container>
+    </LocaleProvider>
   </Provider>
 );
 

src/components/Button.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import clickable from 'react-clickable-hoc';
 
 const propTypes = {
   label: PropTypes.string.isRequired,
@@ -32,4 +31,4 @@ const Button = ({ label, ...other }) => <Container {...other}>{label}</Container
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default clickable(Button);
+export default Button;

src/layouts/InitialHome.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
+import { localise } from 'react-locale-hoc';
 
 import Button from '../components/Button';
 
@@ -18,17 +19,21 @@ class InitialHome extends PureComponent {
   };
 
   render() {
+    const { t } = this.props;
+
     return (
       <>
-        <Header>It works !</Header>
-        <div>Now, try clicking the button below</div>
+        <Header>{t('it_works')}</Header>
+        <div>{t('instructions')}</div>
         <Button label="Click me" onClick={this.onClick} />
       </>
     );
   }
 }
 
-export default connect(
-  state => ({}),
-  { navigateTo }
-)(InitialHome);
+export default localise(
+  connect(
+    state => ({}),
+    { navigateTo }
+  )(InitialHome)
+);

src/views/HomeView.js

@@ -1,21 +1,26 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
+import { localise } from 'react-locale-hoc';
 
 import InitialHome from '../layouts/InitialHome';
 
 class HomeView extends PureComponent {
   render() {
-    if (this.props.kind === 'pop') {
-      return <div>You just pressed the Back button.</div>;
+    const { kind, t } = this.props;
+
+    if (kind === 'pop') {
+      return <div>{t('message')}</div>;
     }
 
     return <InitialHome />;
   }
 }
 
-export default connect(
-  state => ({
-    kind: state.location.kind,
-  }),
-  {}
-)(HomeView);
+export default localise(
+  connect(
+    state => ({
+      kind: state.location.kind,
+    }),
+    {}
+  )(HomeView)
+);

src/views/NextView.js

@@ -1,5 +1,9 @@
 import React from 'react';
 
-const NextView = () => <div>Now, try pressing the Back button of the browser.</div>;
+import { localise } from 'react-locale-hoc';
 
-export default NextView;
+const NextView = ({ t }) => {
+  return <div>{t('next_instructions')}</div>;
+};
+
+export default localise(NextView);