72 lines
1.5 KiB
JavaScript
72 lines
1.5 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Col } from 'react-bootstrap';
|
|
import { createSelector } from 'reselect';
|
|
import PureComponent from 'react-pure-render/component';
|
|
|
|
import Editor from './Editor.jsx';
|
|
import SidePanel from './Side-Panel.jsx';
|
|
import Preview from './Preview.jsx';
|
|
import { challengeSelector } from '../redux/selectors';
|
|
|
|
const mapStateToProps = createSelector(
|
|
challengeSelector,
|
|
state => state.challengesApp.content,
|
|
({ challenge, showPreview, mode }, content) => ({
|
|
content,
|
|
challenge,
|
|
showPreview,
|
|
mode
|
|
})
|
|
);
|
|
|
|
export class Challenge extends PureComponent {
|
|
static displayName = 'Challenge';
|
|
|
|
static propTypes = {
|
|
showPreview: PropTypes.bool,
|
|
challenge: PropTypes.object
|
|
};
|
|
|
|
static defaultProps = {
|
|
challenge: {}
|
|
};
|
|
|
|
renderPreview(showPreview) {
|
|
if (!showPreview) {
|
|
return null;
|
|
}
|
|
return (
|
|
<Col
|
|
lg={ 3 }
|
|
md={ 4 }>
|
|
<Preview />
|
|
</Col>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { content, challenge, mode, showPreview } = this.props;
|
|
return (
|
|
<div>
|
|
<Col
|
|
lg={ 3 }
|
|
md={ showPreview ? 3 : 4 }>
|
|
<SidePanel { ...challenge }/>
|
|
</Col>
|
|
<Col
|
|
lg={ showPreview ? 6 : 9 }
|
|
md={ showPreview ? 5 : 8 }>
|
|
<Editor
|
|
content={ content }
|
|
mode={ mode }
|
|
/>
|
|
</Col>
|
|
{ this.renderPreview(showPreview) }
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Challenge);
|