Hey there and welcome back to a new episode of Framerate Dev. It's great to have you back along with us. In this episode, we'll be taking our index page and linking it to the show page all nice and smooth like, and I think you're going to enjoy the ride. So sit back, relax, and let's get started. All right, cheesy intros aside, I do want everything in each list item to be clickable to take us straight to the correct forum post. I would use an anchor tag here in a standard application, but seeing as this is Inertia, I'm going to reach for the link component, which will give us that single page application feel. So I need to import link from Inertia.js and you use it basically like an anchor tag. So we'll have an href here. I can use the root helper to go to posts.show and we need to pass the ID of the post and then we'll

and you use it basically like an anchor tag. So we'll have an href here. I can use the route helper to go to posts.show and we need to pass the ID of the post and then we'll wrap the span that we have here in that link tag. All right, should we see if that works? So if I go back to the index, I can now click on these titles and it doesn't reload the page fully, but it's pulling that information from the backend and then loading in the content for us. Nice. Now that we have our links in place, I think it would be a good time to switch focus and add in that extra detail on the index that we are interested in. And I basically want the same thing that we have here on the show page, the time the post was published relative, and then the author, the User who published it. Let's do the front end here first. So I'll jump into the posts.show page because we can basically take this

published relative, and then the author, the user who published it. Let's do the front end here first. So I'll jump into the posts.show page because we can basically take this line here, go back into the index and drop it in underneath our post title. But obviously we're going to have to switch a few things around. First of all, this formattedDate isn't going to work because that's dealing with a single instance rather than multiple instances. There are a number of ways we could handle this. So we could extract a new component that would handle each post item separately, or we could have a function that we can call passing in the post like so. So we could have a function called formattedDate. And for now I think that's what I'm going to do. So we'll have a const called formattedDate, which is actually a closure that accepts a post. And if we go back to our PostShow component,

now I think that's what I'm going to do. So we'll have a const called formattedDate, which is actually a closure that accepts a Post. And if we go back to our PostShow component, we should actually be able to take the logic that we have here and just drop it in down here instead. So there we go. It's going to return the formattedDistance, passing the correct ISO. And we don't want the props. We want this post here. Hopefully that will work. We also have the postUserName, and I know that's not going to work because we've not loaded that information in yet. Now, this is one of those situations where what you actually want to do is go back to the test that you created, edit them so that they fail but contain new functionality, and then work to fix them in your existing code base. So we have this indexTest. It passes posts to the view, and it's doing everything we'd

fail but contain new functionality, and then work to fix them in your existing code base. So we have this index test. It passes posts to the view, and it's doing everything we'd expect currently, but we want to make sure it's now loading in that extra user relationship. We can do that in the test using post::load, passing in the relationship we're interested in, which in this case is user. And if we now run this test, it's going to fail because obviously our test includes this user relationship on every instance, but the actual controller doesn't. We can fix that very easily by going to the PostController and up to that index method. And in the index method where we have posts here, I'm going to eager load in the correct relationship, which you can do with the with method, right? So posts with the user relationship, latest, latest by ID, and paginate. Okay, let's see if that fixes our

correct relationship, which you can do with the with method, right? So posts with the user relationship, latest, latest by ID, and paginate. Okay, let's see if that fixes our test. So I'll run this again. Sure enough, it does. So if we go back to our post index view component where we call post.user.name, well, now that relationship is available and this code will compile correctly. Let's see if that's the case. So from the front end, there we go. 23 hours ago by Luke Downing. It looks like Luke Downing wrote most of these. Let's jump forward a bit. Yeah, there we go. So later on, we have other users that write these forum posts as well. How cool is that? One thing I'd like to fix is the fact that there's no indication that we're actually hovering. The CSS doesn't change. So let's go ahead and resolve that. Now, of course, the initial temptation might be we're going

there's no indication that we're actually hovering. The CSS doesn't change. So let's go ahead and resolve that. Now, of course, the initial temptation might be we're going to come to the post title here. And let's say when you hover, we'll make the text blue-500. So something like that. And sure enough, yeah, when we hover, we do. But remember, you can actually click on this line as well. So what I want is if we hover on any clickable thing in the list item, I want the title to change in color. In order to do that, we can set up a group on the class above on the parent. So I'll set a group here. And rather than just saying hover, I can say group-hover, right? So now, no matter where I hover on the list item, note that the title is actually highlighted in blue. I don't want it to be highlighted in blue. Let's choose a different color. What was the primary color that we

the list item, note that the title is actually highlighted in blue. I don't want it to be highlighted in blue. Let's choose a different color. What was the primary color that we chose for this application? Did we stick with indigo? I think we did. Yeah, there we go. So now as I hover, I get this themed indigo color. I can click in. I see the correct page. Note that there's just ever so slightly a little gap here. I think that's due to the margin that we have. So if we change that to pt-1 instead of mt-1, we still get it a little bit. Anything else we could do here? Maybe we could get rid of the padding on the list item itself, and we could place that on the link. And by doing so, the link would kind of take up the full width. And also, if we're going to do that, well, we'll need to make the link a block as well, so it acts the same. There we go. That's a much better look. And

of take up the full width. And also, if we're going to do that, well, we'll need to make the link a block as well, so it acts the same. There we go. That's a much better look. And now I could be over here and click, and I still managed to go to the correct post item. Nice. So we have a working index, an index that shows the title, but also who published each post, and we're eager loading that relationship in so that everything stays performant. We've also proved that we're eager loading in our tests, which is really nice. And now that we have things linked in that single page application way, we have a great framework on which to build. Now we can apply everything that we've learned to comments that will be displayed on each forum post. Let's tackle that next.

displayed on each forum post. Let's tackle that next.