import React, { PropTypes } from "react";
import { connect } from "react-redux";
import StatelessComponent from "../components/StatelessComponent";
import { apiCall } from "../utils";

export class Container extends React.Component {
    constructor(props) {
        /** Calling super() so we can use 'this' in the constructor */
        super(props);

        /** Default state */
        this.state = {
            isValid: false,
            isError: false,
        };

        /** Binding methods w/ this */
        this.componentMethod = this.componentMethod.bind(this);
    }
  
    componentMethod() {
        apiCall()
        .then(res => {
          this.setState({isValid: true});
          // Connect passes in dispatch() via props
          this.props.dispatch({type: 'SOME_ACTION', data: res});
        })
        .catch(err => {
          this.setState({isError: true;});
        });
    }

    render() {
        const { isError, isValid } = this.state;
        
        return (
            <StatelessComponent isValid={isValid} isError={isError} />
        );
    }
}

/** We're not passing mapStateToProps or mapDispatchToProps because all we need is just dispatch()  */
export default connect()(Container);