feat(Map): Create Challenges comp with scu

Reduce challenge map open time

common/app/Map/Block.jsx

@@ -6,7 +6,7 @@ import FA from 'react-fontawesome';
 import { Panel } from 'react-bootstrap';
 
 import ns from './ns.json';
-import Challenge from './Challenge.jsx';
+import Challenges from './Challenges.jsx';
 import {
   toggleThisPanel,
 
@@ -26,7 +26,7 @@ function makeMapStateToProps(_, { dashedName }) {
         dashedName,
         title: block.title,
         time: block.time,
-        challenges: block.challenges
+        challenges: block.challenges || []
       };
     }
   );
@@ -66,18 +66,6 @@ export class Block extends PureComponent {
     );
   }
 
-  renderChallenges(challenges) {
-    if (!Array.isArray(challenges) || !challenges.length) {
-      return <div>No Challenges Found</div>;
-    }
-    return challenges.map(dashedName => (
-      <Challenge
-        dashedName={ dashedName }
-        key={ dashedName }
-      />
-    ));
-  }
-
   render() {
     const {
       title,
@@ -97,7 +85,7 @@ export class Block extends PureComponent {
         key={ title }
         onSelect={ this.handleSelect }
         >
-        { isOpen && this.renderChallenges(challenges) }
+        { isOpen && <Challenges challenges={ challenges } /> }
       </Panel>
     );
   }

common/app/Map/Challenges.jsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import Challenge from './Challenge.jsx';
+
+const propTypes = {
+  challenges: PropTypes.array.isRequired
+};
+
+export default class Challenges extends Component {
+  shouldComponentUpdate(nextProps) {
+    return this.props.challenges !== nextProps.challenges;
+  }
+  render() {
+    const { challenges } = this.props;
+    if (!challenges.length) {
+      return <div>No Challenges Found</div>;
+    }
+    return (
+      <div>
+        {
+          challenges.map(dashedName => (
+            <Challenge
+              dashedName={ dashedName }
+              key={ dashedName }
+            />
+          ))
+        }
+      </div>
+    );
+  }
+}
+
+Challenges.displayName = 'Challenges';
+Challenges.propTypes = propTypes;