All right, so here's what I'm thinking for this episode. At the moment in the navigation bar, our current user information is still hardcoded to our designer Adrian. And then second, I should be able to click on one of these Posts to view it, uh, specifically as well as all of the replies. But currently of course, that's still locked to a Blade file and does not work. Alright, let's get to work. Alright, so let's begin.

to a Blade file and does not work. Alright, let's get to work. Alright, so let's begin. Within our layout file, we'll go into navigation. This corresponds to the left column right here. And yeah, we're right down at the bottom is where we still have the hardcoded, uh, avatar. I think that's their display name. And this is the handle. Okay, well remember we have a profile resource that contains this information and also within handle Inertia requests, we are passing

that contains this information and also within handle inertia requests, we are passing through the current User as a prop, uh, with an authUser. So what I can do now is swap this out by saying, uh, pageProps.doauthUser.profile.handle and this would be the displayName. So pageProps.authUser.profile, and of course we can add a computed prop if you want. Uh, displayName.

and of course we can add a computed prop if you want. Uh, displayName. And then finally, I believe on Profile, resource we have an avatar. Yeah, avatarUrl, right? So once again, let's bind this to pageProps. Off userProfile, do avatarUrl. Okay. And then finally one more thing, avatar. This is gonna be dynamic. So avatar for, um, once again pageProps, ah,

This is gonna be dynamics. So avatar for, um, once again pageProps, ah, userProfile, and let's do handle, yeah, maybe handle or displayName. So if I come back now and give it a refresh, yeah, now you can see this is dynamic. Okay, so we do have a custom avatar here, but because Jeremy is using the dummy images or, or maybe Simon did it, um, it's not very clear.

because Jeremy is using the dummy images or, or maybe Simon did it, um, it's not very clear. So I would like to see actual fake avatars here. So with that in mind, here's what I'm gonna do. If I return to our User, or actually it would be our Profile, uh, factory right down here. You can see, yeah, it's just hard coding, a generic dummy image for the avatar. But there's dedicated services that can help.

a generic dummy image for the avatar. But there's dedicated services that can help. Uh, with this one that I really like is called Avatar, I believe. So yeah, I believe I've done this a few times. It is IPR avatar cc I think. And then you specify the dimensions and Jeremy said it two 90. Okay, so now if I were to, uh, rerun our migrations from scratch, so let's do php artisan migrate --fresh.

Okay, so now if I were to, uh, rerun our migrations from scratch, so let's do php artisan migrate:fresh --seed in the process. Yeah, if I come back to the browser and yeah, now you see we get some kind of generic photo or an avatar and this is great. However, one thing to keep in mind is if I refresh the page, it's gonna keep changing 'cause it's dynamic and that's not really what we want. Ideally I wanna lock whatever avatar that surface returns.

and that's not really what we want. Ideally I wanna lock whatever avatar that surface returns to a specific ID or a key or a username. So what I can do in these cases is, uh, append, what is it? I think it's u for unique or username. And it looks like Jeremy created a handle here. And I'm just gonna make that the identifier that makes whatever image they return unique, it is locked to that handle. Okay? So now if I were to do the exact same thing again

it is locked to that handle. Okay? So now if I were to do the exact same thing again with any luck, if I give it a refresh, what do we have here? Yeah, we have this one, but notice if I refresh, I'm gonna get the exact same thing and you can't tell, but I'm hidden refresh over and over. I'm gonna get the exact, uh, same avatars, which is great. So here's this one, here's a few others. This is our current user. Uh, it works great. Alright, so now if I switch to full screen,

This is our current user. Uh, it works great. Alright, so now if I switch to full screen, why don't we find a post that includes some dummy replies? Uh, I see one right here from Dr. Laie Parker. Okay, well let's make a reply ourself. This is a great post. All right. All right, now we have two. Uh, but ideally I should be able to click on this to view the post as well as any responses to it. And it looks like Jeremy included a link here, but of course we have not yet implemented that.

And it looks like Jeremy included a link here, but of course we have not yet implemented that. So let's do that. Now the URI is the handle status and then the ID of the status. Alright, let's go into our repos file and figure out what controller corresponds to that. Um, here it is. I think this is the one. Alright, so a person's profile slash status slash an identifier will hit PostController at show. If we take a look at show, yeah,

identifier will hit PostController at show. If we take a look at show, yeah, at the moment it's still returning a Blade view. All right, let's swap it out with either the inertia helper function or inertia render. And let's follow the same convention posts show. Alright, so first within post index. Yeah, why don't we do this? Let's duplicate this. We'll change it to show, uh, just so I can grab most of the, the main points here.

We'll change it to show, uh, just so I can grab most of the, the main points here. So maybe actually it's just the layout file itself. Okay, next I'm gonna go into Jeremy's Blade view for show. And uh, yeah, we're just gonna move all of this over reformat. And then like before, we're just gonna swap anything, uh, out that needs to be. One thing I'm noticing is this seems to be repeated on both of those pages and presumably that should be part

One thing I'm noticing is this seems to be repeated on both of those pages and presumably that should be part of the layout. So that's, that's something I'm thinking about next here is the feed. And once again, we have a Post component that's gonna be the post itself. Oh, okay. So it looks like there is show replies on there. Okay, did we implement that? Yes. Do we reference that? Okay, cool. So this is all taken care of.

Okay, did we implement that? Yes. Do we reference that? Okay, cool. So this is all taken care of. Hopefully I'm gonna clean this up a little bit next. Is there anything else? No. Are we referencing the profile? No. So we just have the post itself, which would be an object. And yeah, like I said, if you wanna create a dedicated type for that and then switch over to TypeScript, you can totally do that.

for that and then switch over to TypeScript, you can totally do that. We're just not doing it here. Alright, so let's take a look at PostController show that's passing the post itself, but really it should be post to resource. Let's make sure that we always do that. Or you can do it up here. Let's be consistent and put it on its own line. Now our view accepts the post

and put it on its own line. Now our view accepts the Post and then it references the Post here. Okay, let's have a look in the browser reload. Black screen of death. All right, it happens. Let's take a look. Uh, Ziggy error profile parameters required for route profile.show within Post do view. Ah, so on the line 22, Hmm, we expected Post to have profile but it didn't.

Ah, so on the line 22, Hmm, we expected post to have profile but it didn't. That's interesting. I would've expected that. Okay, let's go back to PostController and let's see, 'cause I know it was working for index and it looks like he has a timeline query and then a postThread query. So in timeline query, was it eager loading the profile? It was, but within, uh, the postThread query,

was it eager loading the profile? It was, but within, uh, the post thread query, did he load it Post load replies? No. So I, I'm wondering here, am I screwing something up, which is most likely in this case, but also maybe Jeremy forgot to load the profile or maybe I'm referencing something incorrectly. Nonetheless, I'm going to load the profile and see if that works. Come back and, okay, that seems to affixed it,

to load the profile and see if that works. Come back and, okay, that seems to affixed it, so I'm gonna keep that in there. Um, alright, so now I can view the Post and I also get to see all of the replies to that Post. This is great. I like this. So if I go back home, let's see if I can find a different one about this one here, view it. Now I can see all of the replies. One thing though, can I click on this to make my own reply?

Now I can see all of the replies. One thing though, can I click on this to make my own reply? Yes. Here are my thoughts that you need to hear. We leave it and ah, that redirects me back to, that's something we should think about. That redirected me back to the feed. But if I come back and refresh here, this is us. We are, we're Rosalyn, uh, nice to meet you, but yeah, let's make sure the Post works properly. So within the, the Post con fix it Jeffrey,

but yeah, let's make sure the Post works properly. So within the, the Post controller store action. Yeah, so now it's not necessarily redirecting to the feed, it's just redirecting back to where you were previously. So maybe I can get away with a redirect back and yeah, also, or is it hitting the reply? I can't remember if it hits reply, that would be reply because this one is for publishing a new Post. Okay? So if you're publishing a new Post,

because this one is for publishing a new post. Okay? So if you're publishing a new post, it always goes back to the feed. If you're publishing a reply, maybe we just take you back. Okay? I think that is correct. So go home. Let's, uh, let's just grab this one at the top. Okay, now I feel like that's aligned vertically when it shouldn't be. These are the sorts of things by the way, and can we can tackle that behind the scenes.

These are the sorts of things by the way, and can we can tackle that behind the scenes. You don't need me to debug why maybe height: 100% is being set or that a margin-top: auto needs to be removed or something. Uh, but nonetheless, those are things to address. Here's my response. Does that work? Now it brings us back. Now I can go home. This is all working. Perfect. Next, you'll remember we had this post button here, and at the moment I don't think it does anything.

Next, you'll remember we had this post button here, and at the moment I don't think it does anything. And if I remember correctly, we only should display that if you're not on the main feed page. So for example, if I click on this, oh, that doesn't do anything either. Let's fix that one up and then we will be done with this episode. Let's go into navigation or scroll down. Yeah, remember we had this to-do a handful of episodes ago.

Let's go into navigation or scroll down. Yeah, remember we had this to-do a handful of episodes ago. This should only display if we are not on the post index route. And it's just a button. Um, that again, I presume should be responsible for doing, uh, this, just loading that. So perhaps we should just keep this very simple and make this, uh, a link that takes us to route('post.index') like that.

and make this, uh, a link that takes us to route('post.index') like that. Okay? So now if I'm on a page, but I hit post, that just brings me back if we want, uh, later with some JavaScript, we can focus this input, but it's fine. Uh, next, why don't we do text-center? Yeah. And then handle the situation where the, um, Simon or Adrian presumably don't want this to be displayed. Um, if you're on the main feed page,

or a Adrian presumably don't want this to be displayed. Um, if you're on the main feed page, only on a page like this or if you're exploring or something else, okay, so here's what we can do. Let's say show this only on the condition that the current page is not, um, whatever this happens to be. Uh, let's see, is it home? Yeah. So as it turns out we can grab the current URL. Actually, let me show you this. Uh,

So as it turns out we can grab the current URL. Actually, let me show you this. Uh, we'll just say true for a second. If I come back, bring up view dev tools. You should see within the inertia tab, take a look at initial page and you can see what the current URL is. And also you can see what the current component is. And this is especially useful, you can use that as a substitute for the URL.

And this is especially useful, you can use that as a substitute for the URL. Uh, and that's pretty reliable. So for example, I could say well check the page component and as long as it is not post/index, then we can display it. That would be fine as well. And there's really no downside, uh, to that approach at all. So if I were to come back now, uh, on our main feed, we don't see anything, but if I click somewhere else,

So if I were to come back now, uh, on our main feed, we don't see anything, but if I click somewhere else, now it does display and if I click on it, it'll take me back here later. We can focus it, you get the idea. So with that in mind, you can use things like that to handle active states for your links. For example, and I know I said we would be done, but this'll be 30 seconds. Uh, right here.

but this'll be 30 seconds. Uh, right here. Yeah, this one, uh, it doesn't have any active state. So presumably the active state would be, I think it's that textPixel variable. Yeah, that would be yellow, but only if we're on that page. So if I click on this, notice it's still yellow and it shouldn't be, okay, why don't we just do this? Let's add a class and actually let's move the itchRef in front anyways.

Let's add a class and actually let's move the itch ref in front anyways. And now we'll say, well I wanna add textPixel only if, um, this is truthy, right? So right now it would, but if it were evaluated to false, it would not be shown. Okay, so now let's just check if the page component equals post/index. That would be one way to do it. You could also take a look at the URL, maybe

That would be one way to do it. You could also take a look at the URL, maybe that's slightly more brittle, but that would work too. All right, so now if I click on home that works and you could then update all of the other anchor tags, uh, accordingly. Pretty cool, right? Okay, so now you know what I think we should be done here. Uh, we just tackled a handful of little, uh, paper cuts that needed to be, uh, addressed.

Uh, we just tackled a handful of little, uh, paper cuts that needed to be, uh, addressed. So now we are correctly showing the current user. We added a show page for a Post. Uh, we ensured that replying to a Post redirects where we would expect. And then also we handled active, uh, state highlighting for our navigation links. So in the next episode, why don't we take a look at this dropdown menu.

So in the next episode, why don't we take a look at this dropdown menu and when I click on it, presumably there should be links to, for example, view the Post or delete the Post if you are authorized. So come along with me in the next episode.