Cacher is the code snippet organizer for pro developers

// and then I have the component that is wrapped with the Higher Order Function

import React, {Component, PropTypes} from 'react'
import { connect } from 'react-redux'
import LoggedOutLayout from '../../Layouts/LoggedOutLayout'
import Container from '../../Layouts/Container'
import Page from '../../../mixins/Page'
import AccountForm from './LoginForm'


class AccountPage extends Component {

    static propTypes = {
      loginUser: PropTypes.func.isRequired
    }

    static contextTypes = {
        store: React.PropTypes.object,
        router: React.PropTypes.object
    }

    constructor(props) {
    super(props)

        this.state = {
            name: "AccountPage",
      attemptedTransition: null
    };
  }

    

    render() {
        return (
            <LoggedOutLayout>
                <div className="page account-page">
                    <Container isFluid={true} cls="full-width account-form-wrapper">
                        <AccountForm />
                    </Container>
                </div>
            </LoggedOutLayout>
        );
    }
}

function mapStateToProps(state, ownProps) {
    return {
        redirect: state.redirect
    }
  
}


export default Page(connect(mapStateToProps, mapDispatchToProps)(AccountPage))

// Question.  I am trying to build a Higher Order Function that extends a component with 
// the Redux connect(mapStateToProps)(Component) so I don't have to add that to every component
// I want to connect to redux store/router/dispatch bindings. been struggling this for awhile, and 
// maybe my problem has to do with my lack of knowledge regarding ES6/7 syntax.  Below is the code:

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { navigate, navigateLoading, navigateFail, navigateDone } from '../actions'
import Config from '../config/Config'

module.exports = ComposedComponent => class Page extends Component {

  static propTypes = {

  }

  static defaultProps = {
  }

  constructor(props, context) {
    super(props, context);

    this.state = {

    };
  }

  componentWillMount(){
    if(!this.hasPermission()){
      navigateFail({
        path: Config.routeLogin
      })
    }

    navigateLoading(this.state.name)
  }

  hasPermission(){
    if(this.private && Session.isSessionSet())
      return true
    if(!this.private)
      return true
    return false
  }

  componentDidMount() {
    if(this.props.redirect.newRedirect){
      navigateDone()
    }
  }

  render() {
    return <ComposedComponent
              update={this.update}
              {...this.state}
              {...this.props} />
  }
}