import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchHouseholds } from '../redux/modules/Households/actions'
import Household from '../views/Household'
import LeadDetail from '../views/LeadDetail'
import MemberDetail from '../views/MemberDetail'
import ClientHero from '../views/ClientHero'
import ClientsContainer from './ClientsContainer'
import LeadsContainer from './LeadsContainer'
import { Route, Switch, Link } from 'react-router-dom'
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() {
    const clients = this.props.households.filter(h => h.client === true)
    const leads = this.props.households.filter(h => h.client !== true)

    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"
              render={() => <ClientsContainer clients={clients} />}
            />
            <Route
              exact
              path="/households/leads"
              render={() => <LeadsContainer leads={leads} />}
            />
            <Route
              exact
              path={`/households/clients/:householdId/members/:id`}
              component={MemberDetail}
            />
            <Route path={`/households/clients/:id`} component={Household} />
            <Route path={`/households/leads/:id`} component={LeadDetail} />
          </Switch>
        </div>
      </Container>
    )
  }
}

export default connect(
  state => {
    return {
      households: state.households,
    }
  },
  { fetchHouseholds, fetchMembers }
)(HouseholdsContainer)

@@ -1782,42 +1782,14 @@
 oute
-%0A              exact%0A             
+ exact
  pat
@@ -1811,30 +1811,16 @@
 clients%22
-%0A             
  render=
@@ -1861,36 +1861,24 @@
 clients%7D /%3E%7D
-%0A           
  /%3E%0A        
@@ -1891,42 +1891,14 @@
 oute
-%0A              exact%0A             
+ exact
  pat
@@ -1918,30 +1918,16 @@
 s/leads%22
-%0A             
  render=
@@ -1966,28 +1966,16 @@
 ads%7D /%3E%7D
-%0A           
  /%3E%0A    
@@ -1992,42 +1992,14 @@
 oute
-%0A              exact%0A             
+ exact
  pat
@@ -2048,30 +2048,16 @@
 rs/:id%60%7D
-%0A             
  compone
@@ -2073,28 +2073,16 @@
 rDetail%7D
-%0A           
  /%3E%0A    
@@ -2324,83 +2324,45 @@
 ect(
-%0A  state =%3E %7B%0A    return %7B%0A      households: state.households,%0A    %7D%0A  %7D,%0A 
+(%7B households %7D) =%3E (%7B households %7D),
  %7B f
@@ -2391,17 +2391,16 @@
 embers %7D
-%0A
 )(Househ

Update HouseholdsContainer connect