frontend/src/containers/Home.js

import React from 'react';
import {connect} from 'react-redux';
import { getAllTopics, getRandomTopicVideos } from '../actions/topics';
import Search from '../components/Search';
import Footer from '../components/Footer';
import RandomLocation from "../components/RandomLocation";
import RandomDate from "../components/RandomDate";
import RandomTopic from "../components/RandomTopic";
import Header from "../components/Header";

class Home extends React.Component {
  componentDidMount() {
    if (this.props.allTopics && this.props.allTopics.length > 0) {
      this.props.getRandomTopicVideos(this.props.allTopics);
    } else {
      this.props.getAllTopics();
    }
  }

  componentWillReceiveProps(nextProps) {
    //FIXME: this is quite ugly
    // We are trying to figure out if allTopics is loaded but no request made for random topic yet,
    // and then we want to load the random topic. But there should be a cleaner way to do this.
    if (!nextProps.loadingAllTopics && !this.props.randomTopic && (!this.props.loadingRandomTopic || nextProps.loadingRandomTopic)) {
      this.props.getRandomTopicVideos(this.props.allTopics);
    }
  }

  render() {
    return (
      <div>
        <RandomTopic
          topicName={ this.props.randomTopic || ''}
          videos = { this.props.randomTopicVideos || [] }
          loading = { this.props.loadingAllTopics || this.props.loadingRandomTopic }
        />
        <RandomLocation/>
        <RandomDate/>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  allTopics: state.topics.allTopics,
  loadingAllTopics: state.topics.loadingAllTopics,
  randomTopic: state.topics.randomTopic,
  loadingRandomTopic: state.topics.loadingRandomTopic,
  randomTopicVideos: state.topics.randomTopicVideos
});

const mapDispatchToProps = dispatch => ({
  getAllTopics: () => dispatch(getAllTopics()),
  getRandomTopicVideos: allTopics => dispatch(getRandomTopicVideos(allTopics))
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);