Fixes #1006: migrate react-intl to 2.x (#1495)

* Fixes #1006: migrate react-intl to 2.x * Fixed tests
geosolutions-it · Feb 22, 2017 · 2fe0742 · 2fe0742
1 parent ba1ed63
commit 2fe0742
Show file tree

Hide file tree

Showing 20 changed files with 122 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -119,7 +119,7 @@
     "react-dom": "0.14.8",
     "react-draggable": "1.3.4",
     "react-dropzone": "3.4.0",
-    "react-intl": "https://github.com/geosolutions-it/react-intl/tarball/react_014_1x",
+    "react-intl": "2.2.3",
     "react-joyride": "1.10.1",
     "react-nouislider": "1.11.0",
     "react-overlays": "0.6.3",

diff --git a/web/client/components/I18N/Date.jsx b/web/client/components/I18N/Date.jsx
@@ -10,22 +10,19 @@ var {FormattedDate} = require('react-intl');
 
 var DateFormat = React.createClass({
     propTypes: {
-        locale: React.PropTypes.string,
         value: React.PropTypes.object,
         dateParams: React.PropTypes.object
     },
     contextTypes: {
-        locale: React.PropTypes.string,
-        messages: React.PropTypes.object
+      intl: React.PropTypes.object
     },
     getDefaultProps() {
         return {
             value: new Date()
         };
     },
     render() {
-        var locale = this.props.locale || this.context.locale;
-        return <FormattedDate locales={locale} value={this.props.value} {...this.props.dateParams}/>;
+        return this.context.intl ? <FormattedDate value={this.props.value} {...this.props.dateParams}/> : <span>{this.props.value && this.props.value.toString() || ''}</span>;
     }
 });
 

diff --git a/web/client/components/I18N/HTML.jsx b/web/client/components/I18N/HTML.jsx
@@ -11,23 +11,14 @@ var FormattedHTMLMessage = ReactIntl.FormattedHTMLMessage;
 
 var Message = React.createClass({
     propTypes: {
-        locale: React.PropTypes.string,
-        messages: React.PropTypes.object,
         msgId: React.PropTypes.string.isRequired,
         msgParams: React.PropTypes.object
     },
     contextTypes: {
-        locale: React.PropTypes.string,
-        messages: React.PropTypes.object
+      intl: React.PropTypes.object
     },
     render() {
-        var locale = this.props.locale || this.context.locale;
-        var messages = this.props.messages || this.context.messages;
-        let message = messages;
-        this.props.msgId.split('.').forEach(part => {
-            message = message[part];
-        });
-        return <FormattedHTMLMessage locales={locale} message={message} {...this.props.msgParams}/>;
+        return this.context.intl ? <FormattedHTMLMessage id={this.props.msgId} values={this.props.msgParams}/> : <span>{this.props.msgId || ""}</span>;
     }
 });
 module.exports = Message;
diff --git a/web/client/components/I18N/Localized.jsx b/web/client/components/I18N/Localized.jsx
@@ -5,9 +5,11 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var React = require('react');
+const React = require('react');
 
-var Localized = React.createClass({
+const {IntlProvider} = require('react-intl');
+
+const Localized = React.createClass({
     propTypes: {
         locale: React.PropTypes.string,
         messages: React.PropTypes.object,
@@ -31,11 +33,27 @@ var Localized = React.createClass({
                 children = children();
             }
 
-            return React.Children.only(children);
+            return (<IntlProvider key={this.props.locale} locale={this.props.locale}
+                 messages={this.flattenMessages(this.props.messages)}
+                >
+                {children}
+            </IntlProvider>);
+            // return React.Children.only(children);
         } else if (this.props.loadingError) {
             return <div className="loading-locale-error">{this.props.loadingError}</div>;
         }
         return null;
+    },
+    flattenMessages(messages, prefix = '') {
+        return Object.keys(messages).reduce((previous, current) => {
+            return (typeof messages[current] === 'string') ? {
+                 [prefix + current]: messages[current],
+                ...previous
+            } : {
+                ...this.flattenMessages(messages[current], prefix + current + '.'),
+                ...previous
+            };
+        }, {});
     }
  });
 

diff --git a/web/client/components/I18N/Message.jsx b/web/client/components/I18N/Message.jsx
@@ -10,25 +10,16 @@ const ReactIntl = require('react-intl');
 
 const FormattedMessage = ReactIntl.FormattedMessage;
 
-const LocaleUtils = require('../../utils/LocaleUtils');
-
-var Message = React.createClass({
+const Message = React.createClass({
     propTypes: {
-        locale: React.PropTypes.string,
-        messages: React.PropTypes.object,
         msgId: React.PropTypes.string.isRequired,
         msgParams: React.PropTypes.object
     },
     contextTypes: {
-        locale: React.PropTypes.string,
-        messages: React.PropTypes.object
+        intl: React.PropTypes.object
     },
     render() {
-        var locale = this.props.locale || this.context.locale;
-        var messages = this.props.messages || this.context.messages;
-        let message = LocaleUtils.getMessageById(messages, this.props.msgId);
-
-        return message ? <FormattedMessage locales={locale} message={message} {...this.props.msgParams}/> : <span/>;
+        return this.context.intl ? <FormattedMessage id={this.props.msgId} values={this.props.msgParams}/> : <span>{this.props.msgId || ""}</span>;
     }
 });
 

diff --git a/web/client/components/I18N/Number.jsx b/web/client/components/I18N/Number.jsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var React = require('react');
+var {FormattedNumber} = require('react-intl');
+
+var NumberFormat = React.createClass({
+    propTypes: {
+        value: React.PropTypes.object,
+        numberParams: React.PropTypes.object
+    },
+    contextTypes: {
+      intl: React.PropTypes.object
+    },
+    getDefaultProps() {
+        return {
+            value: new Date()
+        };
+    },
+    render() {
+        return this.context.intl ? <FormattedNumber value={this.props.value} {...this.props.numberParams}/> : <span>{this.props.value && this.props.value.toString() || ''}</span>;
+    }
+});
+
+module.exports = NumberFormat;
diff --git a/web/client/components/I18N/__tests__/18N.HTML-test.jsx b/web/client/components/I18N/__tests__/18N.HTML-test.jsx
@@ -10,6 +10,7 @@ var expect = require('expect');
 var React = require('react/addons');
 var ReactDOM = require('react-dom');
 var I18N = require('../I18N');
+var Localized = require('../Localized');
 
 var ita = {
     "locale": "it-IT",
@@ -45,7 +46,7 @@ describe('This test for I18N.HTML', () => {
         var currentData = data["en-US"];
         var testMsg = currentData.messages[msgId];
 
-        const cmp = ReactDOM.render(<I18N.HTML msgId={msgId} messages={eng.messages} locale="en-US"/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<Localized messages={eng.messages} locale="en-US"><I18N.HTML msgId={msgId}/></Localized>, document.getElementById("container"));
         expect(cmp).toExist();
 
         const cmpDom = ReactDOM.findDOMNode(cmp);
@@ -57,7 +58,7 @@ describe('This test for I18N.HTML', () => {
         var currentData = data["it-IT"];
         var testMsg = currentData.messages[msgId];
 
-        const cmp = ReactDOM.render(<I18N.HTML msgId={msgId} messages={ita.messages} locale="it-IT"/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<Localized messages={ita.messages} locale="it-IT"><I18N.HTML msgId={msgId}/></Localized>, document.getElementById("container"));
         expect(cmp).toExist();
 
         const cmpDom = ReactDOM.findDOMNode(cmp);

diff --git a/web/client/components/I18N/__tests__/I18N.Message-test.jsx b/web/client/components/I18N/__tests__/I18N.Message-test.jsx
@@ -10,6 +10,7 @@ var expect = require('expect');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var I18N = require('../I18N');
+var Localized = require('../Localized');
 
 var ita = {
     "locale": "it-IT",
@@ -45,7 +46,7 @@ describe('This test for I18N.Message', () => {
         var currentData = data["en-US"];
         var testMsg = currentData.messages[msgId];
 
-        const cmp = ReactDOM.render(<I18N.Message msgId={msgId} messages={eng.messages} locale="en-US"/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<Localized messages={eng.messages} locale="en-US"><I18N.Message msgId={msgId}/></Localized>, document.getElementById("container"));
         expect(cmp).toExist();
 
         const cmpDom = ReactDOM.findDOMNode(cmp);
@@ -57,7 +58,7 @@ describe('This test for I18N.Message', () => {
         var currentData = data["it-IT"];
         var testMsg = currentData.messages[msgId];
 
-        const cmp = ReactDOM.render(<I18N.Message msgId={msgId} messages={ita.messages} locale="it-IT"/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<Localized messages={ita.messages} locale="it-IT"><I18N.Message msgId={msgId}/></Localized>, document.getElementById("container"));
         expect(cmp).toExist();
 
         const cmpDom = ReactDOM.findDOMNode(cmp);

diff --git a/web/client/components/catalog/SharingLink.jsx b/web/client/components/catalog/SharingLink.jsx
@@ -16,8 +16,6 @@ const SharingLink = React.createClass({
         url: React.PropTypes.string.isRequired,
         labelId: React.PropTypes.string,
         onCopy: React.PropTypes.func,
-        messages: React.PropTypes.object,
-        locale: React.PropTypes.string,
         bsSize: React.PropTypes.string,
         addAuthentication: React.PropTypes.bool
     },
@@ -48,7 +46,7 @@ const SharingLink = React.createClass({
                 <OverlayTrigger placement="right" overlay={tooltip} onExited={() => this.setState({showCopiedToolTip: false})}>
                     <Button bsSize={this.props.bsSize} bsStyle="primary" className="link-button" onClick={() => this.setState({showCopiedToolTip: true})}>
                         <Glyphicon glyph="paperclip"/>&nbsp;{this.props.labelId
-                                && <Message msgId={this.props.labelId} messages={this.props.messages} locale={this.props.locale}/>}
+                                && <Message msgId={this.props.labelId}/>}
                     </Button>
                 </OverlayTrigger>
             </CopyToClipboard>

diff --git a/web/client/components/catalog/__tests__/SharingLink-test.jsx b/web/client/components/catalog/__tests__/SharingLink-test.jsx
@@ -7,7 +7,8 @@
  */
 const React = require('react');
 const ReactDOM = require('react-dom');
-const SharingLink = require('../SharingLink.jsx');
+const SharingLink = require('../SharingLink');
+const Localized = require('../../I18N/Localized');
 const expect = require('expect');
 
 const TestUtils = require('react-addons-test-utils');
@@ -51,7 +52,7 @@ describe('Tests for SharingLink', () => {
         // creating the messages object
         const messages = {'link': 'Link'};
         // intanciating the component
-        const component = ReactDOM.render(<SharingLink url="url" labelId="link" messages={messages}/>,
+        const component = ReactDOM.render(<Localized locale="en-US" messages={messages}><SharingLink url="url" labelId="link"/></Localized>,
             document.getElementById('container'));
         expect(component).toExist();
         // expecting a dom node to be available

diff --git a/web/client/components/mapcontrols/measure/MeasureComponent.jsx b/web/client/components/mapcontrols/measure/MeasureComponent.jsx
@@ -9,8 +9,7 @@
 const React = require('react');
 const {Panel, ButtonGroup, Tooltip, Glyphicon, Button} = require('react-bootstrap');
 const ToggleButton = require('../../buttons/ToggleButton');
-const ReactIntl = require('react-intl');
-const FormattedNumber = ReactIntl.FormattedNumber;
+var NumberFormat = require('../../I18N/Number');
 
 const lineRuleIcon = require('./img/line-ruler.png');
 const areaRuleIcon = require('./img/area-ruler.png');
@@ -122,9 +121,9 @@ const MeasureComponent = React.createClass({
         return (
                <div className="panel-body">
                     <p><span>{this.props.lengthLabel}: </span><span id="measure-len-res">
-                        <FormattedNumber key="len" {...decimalFormat} value={this.props.formatLength(this.props.uom.length.unit, this.props.measurement.len)} /> {this.props.uom.length.label}</span></p>
+                        <NumberFormat key="len" numberParams={decimalFormat} value={this.props.formatLength(this.props.uom.length.unit, this.props.measurement.len)} /> {this.props.uom.length.label}</span></p>
                     <p><span>{this.props.areaLabel}: </span><span id="measure-area-res">
-                        <FormattedNumber key="area" {...decimalFormat} value={this.props.formatArea(this.props.uom.area.unit, this.props.measurement.area)} /> {this.props.uom.area.label}</span></p>
+                        <NumberFormat key="area" numberParams={decimalFormat} value={this.props.formatArea(this.props.uom.area.unit, this.props.measurement.area)} /> {this.props.uom.area.label}</span></p>
                     <p><span>{this.props.bearingLabel}: </span>
                     <span id="measure-bearing-res">{this.props.formatBearing(this.props.measurement.bearing || 0)}</span></p>
                 </div>

diff --git a/web/client/components/mapcontrols/measure/MeasureResults.jsx b/web/client/components/mapcontrols/measure/MeasureResults.jsx
@@ -12,8 +12,7 @@ const Draggable = require('react-draggable');
 const Dialog = require('../../misc/Dialog');
 
 const Message = require('../../../plugins/locale/Message');
-const ReactIntl = require('react-intl');
-const FormattedNumber = ReactIntl.FormattedNumber;
+const NumberFormat = require('../../I18N/Number');
 const measureUtils = require('../../../utils/MeasureUtils');
 
 const {isEqual} = require('lodash');
@@ -104,8 +103,8 @@ const MeasureResults = React.createClass({
         let decimalFormat = {style: "decimal", minimumIntegerDigits: 1, maximumFractionDigits: 2, minimumFractionDigits: 2};
         return (
             <div className="panel-body" role="body">
-                <p><span>{this.props.lengthLabel}: </span><span id="measure-len-res"><FormattedNumber key="len" {...decimalFormat} value={measureUtils.getFormattedLength(this.props.uom.length.unit, this.props.measurement.len)} /> {this.props.uom.length.label}</span></p>
-                <p><span>{this.props.areaLabel}: </span><span id="measure-area-res"><FormattedNumber key="area" {...decimalFormat} value={measureUtils.getFormattedArea(this.props.uom.area.unit, this.props.measurement.area)} /> {this.props.uom.area.label}</span></p>
+                <p><span>{this.props.lengthLabel}: </span><span id="measure-len-res"><NumberFormat key="len" numberParams={decimalFormat} value={measureUtils.getFormattedLength(this.props.uom.length.unit, this.props.measurement.len)} /> {this.props.uom.length.label}</span></p>
+                <p><span>{this.props.areaLabel}: </span><span id="measure-area-res"><NumberFormat key="area" numberParams={decimalFormat} value={measureUtils.getFormattedArea(this.props.uom.area.unit, this.props.measurement.area)} /> {this.props.uom.area.label}</span></p>
                 <p><span>{this.props.bearingLabel}: </span><span id="measure-bearing-res">{measureUtils.getFormattedBearingValue(this.props.measurement.bearing)}</span></p>
             </div>
         );

diff --git a/web/client/components/mapcontrols/measure/__tests__/MeasureComponent-test.jsx b/web/client/components/mapcontrols/measure/__tests__/MeasureComponent-test.jsx
@@ -10,8 +10,7 @@ var expect = require('expect');
 var React = require('react/addons');
 var ReactDOM = require('react-dom');
 var MeasureComponent = require('../MeasureComponent');
-var ReactIntl = require('react-intl');
-var FormattedNumber = ReactIntl.FormattedNumber;
+var NumberFormat = require('../../../I18N/Number');
 
 describe("test the MeasureComponent", () => {
     beforeEach((done) => {
@@ -233,7 +232,7 @@ describe("test the MeasureComponent", () => {
 
         let testDiv = document.createElement("div");
         document.body.appendChild(testDiv);
-        let val = ReactDOM.findDOMNode(ReactDOM.render((<span><FormattedNumber key="len" {...decimalFormat} value={10} />km</span>), testDiv));
+        let val = ReactDOM.findDOMNode(ReactDOM.render((<span><NumberFormat key="len" numberParams={decimalFormat} value={10} />km</span>), testDiv));
         cmp.setProps({
             measurement: {len: 10000}
         }, () => {
@@ -243,7 +242,7 @@ describe("test the MeasureComponent", () => {
 
         const areaSpan = document.getElementById('measure-area-res');
         expect(areaSpan).toExist();
-        val = ReactDOM.findDOMNode(ReactDOM.render((<span><FormattedNumber key="len" {...decimalFormat} value={1} />km²</span>), testDiv));
+        val = ReactDOM.findDOMNode(ReactDOM.render((<span><NumberFormat key="len" numberParams={decimalFormat} value={1} />km²</span>), testDiv));
         cmp.setProps({
             measurement: {geomType: 'Polygon', area: 1000000}
         }, () => {

diff --git a/web/client/components/mapcontrols/mouseposition/MousePositionLabelDD.jsx b/web/client/components/mapcontrols/mouseposition/MousePositionLabelDD.jsx
@@ -8,8 +8,7 @@
 var React = require('react');
 var BootstrapReact = require('react-bootstrap');
 var Label = BootstrapReact.Label;
-var ReactIntl = require('react-intl');
-var FormattedNumber = ReactIntl.FormattedNumber;
+var NumberFormat = require('../../I18N/Number');
 
 var MousePositionLabelDD = React.createClass({
     propTypes: {
@@ -24,9 +23,9 @@ var MousePositionLabelDD = React.createClass({
         return (
                 <h5>
                 <Label bsSize="lg" bsStyle="info">
-                    <span>Lat: </span><FormattedNumber key="latD" {...integerFormat} value={this.props.position.lat} />
+                    <span>Lat: </span><NumberFormat key="latD" numberParams={integerFormat} value={this.props.position.lat} />
                     <span>° Lng: </span>
-                    <FormattedNumber key="lngD" {...lngDFormat} value={this.props.position.lng} />
+                    <NumberFormat key="lngD" numberParams={lngDFormat} value={this.props.position.lng} />
                     <span>° </span>
                 </Label>
                 </h5>);

diff --git a/web/client/components/mapcontrols/mouseposition/MousePositionLabelDM.jsx b/web/client/components/mapcontrols/mouseposition/MousePositionLabelDM.jsx
@@ -8,8 +8,7 @@
 var React = require('react');
 var BootstrapReact = require('react-bootstrap');
 var Label = BootstrapReact.Label;
-var ReactIntl = require('react-intl');
-var FormattedNumber = ReactIntl.FormattedNumber;
+var NumberFormat = require('../../I18N/Number');
 
 var MousePositionLabelDM = React.createClass({
     propTypes: {
@@ -36,12 +35,12 @@ var MousePositionLabelDM = React.createClass({
         return (
                 <h5>
                 <Label bsSize="lg" bsStyle="info">
-                    <span>Lat: </span><FormattedNumber key="latD" {...integerFormat} value={pos.lat} />
-                    <span>° </span><FormattedNumber key="latM" {...decimalFormat} value={pos.latM} />
-                    <span>' </span>
-                    <span>Lng: </span><FormattedNumber key="lngD" {...lngDFormat} value={pos.lng} />
-                    <span>° </span><FormattedNumber key="lngM" {...decimalFormat} value={pos.lngM} />
-                    <span>' </span>
+                    <span>Lat: </span><NumberFormat key="latD" numberParams={integerFormat} value={pos.lat} />
+                    <span>° </span><NumberFormat key="latM" numberParams={decimalFormat} value={pos.latM} />
+                    <span>&quot; </span>
+                    <span>Lng: </span><NumberFormat key="lngD" numberParams={lngDFormat} value={pos.lng} />
+                    <span>° </span><NumberFormat key="lngM" numberParams={decimalFormat} value={pos.lngM} />
+                    <span>&quot; </span>
                 </Label>
                 </h5>);
     }