- Read Tutorial
- Watch Guide Video
I know it's been pretty long, it's been the longest section of any of the sections in this entire course but hopefully, you understand why and also why we took such a methodical and step-by-step approach to each one of these concepts.
It's because if you understand these concepts, it's gonna help you understand the rest of React really well. We've delved into API communication, we've talked about different ways that you can manipulate state, we've seen how you can use the lifecycle hooks and all kinds of different concepts and so, we're very close to the end.
As you may have guessed, the very last thing we need to build in is the ability to log out, so that way we're not having to go and restart the browser, open up a new incognito window, anything like that, so essentially what the logout feature's going to do is it's gonna call the server and it's going to remove the cookie from that session.
Now, we don't have to do any of that ourselves, that all happens automatically on the server-side, we simply have to build the front end that will communicate that and then update state and update different elements on the page. So, we're gonna break it up into two different videos. This first one is gonna be relatively short, we're simply going to build the handler that we're gonna place inside of our app component.
In the next guide, we're gonna talk about a pretty advanced concept and a design pattern in React called the high order component and so, I didn't want to have, I wouldn't wanna try to sprint through that, because it's such an advanced concept, I didn't want it to be something that became very confusing, so I wanted to break it up into a couple of pieces.
So, let's build this handler here, and so, I'm gonna come down here and it's gonna be very similar to these other handlers, so I'm just gonna copy this and now instead of handleUnsuccessfulLogin, I'm just gonna say, we can just call this one handleLogout, or let's say handleSuccessfulLogout just like that and then we wanna set the state to NOT_LOGGED_IN when this is run and as you may have guessed, we're going to pass this handler as a prop and we're gonna pass it into the navigation component, so that would give us some good practice on passing functions as props as well.
So come up here to the constructor and say this.handleSuccessfulLogout equals this.handleSuccessfulLogout.bind and pass this in so it has access to the component and then lastly, come down into your JSX code and inside of the NavigationContainer, and let's place this first loggedInStatus prop on its own line and do the same thing with the closing tag and now I'm gonna say handleSuccessfulLogout equals in curly brackets this.handleSuccessfulLogout.
app.js
<NavigationContainer loggedInStatus={this.state.loggedInStatus} handleSuccessfulLogout={this.handleSuccessfulLogout} />
This is all that we need to do on the app side and just to kind review and make it clear on exactly what's happening is we're passing this function as a prop directly into the NavigationContainer. Now, if you come here to our app, then what we are going to expect is the ability to have something on the page. We're gonna add a link up here on the right-hand side that says something like Sign Out.
When that link is clicked and that's triggered, it's gonna start a process where it goes and it calls the server and it says hey, we're ready to log out, it waits back for the response and then when that response comes back, then it calls this prop of handleSuccessfulLogout and then all this has to do is go and update the state, so we'll say loggedInStatus is NOT_LOGGED_IN, so that is all we're looking to do and those are all the changes we need to make inside of the app component.
So, now that we have that done, in the next guide, we're gonna talk about high order components and we're gonna finish building out the logout functionality.