import React, { Component } from 'react'
import { connect } from 'react-redux'
import Household from '../views/Household'
import LeadDetail from '../views/LeadDetail'
import ClientHero from '../views/ClientHero'
import ClientsContainer from './ClientsContainer'
import LeadsContainer from './LeadsContainer'
import { Route, Switch, Link } from 'react-router-dom'
import { fetchHouseholds } from '../redux/modules/Households/actions'
import { fetchMembers } from '../redux/modules/Members/actions'
import { Button, Icon, Container, Divider } from 'semantic-ui-react'

class HouseholdsContainer extends Component {
  constructor(props) {
    super(props)
    // props.fetchHouseholds()
    props.fetchMembers()
  }

  render() {
    return (
      <Container>
        <div className="household-content">
          <Container textAlign="center">
            <Link to="/households/clients">
              <Button animated>
                <Button.Content visible>Clients</Button.Content>
                <Button.Content hidden>
                  <Icon name='money' />
                </Button.Content>
              </Button>
            </Link>
            <Link to="/households/leads">
              <Button animated>
                <Button.Content visible>Leads</Button.Content>
                <Button.Content hidden>
                  <Icon name='left arrow' />
                </Button.Content>
              </Button>
            </Link>
          </Container>
          <Divider />
          <Switch>
            <Route exact path="/households" component={ClientHero} />
            <Route exact path="/households/clients" component={ClientsContainer} />
            <Route exact path="/households/leads" component={LeadsContainer} />
            <Route path={`/households/clients/:id`} component={Household} />
            <Route path={`/households/leads/:id`} component={LeadDetail} />
          </Switch>
        </div>
      </Container>
    )
  }
}

export default connect(null, { fetchHouseholds, fetchMembers })(HouseholdsContainer)
@@ -716,24 +716,168 @@
  render() %7B%0A
+    const clients = this.props.households.filter(h =%3E h.client == true)%0A    const leads = this.props.households.filter(h =%3E h.client !== true)%0A%0A
     return (
@@ -1765,27 +1765,31 @@
 lients%22 
-component=%7B
+render=%7B() =%3E %3C
 ClientsC
@@ -1788,32 +1788,53 @@
 ClientsContainer
+ clients=%7Bclients%7D /%3E
 %7D /%3E%0A           
@@ -1876,33 +1876,54 @@
 ds%22 
-component=%7BLeadsContainer
+render=%7B() =%3E %3CLeadsContainer leads=%7Bleads%7D /%3E
 %7D /%3E
@@ -2170,12 +2170,68 @@
 ect(
-null
+state =%3E %7B%0A  return %7B%0A    households: state.households%0A  %7D%0A%7D
 , %7B 

Connect HouseholdsContainer to redux store