DT-2682: fix changing the locale (#2348)

* Do not render on server * Do not attach to PreferencesStore directly IndexPage now updates only via app/util/StoreListeningIntlProvider.js. Direct event monitoring did render the page before context.intl had updated. * Fixed an old unique key warning. * Cleanup and linter fix.
HSLdevcom · Jun 13, 2018 · 0e07067 · 0e07067
1 parent a4256c4
commit 0e07067
Show file tree

Hide file tree

Showing 6 changed files with 965 additions and 962 deletions.
diff --git a/app/component/IndexPage.js b/app/component/IndexPage.js
@@ -289,14 +289,6 @@ const Index = shouldUpdate(
 
 const IndexPageWithBreakpoint = withBreakpoint(Index);
 
-const IndexPageWithLang = connectToStores(
-  IndexPageWithBreakpoint,
-  ['PreferencesStore'],
-  context => ({
-    lang: context.getStore('PreferencesStore').getLanguage(),
-  }),
-);
-
 /* eslint-disable no-param-reassign */
 const processLocation = (locationString, locationState, intl) => {
   let location;
@@ -332,7 +324,7 @@ const processLocation = (locationString, locationState, intl) => {
 const tabs = [TAB_FAVOURITES, TAB_NEARBY];
 
 const IndexPageWithPosition = connectToStores(
-  IndexPageWithLang,
+  IndexPageWithBreakpoint,
   ['PositionStore'],
   (context, props) => {
     const locationState = context.getStore('PositionStore').getLocationState();
@@ -417,6 +409,8 @@ const IndexPageWithPosition = connectToStores(
         }
       });
     }
+    newProps.lang = context.getStore('PreferencesStore').getLanguage();
+
     return newProps;
   },
 );

diff --git a/app/component/LangSelect.js b/app/component/LangSelect.js
@@ -3,6 +3,7 @@ import React from 'react';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import ComponentUsageExample from './ComponentUsageExample';
 import { setLanguage } from '../action/userPreferencesActions';
+import { isBrowser } from '../util/browser';
 
 const selectLanguage = (executeAction, lang) => () =>
   executeAction(setLanguage, lang);
@@ -18,13 +19,23 @@ const language = (lang, currentLanguage, highlight, executeAction) => (
   </button>
 );
 
-const LangSelect = ({ currentLanguage }, { executeAction, config }) => (
-  <div key="lang-select" id="lang-select">
-    {config.availableLanguages.map(lang =>
-      language(lang, currentLanguage, lang === currentLanguage, executeAction),
-    )}
-  </div>
-);
+const LangSelect = ({ currentLanguage }, { executeAction, config }) => {
+  if (isBrowser) {
+    return (
+      <div key="lang-select" id="lang-select">
+        {config.availableLanguages.map(lang =>
+          language(
+            lang,
+            currentLanguage,
+            lang === currentLanguage,
+            executeAction,
+          ),
+        )}
+      </div>
+    );
+  }
+  return null;
+};
 
 LangSelect.displayName = 'LangSelect';
 

diff --git a/app/component/MessageBar.js b/app/component/MessageBar.js
@@ -38,7 +38,6 @@ class MessageBar extends Component {
     this.validMessages().map(el => (
       <MessageBarMessage
         key={el.id}
-        id={el.id}
         onMaximize={this.maximize}
         content={el.content[this.props.lang] || el.content.fi}
       />

diff --git a/app/component/MessageBarMessage.js b/app/component/MessageBarMessage.js
@@ -1,45 +1,49 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const heading = e => {
+const heading = (e, key) => {
   if (e.type === 'heading') {
-    return <h2>{e.content}</h2>;
+    return <h2 key={`${key}-heading`}>{e.content}</h2>;
   }
   return null;
 };
 
-const span = e => {
+// eslint-disable-next-line no-unused-vars
+const span = (e, key) => {
   if (e.type === 'text') {
     return e.content;
   }
   return null;
 };
 
-const a = e => {
+const a = (e, key) => {
   if (e.type === 'a') {
-    return <a href={e.href}>{e.content}</a>;
+    return (
+      <a key={`${key}-link`} href={e.href}>
+        {e.content}
+      </a>
+    );
   }
   return null;
 };
 
 const elements = [heading, span, a];
 
 const renderContent = content =>
-  content.map(fragment => elements.map(t => t(fragment)));
+  content.map((fragment, i) => elements.map(t => t(fragment, i)));
 
 /*
  * Renders message
  */
-const MessageBarMessage = ({ id, content, onMaximize }) => (
+const MessageBarMessage = ({ content, onMaximize }) => (
   // TOOD: find out how this should be accessible
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-  <div tabIndex={0} role="button" key={id} onClick={onMaximize}>
+  <div tabIndex={0} role="button" onClick={onMaximize}>
     {renderContent(content)}
   </div>
 );
 
 MessageBarMessage.propTypes = {
-  id: PropTypes.string.isRequired,
   content: PropTypes.array,
   onMaximize: PropTypes.func.isRequired,
 };

diff --git a/package.json b/package.json
@@ -55,17 +55,17 @@
     "trailingComma": "all"
   },
   "dependencies": {
-    "@babel/core": "7.0.0-beta.49",
-    "@babel/preset-env": "7.0.0-beta.49",
-    "@babel/preset-react": "7.0.0-beta.49",
-    "@babel/preset-stage-3": "7.0.0-beta.49",
-    "@babel/register": "7.0.0-beta.49",
+    "@babel/core": "7.0.0-beta.51",
+    "@babel/preset-env": "7.0.0-beta.51",
+    "@babel/preset-react": "7.0.0-beta.51",
+    "@babel/preset-stage-3": "7.0.0-beta.51",
+    "@babel/register": "7.0.0-beta.51",
     "@mapbox/sphericalmercator": "1.1.0",
     "@mapbox/vector-tile": "1.3.1",
     "babel-plugin-dynamic-import-node": "1.2.0",
     "babel-plugin-relay": "1.6.0",
     "body-parser": "1.18.3",
-    "classnames": "2.2.5",
+    "classnames": "2.2.6",
     "cookie-parser": "1.4.3",
     "debug": "3.1.0",
     "element-resize-detector": "^1.1.14",
@@ -88,9 +88,9 @@
     "material-ui": "0.20.1",
     "moment": "2.22.2",
     "moment-timezone": "0.5.17",
-    "mqtt": "2.18.0",
+    "mqtt": "2.18.1",
     "name-all-modules-plugin": "1.0.1",
-    "node-fetch": "2.1.2",
+    "node-fetch": "s2.1.2",
     "offline-plugin": "5.0.5",
     "pbf": "3.1.0",
     "point-in-polygon": "1.0.1",
@@ -99,10 +99,10 @@
     "proj4": "2.4.4",
     "prop-types": "15.6.1",
     "raven": "2.6.2",
-    "raven-js": "3.25.2",
+    "raven-js": "3.26.1",
     "react": "16.4.0",
     "react-autosuggest": "9.3.4",
-    "react-autowhatever": "10.1.1",
+    "react-autowhatever": "10.1.2",
     "react-cookie": "1.0.5",
     "react-dom": "16.4.0",
     "react-helmet": "5.2.0",
@@ -121,10 +121,10 @@
     "zurb-foundation-5": "5.4.7"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "7.0.0-beta.49",
-    "@babel/runtime": "7.0.0-beta.49",
+    "@babel/plugin-transform-runtime": "7.0.0-beta.51",
+    "@babel/runtime": "7.0.0-beta.51",
     "async": "2.6.1",
-    "autoprefixer": "8.5.1",
+    "autoprefixer": "8.6.2",
     "babel-eslint": "8.2.3",
     "babel-loader": "8.0.0-beta.3",
     "babel-plugin-transform-react-remove-prop-types": "0.4.13",
@@ -138,15 +138,15 @@
     "eslint-config-airbnb": "16.1.0",
     "eslint-config-prettier": "2.9.0",
     "eslint-import-resolver-webpack": "0.10.0",
-    "eslint-plugin-compat": "2.2.0",
+    "eslint-plugin-compat": "2.4.0",
     "eslint-plugin-graphql": "2.1.1",
     "eslint-plugin-import": "2.12.0",
     "eslint-plugin-jsx-a11y": "6.0.3",
     "eslint-plugin-prettier": "2.6.0",
     "eslint-plugin-react": "7.8.2",
     "favicons-webpack-plugin": "0.0.9",
     "file-loader": "1.1.11",
-    "gemini": "5.7.1",
+    "gemini": "5.7.2",
     "gemini-browserstack": "1.1.0",
     "graphql": "0.13.2",
     "html-reporter": "1.2.0",
@@ -158,21 +158,21 @@
     "nightwatch": "0.9.20",
     "node-sass": "4.9.0",
     "nodemon": "1.17.5",
-    "nyc": "11.7.3",
+    "nyc": "12.0.2",
     "optimize-css-assets-webpack-plugin": "4.0.2",
     "postcss-flexbugs-fixes": "3.3.1",
     "postcss-loader": "2.1.5",
     "prettier": "1.12.1",
     "relay-compiler": "1.6.0",
-    "sass-loader": "7.0.1",
+    "sass-loader": "7.0.3",
     "selenium-webdriver": "4.0.0-alpha.1",
     "stats-webpack-plugin": "0.6.2",
     "style-loader": "0.21.0",
     "stylelint": "9.2.1",
     "stylelint-scss": "3.1.0",
     "uglifyjs-webpack-plugin": "1.2.5",
     "url-loader": "1.0.1",
-    "webpack": "4.11.1",
+    "webpack": "4.12.0",
     "webpack-assets-manifest": "3.0.1",
     "webpack-bundle-analyzer": "2.13.1",
     "webpack-cli": "^2.1.3",