Meteor / React - Como esperar pelo Meteor.user ()
Estou lutando para descobrir como esperar peloMeteor.user()
assinatura em um componente de reação. Eu sei que o usuário está logado porqueMeteor.userId()
retorna o_id
, mas tentando acessar o endereço de e-mailMeteor.user()
retorna indefinido. Presumo que ainda não esteja disponível.
Infelizmente, como Meteor.user () não é uma publicação em que assino manualmente, não sei como esperar por ela em um componente React. Alguém pode me indicar um exemplo?
import { Meteor } from 'meteor/meteor';
import React from 'react';
import { Link } from 'react-router';
import { createContainer } from 'meteor/react-meteor-data';
import './BaseLayout.scss';
class BaseLayout extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: (Meteor.userId() !== null) ? true : false,
}
}
componentWillMount() {
if (!this.state.isAuthenticated) {
this.context.router.push('/login');
}
}
componentDidUpdate(prevProps, prevState) {
if (!this.state.isAuthenticated) {
this.context.router.push('/login');
}
}
toggleUserMenu() {
this.refs.userMenu.style.display = (this.refs.userMenu.style.display === 'block') ? 'none' : 'block';
}
logout(e) {
e.preventDefault();
Meteor.logout();
this.context.router.push('/login');
}
render() {
return(
<div id="base">
<div id="header">
<div id="top-bar" className="clear-fix">
<div className="float-left" id="logo"></div>
<div className="float-right" id="user-menu">
<div onClick={this.toggleUserMenu.bind(this)}>
<span>{this.props.currentUser.emails[0].address}</span>
<div className="arrow-down"></div>
</div>
<div id="user-menu-content" ref="userMenu">
<a onClick={this.logout.bind(this)}>Sign Out</a>
</div>
</div>
</div>
</div>
<div id="bodyContainer">
{this.props.children}
</div>
<div id="footer">
<ul>
<li><a href="mailto:[email protected]">Made by Us</a></li>
</ul>
</div>
</div>
)
}
}
BaseLayout.contextTypes = {
router: React.PropTypes.object.isRequired,
}
export default BaseLayoutContainer = createContainer(() => {
var handle = Meteor.subscribe("user.classrooms");
return {
currentUser: Meteor.user(),
dataLoading: !handle.ready(),
classrooms: Classrooms.find({}).fetch(),
};
}, BaseLayout);