Merge pull request #879 from sharetribe/fix-production-rendering

Add Intl to off-SPA rendering

CHANGELOG.md

@@ -11,6 +11,9 @@ way to update this template, but currently, we follow a pattern:
 * Patch (v0.0.**X**): Bug fixes and small changes to components.
 
 ---
+## v1.3.1
+* [fix] Add Intl to off-SPA rendering
+  [#879](https://github.com/sharetribe/flex-template-web/pull/879)
 
 ## v1.3.0
 * [change] Reusable SearchMap.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {

src/components/SearchMap/ReusableMapContainer.js

@@ -1,8 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { node, string } from 'prop-types';
+import { IntlProvider } from 'react-intl';
+import mapValues from 'lodash/mapValues';
+import config from '../../config';
+import messages from '../../translations/en.json';
+
 import css from './SearchMap.css';
 
+// Locale should not affect the tests. We ensure this by providing
+// messages with the key as the value of each message.
+const testMessages = mapValues(messages, (val, key) => key);
+const isTestEnv = process.env.NODE_ENV === 'test';
+const localeMessages = isTestEnv ? testMessages : messages;
+
 class ReusableMapContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -42,6 +53,7 @@ class ReusableMapContainer extends React.Component {
 
   renderSearchMap() {
     const targetDomNode = document.getElementById(this.el.id);
+    let renderContent = this.props.children;
 
     // Check if we have already added map somewhere on the DOM
     if (!targetDomNode) {
@@ -51,6 +63,11 @@ class ReusableMapContainer extends React.Component {
       } else if (!this.mountNode) {
         // if no mountNode is found, append this outside SPA rendering tree (to document body)
         document.body.appendChild(this.el);
+        renderContent = (
+          <IntlProvider locale={config.locale} messages={localeMessages}>
+            {this.props.children}
+          </IntlProvider>
+        );
       }
     } else {
       this.el.classList.remove(css.reusableMapHidden);
@@ -62,8 +79,7 @@ class ReusableMapContainer extends React.Component {
         this.mountNode.appendChild(this.el);
       }
     }
-
-    ReactDOM.render(this.props.children, this.el);
+    ReactDOM.render(renderContent, this.el);
   }
 
   render() {