Sorry, I’m really new to this… How come my state is not changing when I, let’s say, press ‘signout’ ? It should be simple for you guys.
import React, {Component} from 'react'
import TrackerReact from 'meteor/ultimatejs:tracker-react'
import update from 'react-addons-update';
import {SiteLogo} from '../components/icons/SiteLogo'
import {NavLink} from '../components/navbars/NavLink'
import {MsgVerify} from '../components/messages/MsgVerify'
export default class HeaderWrapper extends TrackerReact(Component) {
constructor() {
super()
this.state = {
subscription: {
userData: Meteor.subscribe('userData')
},
render: {
dashboard: false,
msgVerify: false,
signinSignup: false
}
}
}
componentDidMount() {
this._getUserStatus()
}
componentWillUnmount() {
this.state.subscription.userData.stop()
}
_user() {
return Meteor.user()
}
_getUserStatus() {
if(this._user()) {
if(this._user().emails[0].verified) { // authorized
const newState = update(this.state, {render: {dashboard: {$set: true}}})
this.setState(newState)
} else { // waiting
const newState = update(this.state, {render: {msgVerify: {$set: true}}})
this.setState(newState)
}
} else { // not authorized
const newState = update(this.state, {render: {signinSignup: {$set: true}}})
this.setState(newState)
}
}
_signout() {
Meteor.logout((error) => {
if(error) {
Bert.alert(error.reason, 'danger')
} else {
FlowRouter.go('/')
}
})
}
render() {
return (
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false">
<i className="fa fa-chevron-down fa-fw"></i>
</button>
<a className="navbar-brand" href="#">
<SiteLogo width={48} height={24} primaryColor={'#34495e'}
secondaryColor={'#e74c3c'} />
</a>
</div>
<div className="collapse navbar-collapse" id="navbar">
<ul className="nav navbar-nav">
<NavLink link="#" text="getting started" className="nav-border-bottom" />
<NavLink link="#" text="guide" className="nav-border-bottom" />
<NavLink link="#" text="pricing" className="nav-border-bottom" />
<NavLink link="#" text="community" className="nav-border-bottom" />
<NavLink link="#" text="marketplace" className="nav-border-bottom" />
</ul>
{this.state.render.signinSignup ?
<ul className="nav navbar-nav navbar-right">
<NavLink link="/signin" text="signin" className="nav-border-bottom" />
<NavLink link="/signup" text="signup" className="nav-border-bottom nav-signup" />
</ul>
: null}
{this.state.render.dashboard ?
<ul className="nav navbar-nav navbar-right">
<li className="dropdown">
<a href="#" className="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
dashboard <span className="caret"></span>
</a>
<ul className="dropdown-menu">
<NavLink link="#" text="build" />
<NavLink link="#" text="check" />
<NavLink link="#" text="calculate" />
<NavLink link="#" text="compile" />
<li role="separator" className="divider"></li>
<NavLink link="#" text="settings" />
<NavLink link="#" text="signout" onClick={this._signout} />
</ul>
</li>
</ul>
: null}
</div>
</div>
</nav>
<div>
{this.state.render.msgVerify ? <MsgVerify /> : null}
</div>
</div>
)
}
}