Merge pull request #19 from sharetribe/add-react-intl

Add react intl

package.json

@@ -8,11 +8,12 @@
     "express": "^4.14.0",
     "helmet": "^3.3.0",
     "lodash": "^4.17.4",
-    "qs": "^6.3.0",
     "path-to-regexp": "^1.5.3",
+    "qs": "^6.3.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-helmet": "^4.0.0",
+    "react-intl": "^2.2.3",
     "react-redux": "^5.0.2",
     "react-router": "4.0.0-alpha.6",
     "react-test-renderer": "^15.4.2",

src/app.js

@@ -3,20 +3,26 @@ import ReactDOMServer from 'react-dom/server';
 import Helmet from 'react-helmet';
 import { BrowserRouter, ServerRouter } from 'react-router';
 import { Provider } from 'react-redux';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import en from 'react-intl/locale-data/en';
 import configureStore from './store';
 import Routes from './Routes';
 import routesConfiguration from './routesConfiguration';
+import localeData from './translations/en.json';
 
 export const ClientApp = props => {
   const { store } = props;
+  addLocaleData([ ...en ]);
   return (
-    <BrowserRouter>
-      {({ router }) => (
-          <Provider store={store}>
-            <Routes router={router} routes={routesConfiguration} />
-          </Provider>
-        )}
-    </BrowserRouter>
+    <IntlProvider locale="en" messages={localeData}>
+      <BrowserRouter>
+        {({ router }) => (
+            <Provider store={store}>
+              <Routes router={router} routes={routesConfiguration} />
+            </Provider>
+          )}
+      </BrowserRouter>
+    </IntlProvider>
   );
 };
 
@@ -26,14 +32,17 @@ ClientApp.propTypes = { store: any.isRequired };
 
 export const ServerApp = props => {
   const { url, context, store } = props;
+  addLocaleData([ ...en ]);
   return (
-    <ServerRouter location={url} context={context}>
-      {({ router }) => (
-          <Provider store={store}>
-            <Routes router={router} routes={routesConfiguration} />
-          </Provider>
-        )}
-    </ServerRouter>
+    <IntlProvider locale="en" messages={localeData}>
+      <ServerRouter location={url} context={context}>
+        {({ router }) => (
+            <Provider store={store}>
+              <Routes router={router} routes={routesConfiguration} />
+            </Provider>
+          )}
+      </ServerRouter>
+    </IntlProvider>
   );
 };
 

src/containers/LandingPage/LandingPage.js

@@ -1,9 +1,15 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import { PageLayout } from '../../components';
 
 export default () => (
   <PageLayout title="Landing page">
-    <Link to="/s?location=helsinki">Find studios</Link>
+    <Link to="/s?location=helsinki">
+      <FormattedMessage
+        id="landingpage.examplelink"
+        defaultMessage="Show nice studios! (default)"
+      />
+    </Link>
   </PageLayout>
 )

src/containers/LandingPage/LandingPage.test.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router';
 import renderer from 'react-test-renderer';
+import { IntlProvider } from 'react-intl';
 import LandingPage from './LandingPage';
 
 describe('LandingPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
       (
-        <BrowserRouter>
-          <LandingPage />
-        </BrowserRouter>
+        <IntlProvider locale="en">
+          <BrowserRouter>
+            <LandingPage />
+          </BrowserRouter>
+        </IntlProvider>
       ),
     );
     const tree = component.toJSON();

src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap

@@ -128,7 +128,9 @@ exports[`LandingPage matches snapshot 1`] = `
     href="/s?location=helsinki"
     onClick={[Function]}
     style={Object {}}>
-    Find studios
+    <span>
+      Show nice studios! (default)
+    </span>
   </a>
 </div>
 `;

src/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "landingpage.examplelink": "Show nice studios! (from json)"
+}

yarn.lock

@@ -909,14 +909,14 @@ babel-register@^6.16.0, babel-register@^6.22.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@6.11.6, babel-runtime@^6.0.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1:
+babel-runtime@6.11.6, babel-runtime@^6.9.1:
   version "6.11.6"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.11.6.tgz#6db707fef2d49c49bfa3cb64efdb436b518b8222"
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.9.5"
 
-babel-runtime@^6.18.0, babel-runtime@^6.22.0:
+babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.9.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611"
   dependencies:
@@ -2829,7 +2829,27 @@ interpret@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
 
-invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1:
+intl-format-cache@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.0.5.tgz#b484cefcb9353f374f25de389a3ceea1af18d7c9"
+
+intl-messageformat-parser@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.2.0.tgz#5906b7f953ab7470e0dc8549097b648b991892ff"
+
+intl-messageformat@1.3.0, intl-messageformat@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-1.3.0.tgz#f7d926aded7a3ab19b2dc601efd54e99a4bd4eae"
+  dependencies:
+    intl-messageformat-parser "1.2.0"
+
+intl-relativeformat@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-1.3.0.tgz#893dc7076fccd380cf091a2300c380fa57ace45b"
+  dependencies:
+    intl-messageformat "1.3.0"
+
+invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -4901,6 +4921,15 @@ react-helmet@^4.0.0:
     object-assign "^4.0.1"
     react-side-effect "^1.1.0"
 
+react-intl@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.2.3.tgz#8eebb03cddc38b337ed22fab78037ab53a594270"
+  dependencies:
+    intl-format-cache "^2.0.5"
+    intl-messageformat "^1.3.0"
+    intl-relativeformat "^1.3.0"
+    invariant "^2.1.1"
+
 react-redux@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.2.tgz#3d9878f5f71c6fafcd45de1fbb162ea31f389814"