This is my code for client/MainLayout.jsx:
import React from 'react';
import AccountsUI from '../components/AccountsUI.jsx';
import ShowGrantAccess from './ShowGrantAccess.jsx';
export const MainLayout = ({content}) => (
<div className="main-layout">
<header>
<nav>
<a href="/">Home</a>
<ShowGrantAccess/>
<AccountsUI />
</nav>
</header>
<main>
{content}
</main>
</div>
);
client/components/ShowGrantAccess.jsx:
import React, {Component} from 'react';
export default class ShowGrantAccess extends Component {
render() {
if (Meteor.userId()) {
return <a href="/grantaccess">Grant Access</a>
} else {
return false
}
}
}
client/AccountsUI.jsx:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Accounts} from 'meteor/accounts-base'
Accounts.config({
forbidClientAccountCreation: true,
});
export default class AccountsUI extends Component {
componentDidMount() {
this.view = Blaze.render(Template.loginButtons,
ReactDOM.findDOMNode(this.refs.container));
}
componentWillUnmount() {
Blaze.remove(this.view);
}
render() {
return <span ref="container"/>
}
}
client/routes.jsx:
import React from 'react';
import {mount} from 'react-mounter';
import {MainLayout} from './layouts/MainLayout.jsx';
import Home from './components/Home.jsx';
import GrantAccess from './components/GrantAccess.jsx';
FlowRouter.route('/', {
action() {
mount(MainLayout, {
content: (<Home />)
})
}
});
//Check if login
if (Meteor.userId()) {
FlowRouter.route('/grantaccess', {
action() {
mount(MainLayout, {
content: (<GrantAccess />)
})
}
});
}
Question is why after user login, there is no refresh to make Grant Access tab appear unless I manually reload page?
Similarly when user logout, the Grant Access tab is still there unless the page is also manually loaded???
Must I do some componentDidMount() and componentWillUnmount() within the GrantAccess.jsx file?