import React from 'react';
import SectionHeading from "../components/SectionHeading";
import TopicsList from "../components/TopicsList";
import {getAllTopics} from "../actions/topics";
import  {connect} from 'react-redux'
class TopicsListContainer extends React.Component {
  componentDidMount(){
    // if the data isn't there call the action.
    if (!this.props.allTopics){
      this.props.getAllTopics();
    }
  }
  render() {
    return (
      <section>
        <SectionHeading title="All Topics"/>
        {/* TODO: get the topics objects*/}
        <TopicsList allTopics={this.props.allTopics}/>
      </section>
    );
  }
}

// function ->
// - recieves the global state.
// - maps the global state to the local props of the component.
// - maps the global actions to the local props of the component.
/**
 *
 * @param state
 * @returns object
 */
const mapStateToProps = state => ({
  allTopics: state.topics.allTopics,
  loadingAllTopics: state.topics.loadingAllTopics,
});
/**
 *
 * @param dispatch: Redux's action dispatcher.
 * @returns {{}}
 */
const mapDispatchToProps = dispatch => ({
  getAllTopics: () => dispatch(getAllTopics()),
});

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