feat(Map): Add Blocks component

Makes a single point of update for the blocks under a superblock and
decrease the speed to open/close a superblock consistently

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 (
+      <div className={ `${ns}-accordion-block` }>
+        {
+          blocks.map(dashedName => (
+            <Block
+              dashedName={ dashedName }
+              key={ dashedName }
+            />
+          ))
+        }
+      </div>
+    );
+  }
+}
+
+Blocks.displayName = 'Blocks';
+Blocks.propTypes = propTypes;

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 => (
-      <Block
-        dashedName={ dashedName }
-        key={ dashedName }
-      />
-    ));
-  }
-
   renderMessage(message) {
     if (!message) {
       return null;
@@ -108,9 +96,7 @@ export class SuperBlock extends PureComponent {
         onSelect={ this.handleSelect }
         >
         { this.renderMessage(message) }
-        <div className={ `${ns}-accordion-block` }>
+        <Blocks blocks={ blocks } />
-          { isOpen && this.renderBlocks(blocks) }
-        </div>
       </Panel>
     );
   }
@@ -120,6 +106,6 @@ SuperBlock.displayName = 'SuperBlock';
 SuperBlock.propTypes = propTypes;
 
 export default connect(
-  makeMapStateToProps,
+  mapStateToProps,
-  dispatchActions
+  mapDispatchToProps
 )(SuperBlock);