-
(upbeat music) Now that our users are able to edit their profile, let's go ahead and add in an actual profile show page
-
into our application. So let's hide our browser away, and let's go ahead and scroll on down to where we have our profile routes defined right here. All right, let's do router.get/profiles/
-
this is where it'd be really nice to have something like a username, but we don't have that within our application, so we're just gonna do ID here, reach for our profiles controller,
-
and we're gonna add a show method here, as profiles show. All right, and give that a save. Let's go jump into our profiles controller, scroll on up a little bit,
-
and let's add in an async show method. We'll take our view and params, HTTP context, and since we're searching by the ID, we can do const user equals await user,
-
reach for our user model, and just do find or fail, providing in our params.id from our route parameters.
-
Then we can await user load their profile in. So now we'll be able to access the user's profile via user.profile, and we can return view render,
-
and let's do pages profiles show, and provide that user in. All right, now we need to go create that page, so let's scroll on down, and we actually have a pretty good starting point here
-
from our directors or writers show page. So I'm gonna go ahead and just copy this. We can paste it directly inside of our profiles directory, just like so. Scroll on up,
-
and then we can replace our director line here with instead just user, and then we currently don't have movies, so I'm just gonna go ahead and comment this out. That's gonna be our next step,
-
and now we should be able to jump back into our browser, and actually I'm not entirely sure what this user's ID is. So I'm gonna go into edit here,
-
and just quickly inspect auth user ID to see what exactly that is. Type of inspect, there we go. Refresh that. All right, looks like it's seven.
-
So jump back in here and get rid of that. Okay, so we should be able to go to profiles/7 to view this user's profile. We hit enter here. There we go. We can see we get John Doe edit three,
-
which matches our authenticated user. Let's go ahead and add in their additional details. Let's jump back into that show page. We'll do a little div class flex,
-
items center gap, maybe four. We'll do div class width, maybe 52, I think, for the image. And then we'll do image class width full,
-
source equals user.avatarURL. Remember, we're showing a specific profile here, so we don't wanna reach for auth user, but rather the user that we're providing
-
into this page state, and an image out. Also wanna add an alt user. Let's wrap that in an if user avatar URL, just like so,
-
and end that up. In addition to that, let's go ahead and do a div and paste that h1 back in, as well as a p tag with the user profile.
-
And I think we called it description, so we'll add that in there too. Give that a save, and let's see what we get real quick. All right, 52 might be a little bit too big there. I think 16 there is the winner.
-
Let's also remove the margin bottom on both of these here as well. All right, jump back into here. Margin, actually get rid of the margin y on the h1. So it's gonna have some on the top too.
-
All right, let's see how that looks. Cool, that looks okay. Let's go ahead and give the entire block here. Maybe we'll do p top eight, adding bottom, maybe 12, and all right, cool.
-
So we have a good starting point here for our profile page. Now, one thing that you see a lot of applications do is they have this like at, and then the username system going on.
-
So let's go ahead and show how we can do that. We don't have usernames, but we can at least work with our ID here to show how you would go about it. So let's hide our browser back away. We need to jump back into our routes.
-
We'll go ahead and leave this route here as is, as that's what we're gonna be using at the end of the day, but let's go ahead and scroll up with that copy and paste it in here. Okay, we'll wanna get rid of the slash profiles
-
and we'll just do ID here. And I'm gonna get rid of the name just so that we don't get a duplicate name error. Typically you would call this something like username as that's what we would actually be passing in.
-
But since this is pretty dynamic, it's actually gonna match for any route that we have as just slash at present. So if we were to save this and try to go into slash movies,
-
it's gonna end up trying to match against our slash username. So let's give that a save real quick, jump back into our application and attempt to go into slash movies. And you'll see that it tried to go into our profiles controller show method
-
and it failed on the find or fail because it can't find anything for an actual ID of movies. So how do we remedy that? Well, we can use a route parameter validator using where
-
to limit the user name route parameter and we can use a matcher. Now there's not gonna be a router.matchers applicable
-
to verifying that something starts with some prefix, but we can use regex. So we can do slash caret to verify starts with,
-
and we wanna verify that it starts with an at character. So with that applied, in order for this route to match the URL,
-
our username needs to start with an at character, meaning that if we give this a save, jump back into our browser and try to refresh our movies page, it's back to working.
-
But if we just try to go into at seven now, which remember we're using our ID in place of an actual username, since we don't have usernames inside of this application,
-
hit enter there, we're gonna need to find or fail because now it's trying to search for at seven and our route parameter itself is called username now. So let's take care of that too.
-
So let's jump back into our profiles controller and let's actually copy this rather than trying to merge everything into one. And we'll call this maybe just at,
-
since it's prefixed with the at character. Our program is now username and in order for at to be used and matched as a route, it's going to need to be prefixed with an at character.
-
So what we can do is get our ID back by doing const ID equals params username, replace the at character with just an empty string.
-
And then this is no longer params ID, but just ID like so. So in order to match the route, we need to start with an at character and then we just need to remove that at character
-
to get our ID back, to be able to search and find the user. You would do that exact same flow if you were working with an actual username too. Okay, jump back into our routes
-
because we need to switch from show to at, give that a save, just jump back into our browser and let's try our at seven once more. And look at that, it's back to working, so cool. There's an alternative approach
-
if you're looking for something a little bit shorter for your URL, and this at premise is pretty popular across the internet. So that's how you can go about it here with AdonisJS.
