Compare commits

...

2 Commits

Author SHA1 Message Date
69c2181afa add random topic items count to state 2018-12-07 19:38:24 +02:00
Ahmed-Ayman
5c048b2036 add the see all videos, topics links 2018-12-07 19:35:40 +02:00
4 changed files with 15 additions and 10 deletions

View File

@ -3,6 +3,7 @@ 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 {
@ -16,10 +17,13 @@ class RandomTopic extends React.Component {
{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>
) )

View File

@ -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
}); });

View File

@ -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
}); });

View File

@ -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;
} }