Files
freeCodeCamp/common/app/routes/challenges/components/map/Block.jsx

103 lines
2.6 KiB
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
2016-05-10 21:25:12 -07:00
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import FA from 'react-fontawesome';
import PureComponent from 'react-pure-render/component';
import { Panel } from 'react-bootstrap';
import Challenge from './Challenge.jsx';
import { toggleThisPanel } from '../../redux/actions';
const dispatchActions = { toggleThisPanel };
const mapStateToProps = createSelector(
(_, props) => props.dashedName,
state => state.entities.block,
state => state.entities.challenge,
(state, props) => state.challengesApp.mapUi[props.dashedName],
(dashedName, blockMap, challengeMap, isOpen) => {
const block = blockMap[dashedName];
return {
isOpen,
dashedName,
title: block.title,
time: block.time,
challenges: block.challenges
};
}
);
2016-05-10 21:25:12 -07:00
export class Block extends PureComponent {
constructor(...props) {
super(...props);
this.handleSelect = this.handleSelect.bind(this);
}
static displayName = 'Block';
static propTypes = {
title: PropTypes.string,
2016-06-09 16:02:51 -07:00
dashedName: PropTypes.string,
time: PropTypes.string,
isOpen: PropTypes.bool,
challenges: PropTypes.array,
toggleThisPanel: PropTypes.func
};
handleSelect(eventKey, e) {
e.preventDefault();
this.props.toggleThisPanel(eventKey);
}
2016-06-22 20:25:49 -07:00
renderHeader(isOpen, title, time, isCompleted) {
return (
<div>
<h3 className={ isCompleted ? 'faded clear-fix' : 'clear-fix' }>
<FA
className='no-link-underline'
name={ isOpen ? 'caret-down' : 'caret-right' }
/>
<span>
{ title }
</span>
<span className='challenge-block-time'>({ time })</span>
</h3>
</div>
);
}
renderChallenges(challenges) {
if (!Array.isArray(challenges) || !challenges.length) {
return <div>No Challenges Found</div>;
}
return challenges.map(dashedName => (
<Challenge
dashedName={ dashedName }
key={ dashedName }
/>
));
}
render() {
2016-06-09 16:02:51 -07:00
const {
title,
time,
dashedName,
isOpen,
challenges
2016-06-09 16:02:51 -07:00
} = this.props;
return (
<Panel
bsClass='map-accordion-panel-nested'
collapsible={ true }
eventKey={ dashedName || title }
expanded={ isOpen }
2016-06-22 20:25:49 -07:00
header={ this.renderHeader(isOpen, title, time) }
id={ title }
2016-06-09 16:02:51 -07:00
key={ title }
onSelect={ this.handleSelect }
2016-06-09 16:02:51 -07:00
>
{ this.renderChallenges(challenges) }
</Panel>
);
}
}
2016-05-10 21:25:12 -07:00
export default connect(mapStateToProps, dispatchActions)(Block);