84 lines
1.7 KiB
JavaScript
84 lines
1.7 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import { createSelector } from 'reselect';
|
|
import { connect } from 'react-redux';
|
|
|
|
import Youtube from 'react-youtube';
|
|
import PureComponent from 'react-pure-render/component';
|
|
import { Col } from 'react-bootstrap';
|
|
import SidePanel from './Side-Panel.jsx';
|
|
import ToolPanel from './Tool-Panel.jsx';
|
|
|
|
import { challengeSelector } from '../../redux/selectors';
|
|
|
|
const mapStateToProps = createSelector(
|
|
challengeSelector,
|
|
(
|
|
{
|
|
challenge: {
|
|
id,
|
|
title,
|
|
description,
|
|
challengeSeed: [ videoId = '' ] = []
|
|
} = {}
|
|
}
|
|
) => ({
|
|
id,
|
|
videoId,
|
|
title,
|
|
description
|
|
})
|
|
);
|
|
|
|
export class Project extends PureComponent {
|
|
static displayName = 'Project';
|
|
static propTypes = {
|
|
id: PropTypes.string,
|
|
videoId: PropTypes.string,
|
|
title: PropTypes.string,
|
|
description: PropTypes.arrayOf(PropTypes.string),
|
|
isCompleted: PropTypes.bool
|
|
};
|
|
|
|
|
|
render() {
|
|
const {
|
|
id,
|
|
title,
|
|
videoId,
|
|
isCompleted,
|
|
description
|
|
} = this.props;
|
|
|
|
return (
|
|
<div>
|
|
<Col md={ 4 }>
|
|
<SidePanel
|
|
description={ description }
|
|
isCompleted={ isCompleted }
|
|
title={ title }
|
|
/>
|
|
</Col>
|
|
<Col
|
|
md={ 8 }
|
|
xs={ 12 }
|
|
>
|
|
<div className='embed-responsive embed-responsive-16by9'>
|
|
<Youtube
|
|
className='embed-responsive-item'
|
|
id={ id }
|
|
videoId={ videoId }
|
|
/>
|
|
</div>
|
|
<br />
|
|
<ToolPanel />
|
|
<br />
|
|
</Col>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps
|
|
)(Project);
|