Dependency Injeciton and function scope

[payner35]

I have a simple container to manage the state of my Nav bar.

import TopNav from '../components/nav/topNav/index.jsx';
import {useDeps} from 'react-simple-di';
import {composeWithTracker, composeAll} from 'react-komposer';

export const composer = ({context}, onData) => {
  const {LocalState} = context();
  const navOpen = LocalState.get('TOPNAV_OPEN');
  onData(null, {navOpen});
};

export const topNavDepsMapper = (context, actions) => ({
  openNav: actions.topNav.openTheSideNav,
  closeNav: actions.topNav.closeTheSideNav,
  context: () => context
});

export default composeAll(
    composeWithTracker(composer),
    useDeps(topNavDepsMapper)
)(TopNav);

composer manages the state topNavDepsMapper exposes (injects) the functions

this is my component

import React from 'react';
import Sticky from 'react-sticky';

import LeftNav from 'material-ui/lib/left-nav';
import MenuItem from 'material-ui/lib/menus/menu-item';
import RaisedButton from 'material-ui/lib/raised-button';

class TopNav extends React.Component {

  handleToggle() {
    const {openNav} = this.props;
    console.log(this);
    openNav();
  }

  render(){
    const {navOpen} = this.props;

    return (
        <div>
          <LeftNav open={false}>
            <MenuItem>Menu Item</MenuItem>
          </LeftNav>
          <Sticky className="topNav mobile hidden" topOffset={542}>
            <nav>
              <ul>
                <li><a onTouchTap={this.handleToggle.bind(this)}>MENU Item</a></li>
              </ul>
            </nav>
          </Sticky>
        </div>

    );
  }
}

export default TopNav;

but for some reason my props is empty in the TopNav Component... What am i missing here?

[payner35]

so figured out you can do it this way...

import Event from '../containers/event';
import TopNav from '../containers/topNav';

export const initRoutes = (context, actions) => {
  const MainLayoutCtx = injectDeps(context, actions)(MainLayout);

  // Move these as a module and call this from a main file
  FlowRouter.route('/:region/events/:slug', {
    name: 'events.single',
    action({region, slug}) {
      mount(MainLayoutCtx, {
        nav: () => (<TopNav />),
        content: () => (<Event someRegion={region} slug={slug} />)
      });
    }
  });

and then adding to the Layout

 <header>
           {nav()}
        </header>

        <div>
        {content()}
        </div>