content: 
  import React, { Component } from 'react';
  import {Animated, TouchableOpacity } from 'react-native';
  import { connect } from 'react-redux';
  import { View, Container, Header, Title, Content, Text, Button, Icon , Footer, FooterTab, Card, CardItem, ListItem, Spinner} from 'native-base';
  import { Grid, Row } from 'react-native-easy-grid';
  import { createStore, applyMiddleware, combineReducers, bindActionCreators} from 'redux';
  import { openDrawer, closeDrawer } from '../../actions/drawer';
  import { replaceRoute, replaceOrPushRoute, pushNewRoute } from '../../actions/route';
  import { setIndex } from '../../actions/list';
  import myTheme from '../../themes/base-theme';
  import styles from './styles';
  import CategoryBarChart from './categoryBar';
  import { getCategoriesSum, getIncomesSum, getExpensesSum} from '../../actions/overview';
  
  class Home extends Component {
      
       constructor(props) {
          super(props);
      }
  
      componentDidMount() {
          this.initializeOverview().done();
      }
  
      componentWillMount() {
          //  this.getExpensesSum();
      }
  
      async initializeOverview() {
              await this.props.state
              await this.props.getExpensesSum();
              await this.props.getIncomesSum();
              await this.props.getCategoriesSum("2014-07-08", "2017-07-08");
      }
  
      static propTypes = {
          openDrawer: React.PropTypes.func,
          closeDrawer: React.PropTypes.func,
          replaceRoute: React.PropTypes.func,
          replaceOrPushRoute: React.PropTypes.func,
          pushNewRoute: React.PropTypes.func,
          setIndex: React.PropTypes.func,
          name: React.PropTypes.string,
          list: React.PropTypes.arrayOf(React.PropTypes.string),
          getExpensesSum: React.PropTypes.func,
          getIncomesSum: React.PropTypes.func,
          getCategoriesSum: React.PropTypes.func,
  
     }
  
   replaceRoute(route) {
      this.props.replaceRoute(route);
    }
  
    pushNewRoute(route, index) {
      this.props.setIndex(index);
      this.props.pushNewRoute(route);
    }
  
    render() {
        
        let Categories = this.props.categories.map((item) => {
            return < CategoryBarChart key={item.Id} Name={item.Name} Sum = {item.Sum} SumAll = {this.props.expensesSum} Window = '200' />                           
          })   
                  console.log('mapp -'+JSON.stringify(this.props.loadingCategories + "****" + this.props.loadingExpensesSum + "****" + this.props.loadingIncomesSum))
  
      {
          if(this.props.loadingExpensesSum || this.props.loadingIncomesSum  || this.props.loadingCategories)
          {
            return (
              <Container theme={myTheme} style={styles.container}>
                  <Header>
                    <Button transparent onPress={this.props.openDrawer}>
                      <Icon name="ios-menu" />
                        </Button>
                            <Title>{(this.props.name) ? this.props.name : 'Home'}</Title>
                            <Button transparent onPress={() => this.pushNewRoute('add')}>
                            <Icon name="ios-add-circle" />
                        </Button>
                      </Header>
                      <Content>
                          <Spinner  />
                      </Content>
                      <Footer >
                          <FooterTab>
                              <Button active onPress={() => this.replaceRoute('home')}>
                                  Overview
                                  <Icon name='ios-pie-outline' />
                              </Button>
                              <Button  inactive onPress={() => this.replaceRoute('history')}>
                                  History
                                  <Icon name='ios-list-box-outline' />
                              </Button>
                          </FooterTab>
                      </Footer>
                </Container>
  
            );
          
          }else {
              
               return (
                   
                <Container theme={myTheme} style={styles.container}>
                  <Header>
                    <Button transparent onPress={this.props.openDrawer}>
                      <Icon name="ios-menu" />
                    </Button>
  
                    <Title>{(this.props.name) ? this.props.name : 'Home'}</Title>
  
                    <Button transparent onPress={() => this.pushNewRoute('add')}>
                      <Icon name="ios-add-circle" />
                    </Button>
                  </Header>
  
                  <Content>
                    <Card>
                          <CardItem>                                    
                                { this.props.loadingIncomesSum ? <Spinner  /> : 
                                  <View>
                                    <Text>- 2015-12-27 -</Text>
                                <Text>{ this.props.expensesSum == undefined || this.props.incomesSum == undefined  ? 0: ((this.props.incomesSum)-(this.props.expensesSum))  } of 2000$</Text>
                                < CategoryBarChart Window = '21' SumAll ='500' Sum = { this.props.expensesSum == undefined || this.props.incomesSum == undefined  ? 0: ((this.props.incomesSum)-(this.props.expensesSum))  } />  
                                   </View>
                                  }      
                          </CardItem>
                          <CardItem>                        
                              <View style={styles.budgetWrap}>
                                <Text style={styles.budgetDescription}>Budget last Week</Text>
                                <Text style={styles.budgetValue}>123</Text>
                              </View>
                              <View style={styles.budgetWrap}>
                                <Text style={styles.budgetDescription}>Income</Text>
                                <Text style={styles.budgetValue}>{this.props.incomesSum}</Text>
                              </View>
                              <View style={styles.budgetWrap}>
                                <Text style={styles.budgetDescription}>Expense </Text>
                                <Text style={styles.budgetValue}>{this.props.expensesSum}</Text>
                              </View>
                              <View style={styles.budgetWrap}>
                                <Text style={styles.budgetDescription}>Budget Today </Text>
                                <Text style={styles.budgetValue}>{ this.props.expensesSum == undefined || this.props.incomesSum == undefined  ? 0: ((this.props.incomesSum)-(this.props.expensesSum))  }</Text>
                              </View>
                          </CardItem>
                          <CardItem>                        
                              <View>    
                                 {this.props.loadingCategories ? <Spinner  /> : Categories }
                             </View>  
                          </CardItem>
                    </Card>
  
                  </Content>
                    <Footer >
                          <FooterTab>
                              <Button active onPress={() => this.replaceRoute('home')}>
                                  Overview
                                  <Icon name='ios-pie-outline' />
                              </Button>
                              <Button  inactive onPress={() => this.replaceRoute('history')}>
                                  History
                                  <Icon name='ios-list-box-outline' />
                              </Button>
                          </FooterTab>
                      </Footer>
                </Container>
              );    
  
          } 
     
    }
    }
  }
                         
  function bindAction(dispatch) {
      return {
        openDrawer: () => dispatch(openDrawer()),
        replaceRoute: route => dispatch(replaceRoute(route)),
        pushNewRoute: route => dispatch(pushNewRoute(route)),
        setIndex: index => dispatch(setIndex(index)),
        getExpensesSum: () => dispatch(getExpensesSum()),
        getIncomesSum: () => dispatch(getIncomesSum()),
        getCategoriesSum: (startDate, stopDate) => dispatch(getCategoriesSum(startDate, stopDate)),
  
    };
  }
  
  function mapStateToProps(state) {
      console.log('mapp Home************************** -' + JSON.stringify(state))
      return {
          state: state,
          name: state.user.name,
          list: state.list.list,
          categories: state.overview.categories,
          loadingCategories: state.overview.loadingCategories,
          expensesSum: state.expensesSum.expensesSum.Sum,
          incomesSum: state.incomesSum.incomesSum.Sum,
          loadingIncomesSum: state.incomesSum.loadingIncomesSum,
          loadingExpensesSum: state.expensesSum.loadingExpensesSum,
      };
  }
  export default connect(mapStateToProps, bindAction)(Home);
  
  
  