How to get Accounts.onLogin to impact my app in Meteor React ES6?

Question

I want my meteor app to call setState in App on login and logout. How can I have one section of code (ie: Accounts.onLogon) affect inside another component (ie App{})? Also, what to do to detect logouts?

Accounts.onLogin(function(user){
    console.log('hi');
    //App.showPrivate();
});

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showPublic: false,
    };
  }

  toggleShowPublic() {
    this.setState({
      showPublic: !this.state.showPublic,
    });
  }

  showPublic() {
    this.setState({
      showPublic: true,
    });
  }

  showPrivate() {
    this.setState({
      showPublic: false,
    });
  }

  render() {
    return (
      <div className="container">
        <div className="show-public" onClick={this.toggleShowPublic.bind(this)}>
          {this.state.showPublic ?
            <span className="private-public"> View private</span> :
            <span className="private-public"> View public </span>
          }
        </div>
      </div>
    );
  }
}

Answer 1

Instead of Accounts.onLogin you should use Meteor's in-built reactive data sources to determine the user's logged-in status:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { showPublic: false };
  }

  toggleShowPublic() {
    this.setState({ showPublic: !this.state.showPublic });
  }

  render() {
    return (
      <div className="container">
        {this.props.isLoggedIn ?
          <div className="show-public" onClick={this.toggleShowPublic.bind(this)}>
            {showPrivate ?
              <span className="private-public"> View private</span> :
              <span className="private-public"> View public </span>
            }
          </div> :
          Show something else if the user is not logged in here...
        }
      </div>
    );
  }
}

export default createContainer(() => {
  return {
    isLoggedIn: !!Meteor.user()
  }
}, App);

Now Meteor will take care of reactively updating this.props.isLoggedIn for you. Note that you need to install meteor/react-meteor-data and import createContainer for this to work:

import { createContainer } from 'meteor/react-meteor-data';

If you still need to do something when the user logs in, you can place Accounts.onLogin basically anywhere you want in your app, as long as you consider whether you want it to run server-side or client-side or both. For best practices regarding application structure, check out Meteor Guide .

Answer 2

It turns out Accounts.onLogin is a distraction. To have the app update when the user logs in or out, we need to see when the logged in user changes, and react accordingly. Seeing when something changes in React is done using componentWillReceiveProps, as seen below:

componentWillReceiveProps(nextProps) {
  // user just logged in/out
  if (!this.props.currentUser  &&  nextProps.currentUser) {
    this.setState({ showPublic: false });
  }
}

oh, and current users comes from:

export default createContainer(() => {
  return {
    currentUser: Meteor.user(),
  };
}, App);