diff --git a/common/app/Map/Block.jsx b/common/app/Map/Block.jsx index 1e7b6f7a98..f358094798 100644 --- a/common/app/Map/Block.jsx +++ b/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
No Challenges Found
; - } - return challenges.map(dashedName => ( - - )); - } - render() { const { title, @@ -97,7 +85,7 @@ export class Block extends PureComponent { key={ title } onSelect={ this.handleSelect } > - { isOpen && this.renderChallenges(challenges) } + { isOpen && } ); } diff --git a/common/app/Map/Challenges.jsx b/common/app/Map/Challenges.jsx new file mode 100644 index 0000000000..975553a48a --- /dev/null +++ b/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
No Challenges Found
; + } + return ( +
+ { + challenges.map(dashedName => ( + + )) + } +
+ ); + } +} + +Challenges.displayName = 'Challenges'; +Challenges.propTypes = propTypes;