66 lines
No EOL
2.1 KiB
JavaScript
66 lines
No EOL
2.1 KiB
JavaScript
import Grid from 'react-css-grid'
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import VideoItem from "./VideoItem";
|
|
import RandomItemTitle from "./SectionHeading";
|
|
|
|
class RandomTopic extends React.Component {
|
|
|
|
shuffleTopic() {
|
|
this.props.getRandomTopicVideos(this.props.allTopics);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<section>
|
|
<h2 className="section-heading">from the Archive Topics - من مواضيع الارشيف</h2>
|
|
<RandomItemTitle title={this.props.topicName}
|
|
count={this.props.topicCount}
|
|
src={'/topic/' + this.props.topicName}
|
|
/>
|
|
<Grid
|
|
width={450}
|
|
>
|
|
{/* View all topics button*/}
|
|
<button className="view-all-topics" onClick="">
|
|
<span className="english-text">All Topics - </span>
|
|
<span className="arabic-text"> جميع المواضيع </span>
|
|
|
|
</button>
|
|
{/* Shuffle button */}
|
|
<button className="shuffle-button" onClick={ this.shuffleTopic.bind(this) }>
|
|
<span className="english-text">Shuffle Topics - </span>
|
|
<span className="arabic-text"> موضوع عشوائي </span>
|
|
<i className="fa fa-random"></i>
|
|
</button>
|
|
</Grid>
|
|
|
|
<Grid className="random-topics"
|
|
width={220}
|
|
gap={12}>
|
|
{this.props.videos.map(video =>
|
|
<VideoItem id={video.id} key={video.id} title={video.title}/>
|
|
)}
|
|
{/*<Link to="/topics">*/}
|
|
{/*<span className="view-all-parents">See All Topics</span>*/}
|
|
{/*</Link>*/}
|
|
{/*<Link to="/topics">*/}
|
|
{/*<span className="view-all-items"> See All videos of {this.props.topicName} ({this.props.topicCount})</span>*/}
|
|
{/*</Link>*/}
|
|
</Grid>
|
|
</section>
|
|
|
|
)
|
|
}
|
|
}
|
|
|
|
RandomTopic.propTypes = {
|
|
topicName: PropTypes.string,
|
|
allTopics: PropTypes.array,
|
|
videos: PropTypes.array,
|
|
loading: PropTypes.bool,
|
|
topicCount: PropTypes.number,
|
|
getRandomTopicVideos: PropTypes.func
|
|
};
|
|
|
|
export default (RandomTopic); |