Loading the current user - React.js Tutorial

- [Speaker] All right, so now that we've got our app set up to do some demonstrations, let's start off here by taking a look at the way that developers usually do things like load data when they need to display it in a component. So as I said, we already have this user component or user info component rather inside of here. And let's say here that what we want to do is load whatever the current user is that's logged in and display it in this component. Well, usually what people will do in that case is they'll actually create a component. We'll just say something like CurrentUserInfo.jsx. And what they'll do inside of here is essentially, they'll use this component to load data and pass that data into whatever they want the interface to be. And this isn't necessarily the wrong way of doing it, but what I want to show you in this section is that there's really a more reusable way that we can do this. All right? So we'll start off here by defining this current user info component. So basically, we're just going to say, export const CurrentUserInfo. Alright? And this isn't going to take any arguments or props at all. And inside here now, what we're going to do is we're going to define a state. So let's just import the use state hook. So we'll say import React, and then useState. And while we're at it, we'll import useEffect. And in case you're wondering why imported React here, we're going to need that a little bit later when we actually pass data through in a more reusable way. So I'm just going to leave that there for now and we're going to say import those from React. And we'll also import this library called axios from axios. And this is just a library for making network requests. So you'll also want to install that. And by the way, leave your server running because we're going to need that around in just a minute. But we'll just create a new terminal. Just click that little plus button if you're using code spaces. And we're going to change directories into container components. And then we're just going to say npm install axios. And that will install the Axios library for us. So let's just rearrange this a little bit there. I'm going to put that actually up at the top so that we can run our Vite React application when we need to. Anyway, now that we have all of that set up, let's get back to our current user info component. What we're going to do here is we're just going to say const user and setUser equals useState. And the initial state will be null while we're loading the user. And then we're going to use the useEffect hook to load the current user from the server. Okay? So all we need to do in order to make this happen is we're just going to say in parentheses, we'll just do an anonymous async function. And inside here, we're going to say const response equals await axios.get. We're going to send a request to /api/current-user, right? That's going to be automatically redirected to the server as you'll see shortly. And then we're just going to call setUser on the response.data. All right? So now that we've done that, that should be loading our user data. Last thing we need to do is in order to make sure this doesn't load the user again and again whenever this component is re-rendered, we just need to put an empty array as the second argument in useEffect. That'll make sure it only gets rendered once at the very beginning. All right, so last thing we need to do here is we're going to take the user data that we get and we're going to display it in this user info component. So here's what this is going to look like. We're going to just say return, and all we're going to do is display user info. All right? That's going to be imported for me automatically there up at the top. And now we're going to say that we want to pass the user as whatever the current user is. So we'll just say user equals user, and then we'll close those parentheses. Oh, and one last thing we'll want to do here is make sure that we only display this once the user is loaded. So we'll just say user double ampersand, and then we'll say user info user. That'll prevent this from being displayed before the user is actually loaded. And oops, we can actually just remove the curly braces and parentheses altogether there like so. And that's our CurrentUserInfo component. So let's go back to our app component and display this CurrentUserInfo component first of all, just to make sure that it works. And then we'll talk about some ways that we could improve it. What we're going to do is we're just going to replace your code goes here with the CurrentUserInfo component that was just automatically imported for me. And now let's try and load this app. Oh, by the way, before this will actually work, you need to go into, where is it here? You need to go into the vite.config file and you'll notice that I've added this server thing, this server proxy property to the vite config file. Basically what that'll do is that'll just take requests like what we're doing here, right? When we say, /api/current user, and that will redirect it to the server that we have running. Now, if you're in code spaces, this is a little bit trickier than if you're just running it locally 'cause it's not technically on local host here. So what you're going to have to do is you're going to have to open up your terminal, go to ports, and then next to your running server, right? Port 8080, what you're going to do is you're going to copy the local address here, all right? So we're just going to copy that and paste it right there. And that will basically just take any requests to /API/something and forward them to this, all right? So that be all we need to do. Hopefully that works. We may need to make a slight change, like remove this last slash there or something, but we'll come back to that if need be. And now first of all, if you still have this running, you're just going to want to stop forwarding that port and get rid of it. So now, we're going to go back to our front-end and we're just going to run npm run dev, and that should open up the front-end there. We'll just open that back up in our browser and oops, it looks like nothing's going on there. And that's because if we go back to here, I forgot to call this async anonymous function by putting parentheses after it. So just do that. And then the last thing you're going to need to do in order for this to work is go to the visibility of your server that's running, right click on that, go to port visibility, and you're going to need to set that to public, right? That just makes it possible for the front-end and back-end to communicate here. Sorry about all the full stack stuff here. It's just we need this in order to make our example a little bit more realistic. Awesome. So now that we've done that, let's just close that and we're going to go back to our application and sure enough, we see that that displays the data that we loaded from the server, right? So our front-end made a request to the backend, right? That server.js that was running and the backend sent this data back and the front-end displayed it. So the next thing that we're going to take a look at is how we can improve on this current user info thing. Because the problem with this is that now, if we want to have another component that has access to the current user, we actually have to copy and paste this entire block of code here. Now, yes, you can do this with a custom hook, right? So you could create a custom, you know, get current user or useCurrentUser rather hook and use that inside this component. So that would look like this. You know, we could say const, we would just say user equals useCurrentUser. And we'll actually take a look at how to do this later on in the course, how to create custom hooks. But the problem with that is that we still need this separate current user info component, right? In general, this thing just shouldn't have to be its own separate thing. So what we're going to see how to do is create a container component that will allow us to do things like this. I'll just give you a little sneak peek of what we're going to be able to do. We're going to create a current user container component that will allow whatever its children are to have access to the data that it's loaded. So we're going to say something like, you know, CurrentUserInfo and then inside here, we'll be able to say, you know, UserInfo and that UserInfo component will automatically receive that current UserInfo loaded as a prop. So that's what we're going to see how to do next.