From 41ab4a736a0183433d2723aac0a5da9c6891dd35 Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <berkeleytrue@users.noreply.github.com>
Date: Sat, 6 Jan 2018 15:27:13 -0800
Subject: [PATCH] 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      | 39 ++++++++++++++++++++++++++++++++++
 common/app/Map/Super-Block.jsx | 26 ++++++-----------------
 2 files changed, 45 insertions(+), 20 deletions(-)
 create mode 100644 common/app/Map/Blocks.jsx

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 (
+      <div className={ `${ns}-accordion-block` }>
+        {
+          blocks.map(dashedName => (
+            <Block
+              dashedName={ dashedName }
+              key={ dashedName }
+            />
+          ))
+        }
+      </div>
+    );
+  }
+}
+
+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 => (
-      <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` }>
-          { isOpen && this.renderBlocks(blocks) }
-        </div>
+        <Blocks blocks={ blocks } />
       </Panel>
     );
   }
@@ -120,6 +106,6 @@ SuperBlock.displayName = 'SuperBlock';
 SuperBlock.propTypes = propTypes;
 
 export default connect(
-  makeMapStateToProps,
-  dispatchActions
+  mapStateToProps,
+  mapDispatchToProps
 )(SuperBlock);