[Solved] Layout.Drawer rendering issue

[savaryt]

Solved

Using the shell pattern instead of re-rendering the root which I should have done in the first place.

Initial post

When a component inside Layout.Drawer is re-rendered, no changes are present.
When using the exact same component out of the Layout.Drawer it works perfectly.
Here is the architecture of the parts related to this issue.

./app.js

export default class App extends Component {

	state = { user: null }

	constructor(props) {
		super(props)
		const config = {
                    ...
		}
		firebase.initializeApp(config)
	}

	render({ }, { user }) {
		return (
			<div id="app">
				<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css" />
				<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

				<Layout fixed-header fixed-drawer>
					<Header title="Blog" />

					<Layout.Drawer onClick={this.toggleDrawer}>
						<Layout.Title>Menu</Layout.Title>
						<SidebarNavigation user={user} onSignIn={this.handleSignIn} onSignOut={this.handleSignOut} />
					</Layout.Drawer>

					<Layout.Content>
						<Router onChange={this.handleRoute}>
							<Home path="/" exact />
							<ArticleDetails path="/article/:articleKey" />
							<ArticleList path="/article-list" />
							<ArticleEditor path="/article-editor" />
							<ErrorRoute default />
						</Router>
					</Layout.Content>
				</Layout>

			</div>
		)
	}

	handleRoute = event => {
		this.currentUrl = event.url
	}

	handleSignIn = () => {
		const provider = new firebase.auth.GoogleAuthProvider();
		firebase.auth()
			.signInWithPopup(provider)
			.then(({ user }) => {
				firebase.database()
					.ref('users')
					.child(user.uid)
					.once('value')
					.then((snapshot) => this.setState({ user: Object.assign(user, snapshot.val()) }))
			})
	}

	handleSignOut = () => {
		firebase.auth()
			.signOut()
			.then(() => this.setState({ user: null }))
	}

	toggleDrawer = () => {
		if (this.base) {
			const layout = this.base.querySelector('.mdl-layout')
			if (layout.classList.contains('is-small-screen')) {
				layout.MaterialLayout.toggleDrawer()
			}
		}
	}
}

./navigation/drawer/index.js

export default class SidebarNavigation extends Component {
  render = ({ user }) => {
    return user && user.admin ?
      (
        <AdminNavigation onSignOut={this.props.onSignOut} />
      ) : (
        <UserNavigation onSignIn={this.props.onSignIn} />
      )
  }
}

./navigation/drawer/user/index.js

export default class UserNavigation extends Component {
  render = () => (
    <Navigation>
      <Navigation.Link href="/">Home</Navigation.Link>
      <Navigation.Link href="/article-list">Articles</Navigation.Link>
      <span onClick={this.props.onSignIn} style="cursor: pointer;">Sign in</span>
    </Navigation>
  )
}

./navigation/drawer/admin/index.js

export default class AdminNavigation extends Component {
  render = () => (
    <Navigation>
      <Navigation.Link href="/">Home</Navigation.Link>
      <Navigation.Link href="/article-list">Articles</Navigation.Link>
      <span onClick={this.props.onSignOut} style="cursor: pointer;">Sign out</span>
      <Navigation.Link href="/article-editor">Editor</Navigation.Link>
    </Navigation>
  )
}