import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import FA from 'react-fontawesome'; import { Panel } from 'react-bootstrap'; import ns from './ns.json'; import Challenge from './Challenge.jsx'; import { toggleThisPanel, makePanelOpenSelector, makePanelHiddenSelector } from './redux'; import { makeBlockSelector } from '../entities'; const dispatchActions = { toggleThisPanel }; function makeMapStateToProps(_, { dashedName }) { return createSelector( makeBlockSelector(dashedName), makePanelOpenSelector(dashedName), makePanelHiddenSelector(dashedName), (block, isOpen, isHidden) => { return { isOpen, isHidden, dashedName, title: block.title, time: block.time, challenges: block.challenges }; } ); } const propTypes = { challenges: PropTypes.array, dashedName: PropTypes.string, isHidden: PropTypes.bool, isOpen: PropTypes.bool, time: PropTypes.string, title: PropTypes.string, toggleThisPanel: PropTypes.func }; export class Block extends PureComponent { constructor(...props) { super(...props); this.handleSelect = this.handleSelect.bind(this); } handleSelect(eventKey, e) { e.preventDefault(); this.props.toggleThisPanel(eventKey); } renderHeader(isOpen, title, time, isCompleted) { return (