Compare commits
2 Commits
e8a23bd1ca
...
69c2181afa
Author | SHA1 | Date | |
---|---|---|---|
69c2181afa | |||
|
5c048b2036 |
|
@ -3,23 +3,27 @@ import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import VideoItem from "./VideoItem";
|
import VideoItem from "./VideoItem";
|
||||||
import SectionHeading from "./SectionHeading";
|
import SectionHeading from "./SectionHeading";
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
class RandomTopic extends React.Component {
|
class RandomTopic extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<section>
|
<section>
|
||||||
<SectionHeading title={ this.props.topicName } />
|
<SectionHeading title={this.props.topicName}/>
|
||||||
<Grid
|
<Grid
|
||||||
width={450}
|
width={450}
|
||||||
gap={16}>
|
gap={16}>
|
||||||
{ this.props.videos.map(video =>
|
{this.props.videos.map(video =>
|
||||||
<VideoItem id={ video.id } title={ video.title } />
|
<VideoItem id={video.id} title={video.title}/>
|
||||||
)}
|
)}
|
||||||
|
<Link to="/topics">
|
||||||
|
See All Topics
|
||||||
|
</Link>
|
||||||
|
<Link to="/topics">
|
||||||
|
See All videos of {this.props.topicName} ()
|
||||||
|
</Link>
|
||||||
</Grid>
|
</Grid>
|
||||||
<a href="/topics">See All videos</a>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
|
@ -18,7 +18,6 @@ class Home extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
console.log('nextProps', nextProps);
|
|
||||||
// This is slightly awkward - we need to check that we have all topics,
|
// This is slightly awkward - we need to check that we have all topics,
|
||||||
// But don't have a random topic yet (or at not already loading a random topic)
|
// But don't have a random topic yet (or at not already loading a random topic)
|
||||||
if ((this.props.allTopics || nextProps.allTopics) && !this.props.loadingRandomTopic && !nextProps.loadingRandomTopic && !this.props.randomTopic) {
|
if ((this.props.allTopics || nextProps.allTopics) && !this.props.loadingRandomTopic && !nextProps.loadingRandomTopic && !this.props.randomTopic) {
|
||||||
|
@ -31,6 +30,7 @@ class Home extends React.Component {
|
||||||
<div>
|
<div>
|
||||||
<RandomTopic
|
<RandomTopic
|
||||||
topicName={ this.props.randomTopic || ''}
|
topicName={ this.props.randomTopic || ''}
|
||||||
|
topicCount={ this.props.randomTopicCount }
|
||||||
videos = { this.props.randomTopicVideos || [] }
|
videos = { this.props.randomTopicVideos || [] }
|
||||||
loading = { this.props.loadingAllTopics || this.props.loadingRandomTopic }
|
loading = { this.props.loadingAllTopics || this.props.loadingRandomTopic }
|
||||||
/>
|
/>
|
||||||
|
@ -45,6 +45,7 @@ const mapStateToProps = state => ({
|
||||||
allTopics: state.topics.allTopics,
|
allTopics: state.topics.allTopics,
|
||||||
loadingAllTopics: state.topics.loadingAllTopics,
|
loadingAllTopics: state.topics.loadingAllTopics,
|
||||||
randomTopic: state.topics.randomTopic,
|
randomTopic: state.topics.randomTopic,
|
||||||
|
randomTopicCount: static.topics.randomTopicCount,
|
||||||
loadingRandomTopic: state.topics.loadingRandomTopic,
|
loadingRandomTopic: state.topics.loadingRandomTopic,
|
||||||
randomTopicVideos: state.topics.randomTopicVideos
|
randomTopicVideos: state.topics.randomTopicVideos
|
||||||
});
|
});
|
||||||
|
|
|
@ -25,7 +25,8 @@ export default function(state={}, action) {
|
||||||
case LOADED_RANDOM_TOPIC:
|
case LOADED_RANDOM_TOPIC:
|
||||||
return Object.assign({}, state, {
|
return Object.assign({}, state, {
|
||||||
loadingRandomTopic: false,
|
loadingRandomTopic: false,
|
||||||
randomTopic: action.payload.topic,
|
randomTopic: action.payload.topic.name,
|
||||||
|
randomTopicCount: action.payload.topic.items,
|
||||||
randomTopicVideos: action.payload.videos
|
randomTopicVideos: action.payload.videos
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
|
|
||||||
export default function getRandomTopic(allTopics, minVideos=4) {
|
export default function getRandomTopic(allTopics, minVideos=4) {
|
||||||
const validTopics = allTopics.filter(topic => topic.items >= minVideos);
|
const validTopics = allTopics.filter(topic => topic.items >= minVideos);
|
||||||
console.log('valid topics', validTopics);
|
return validTopics[Math.floor(Math.random() * validTopics.length)];
|
||||||
return validTopics[Math.floor(Math.random() * validTopics.length)].name;
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user