#1414 Fixed translations when language changes in the home and manager pages

web/client/components/manager/users/GroupGrid.jsx

@@ -11,6 +11,8 @@ const {Grid, Row, Col} = require('react-bootstrap');
 const GroupCard = require('./GroupCard');
 const Spinner = require('react-spinkit');
 const Message = require('../../I18N/Message');
+const LocaleUtils = require('../../../utils/LocaleUtils');
+
 var GroupsGrid = React.createClass({
     propTypes: {
         loadGroups: React.PropTypes.func,
@@ -23,6 +25,9 @@ var GroupsGrid = React.createClass({
         bottom: React.PropTypes.node,
         colProps: React.PropTypes.object
     },
+    contextTypes: {
+        messages: React.PropTypes.object
+    },
     getDefaultProps() {
         return {
             loadGroups: () => {},
@@ -69,11 +74,11 @@ var GroupsGrid = React.createClass({
             let actions = [{
                      onClick: () => {this.props.onEdit(group); },
                      glyph: "wrench",
-                     tooltip: <Message msgId="usergroups.editGroup" />
+                     tooltip: LocaleUtils.getMessageById(this.context.messages, "usergroups.editGroup")
              }, {
                      onClick: () => {this.props.onDelete(group && group.id); },
                      glyph: "remove-circle",
-                     tooltip: <Message msgId="usergroups.deleteGroup" />
+                     tooltip: LocaleUtils.getMessageById(this.context.messages, "usergroups.deleteGroup")
              }];
             if ( group && group.groupName === "everyone") {
                 actions = [];
@@ -82,7 +87,7 @@ var GroupsGrid = React.createClass({
             return <Col key={"user-" + group.id} {...this.props.colProps}><GroupCard group={group} actions={actions}/></Col>;
         });
     },
-    render: function() {
+    render() {
         return (
                 <Grid style={{position: "relative"}} fluid={this.props.fluid}>
                     {this.renderLoading()}

web/client/components/manager/users/UserCard.jsx

@@ -60,7 +60,7 @@ const UserCard = React.createClass({
             <Glyphicon glyph="user" />
             </Button></div>);
     },
-    render: function() {
+    render() {
         return (
            <GridCard className="user-thumb" style={this.props.style} header={this.props.user.name}
                 actions={this.props.actions}

web/client/components/manager/users/UserGrid.jsx

@@ -11,6 +11,8 @@ const {Grid, Row, Col} = require('react-bootstrap');
 const UserCard = require('./UserCard');
 const Spinner = require('react-spinkit');
 const Message = require('../../I18N/Message');
+
+const LocaleUtils = require('../../../utils/LocaleUtils');
 var UsersGrid = React.createClass({
     propTypes: {
         loadUsers: React.PropTypes.func,
@@ -23,6 +25,9 @@ var UsersGrid = React.createClass({
         bottom: React.PropTypes.node,
         colProps: React.PropTypes.object
     },
+    contextTypes: {
+        messages: React.PropTypes.object
+    },
     getDefaultProps() {
         return {
             loadUsers: () => {},
@@ -69,22 +74,22 @@ var UsersGrid = React.createClass({
             let actions = [{
                      onClick: () => {this.props.onEdit(user); },
                      glyph: "wrench",
-                     tooltip: <Message msgId="users.editUser" />
+                     tooltip: LocaleUtils.getMessageById(this.context.messages, "users.editUser")
             }];
             if ( user && user.role === "GUEST") {
                 actions = [];
             } else if (user.id !== this.props.myUserId) {
                 actions.push({
                         onClick: () => {this.props.onDelete(user && user.id); },
                         glyph: "remove-circle",
-                        tooltip: <Message msgId="users.deleteUser" />
+                        tooltip: LocaleUtils.getMessageById(this.context.messages, "users.deleteUser")
                 });
             }
 
             return <Col key={"user-" + user.id} {...this.props.colProps}><UserCard user={user} actions={actions}/></Col>;
         });
     },
-    render: function() {
+    render() {
         return (
                 <Grid style={{position: "relative"}} fluid={this.props.fluid}>
                     {this.renderLoading()}

web/client/components/maps/MapCard.jsx

@@ -13,6 +13,7 @@ const thumbUrl = require('./style/default.png');
 const assign = require('object-assign');
 
 const ConfirmModal = require('./modals/ConfirmModal');
+const LocaleUtils = require('../../utils/LocaleUtils');
 
 require("./style/mapcard.css");
 
@@ -27,6 +28,9 @@ const MapCard = React.createClass({
         onEdit: React.PropTypes.func,
         onMapDelete: React.PropTypes.func
     },
+    contextTypes: {
+        messages: React.PropTypes.object
+    },
     getDefaultProps() {
         return {
             style: {
@@ -67,7 +71,7 @@ const MapCard = React.createClass({
         var availableAction = [{
             onClick: (evt) => {this.stopPropagate(evt); this.props.viewerUrl(this.props.map); },
             glyph: "chevron-right",
-            tooltip: <Message msgId="manager.openInANewTab" />
+            tooltip: LocaleUtils.getMessageById(this.context.messages, "manager.openInANewTab")
         }];
 
         if (this.props.map.canEdit === true) {
@@ -76,13 +80,13 @@ const MapCard = React.createClass({
                  glyph: "wrench",
                  disabled: this.props.map.updating,
                  loading: this.props.map.updating,
-                 tooltip: <Message msgId="manager.editMapMetadata" />
+                 tooltip: LocaleUtils.getMessageById(this.context.messages, "manager.editMapMetadata")
          }, {
                  onClick: (evt) => {this.stopPropagate(evt); this.displayDeleteDialog(); },
                  glyph: "remove-circle",
                  disabled: this.props.map.deleting,
                  loading: this.props.map.deleting,
-                 tooltip: <Message msgId="manager.deleteMap" />
+                 tooltip: LocaleUtils.getMessageById(this.context.messages, "manager.deleteMap")
          });
         }
         return (

web/client/plugins/manager/users/GroupGrid.jsx

@@ -43,4 +43,4 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
         }
     });
 };
-module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps)(require('../../../components/manager/users/GroupGrid'));
+module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps, {pure: false})(require('../../../components/manager/users/GroupGrid'));

web/client/plugins/manager/users/UserGrid.jsx

@@ -15,7 +15,7 @@ const PaginationToolbar = require('./UsersPaginationToolbar');
 const mapStateToProps = (state) => {
     const users = state && state.users;
     return {
-        users: users && state.users.users,
+        users: users && users.users,
         loading: users && (users.status === "loading"),
         stateProps: users && users.stateProps,
         start: users && users.start,
@@ -43,4 +43,4 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
         }
     });
 };
-module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps)(require('../../../components/manager/users/UserGrid'));
+module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps, {pure: false})(require('../../../components/manager/users/UserGrid'));