Logging out

Okay, we've handled our user logging in, but what about when they want to log out?

Let's build them a button at the top of ChatContainer to allow them to log out. It'll fit best in the Header component, so why don't we build it in there?

Well, hold up. We currently use the Header on our /login path, in the LoginContainer. If we add a Logout button, it'll appear on the sign-in screen as well, which is just confusing. We need a way to only render the Logout button on the ChatContainer.

We can take advantage of the Route history prop and use that to do a conditional rendering of the Logout button based on the URL (if the path is "/", render the button, otherwise don't!). However, that can be messy and hard to understand for future developers as we add more routes. Let's make it super explicit when we want the Logout button to appear.

In other words, we want to render the Logout button inside Header, but only when Header is inside ChatContainer. Does this make sense?

The way to do so...