diff --git a/common/app/Map/Blocks.jsx b/common/app/Map/Blocks.jsx
new file mode 100644
index 0000000000..879a928334
--- /dev/null
+++ b/common/app/Map/Blocks.jsx
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import ns from './ns.json';
+import Block from './Block.jsx';
+
+const propTypes = {
+ blocks: PropTypes.array.isRequired
+};
+
+export default class Blocks extends Component {
+ shouldComponentUpdate(nextProps) {
+ return this.props.blocks !== nextProps.blocks;
+ }
+
+ render() {
+ const {
+ blocks
+ } = this.props;
+ if (blocks.length <= 0) {
+ return null;
+ }
+ return (
+
+ {
+ blocks.map(dashedName => (
+
+ ))
+ }
+
+ );
+ }
+}
+
+Blocks.displayName = 'Blocks';
+Blocks.propTypes = propTypes;
diff --git a/common/app/Map/Super-Block.jsx b/common/app/Map/Super-Block.jsx
index bce4bca68f..6d7038d2a3 100644
--- a/common/app/Map/Super-Block.jsx
+++ b/common/app/Map/Super-Block.jsx
@@ -6,7 +6,7 @@ import FA from 'react-fontawesome';
import { Panel } from 'react-bootstrap';
import ns from './ns.json';
-import Block from './Block.jsx';
+import Blocks from './Blocks.jsx';
import {
toggleThisPanel,
@@ -14,12 +14,12 @@ import {
} from './redux';
import { makeSuperBlockSelector } from '../entities';
-const dispatchActions = { toggleThisPanel };
+const mapDispatchToProps = { toggleThisPanel };
// make selectors unique to each component
// see
// reactjs/reselect
// sharing-selectors-with-props-across-multiple-components
-function makeMapStateToProps(_, { dashedName }) {
+function mapStateToProps(_, { dashedName }) {
return createSelector(
makeSuperBlockSelector(dashedName),
makePanelOpenSelector(dashedName),
@@ -52,18 +52,6 @@ export class SuperBlock extends PureComponent {
this.props.toggleThisPanel(eventKey);
}
- renderBlocks(blocks) {
- if (!Array.isArray(blocks) || !blocks.length) {
- return null;
- }
- return blocks.map(dashedName => (
-
- ));
- }
-
renderMessage(message) {
if (!message) {
return null;
@@ -108,9 +96,7 @@ export class SuperBlock extends PureComponent {
onSelect={ this.handleSelect }
>
{ this.renderMessage(message) }
-
- { isOpen && this.renderBlocks(blocks) }
-
+
);
}
@@ -120,6 +106,6 @@ SuperBlock.displayName = 'SuperBlock';
SuperBlock.propTypes = propTypes;
export default connect(
- makeMapStateToProps,
- dispatchActions
+ mapStateToProps,
+ mapDispatchToProps
)(SuperBlock);