Welcome back. Alright, so here's what I think we should focus on for this episode. So if we take a look at our feed right now, yes, for each Post I can comment or repost. I can view the individual Post as well as any replies. However, at the moment, there's no ability to visit the person's profile if we take a look, we haven't worked on that yet. All right, let's get started. Now I'm gonna go

we haven't worked on that yet. All right, let's get started. Now I'm gonna go to my routes file and I'm gonna look for something related to profiles. All right, it looks like we have a ProfileController and we have an endpoint. So if you visit / and then the handle that will go to a ProfileController. This loads the profile and all posts related to that profile and then it loads a view.

This loads the profile and all posts related to that profile and then it loads a view. Okay, perfect. So now this is going to become inertia render. I'm gonna set up a new Profile or profile if you want, singular, uh, /show view. And then let's send through both the profile and the posts. Okay? So the profile will be converted to a resource and the posts will also be, uh, converted to a collection of Post resources.

and the posts will also be, uh, converted to a collection of post resources. Alright, let's create the inertia view. So once again, within the pages directory, within resources/js, let's add profiles/show that view. Alright, so within our template we will start with our layout, show the profile, and of course we can define the props. So I said it needs the profile, which is an object. And again, the post will be an array of post resources.

So I said it needs the profile, which is an object. And again, the post will be an array of post resources. Alright, let's have a look in the browser. Alright, so yeah, sure enough, our main section isn't taking up the full width yet, but we are successfully loading the page. Alright, let's get to work. So I'm gonna begin by visiting Jeremy's profile.show blade view, and then like we've done in the past, I'm gonna migrate this over.

view, and then like we've done in the past, I'm gonna migrate this over. So I'll start by grabbing all of this, switching back, pasting it within our layout. We'll reformats, and then like always, we're just gonna look for stuff that we can migrate over. So for example, right here, we don't have a profile header yet, but we do have a Post component, so I can reference that. Next for the loop here, of course, we can change this

component, so I can reference that. Next for the loop here, of course, we can change this to v-for, uh, item and posts and that will reference item. So now I can get rid of this entirely. Uh, next of course post should have a binding there. Next, let's scroll back up here. We're not using TypeScript, um, in this series. That could be cool for section four though, if we ever do one. Uh, next I'll swap this out route('post.index').

four though, if we ever do one. Uh, next I'll swap this out route post index. Uh, next, this SVG I'd love to extract once I know what that is, uh, I think it's probably just an arrow. Next ProfileHeader. Okay, so let's create that. Now we'll put this within simply components and I will call it ProfileHeaderView. All right, next, let's go into the original blade components. And yeah, once again, I'm just gonna move it all over.

original Blade components. And yeah, once again, I'm just gonna move it all over and then make my updates, paste it in reformat. And what do we need here? It requires profile. And actually we can just see if we switch back if only needs the or, it only requires the profile itself. All right, script setup, define our props and I just need a profile to work with. All right, so now, uh, let's just do magic screen casting. I'm gonna swap out all of these, uh, php references

All right, so now, uh, let's just do magic screen casting. I'm gonna swap out all of these, uh, php references with their new JavaScript equivalence. All right, and I think that's done. So if you take a look now in every location I could find, I swapped each php object out with the JavaScript equivalent. The only thing I noticed is right up here at the top profile.cover_url. I don't think that's included within our Profile resource.

dot cover url. I don't think that's included within our profile resource. So this is actually a good point to have a 32nd conversation. Remember, you might find some situations where a profile resource is used all over the site, but you only need one or two attributes from it. Uh, or, or keys here. But then maybe for the profile itself, you need quite a bit more.

But then maybe for the Profile itself, you need quite a bit more because this is the single point of entry to learn all about, uh, that person's profile. So in those cases, if you want to create two resource classes, you could have like a ProfileSnapshotResource. This just gives you a snapshot of the person's profile. But then the actual ProfileResource includes everything you would need for that profile page. These are things you, uh, you absolutely can accomplish.

would need for that profile page. These are things you, uh, you absolutely can accomplish. Okay, anyways, for now though, I think it's okay. So I'm gonna include coverUrl, like so. Okay, so now if I switch back to my profile page, this can now be swapped out with our new ProfileHeader component. And I'm gonna send through the profile itself. Okay, so I think, I think we're okay. Why don't we have a look in the browser now?

Okay, so I think, I think we're okay. Why don't we have a look in the browser now? And once again, we get the black screen at death. Okay, that's fine. Let's take a look at the console. And you know what, we've seen this one before, haven't we? Profile parameter is required for route profile.show and post view on line 24. Yeah, this is another case where we are assuming that we will have a profile object on Post, but I bet the way the query is executed,

that we will have a Profile object on Post, but I bet the way the query is executed, we don't have access to that. So if I go into ProfileController, uh, let's return posts to resource collection and let's just see what we have. Alright, so yeah, take a look. Each one of these represents a single Post and you can see within here, nope, we're not loading the Profile for each Post,

and you can see within here, nope, we're not loading the profile for each Post, even though it seems like that might be necessary. So what we can do is return to Jeremy's profile page query. And, uh, first real quick, these are being imported. I don't like this. Get rid of those. Anyways, here is the query. So gimme the Post. It matches the profile. We're, we're eager loading the repost. That includes the profile, but not the profile at the top level.

That includes the profile, but not the profile at the top level. So once again, we could, we could chaperone, uh, if you're familiar with that method or we can just include it as part of the query. So let's see if that helps us out at all. Now, if I run the query and return it, we should have the profile that includes, uh, what we need. Okay? So with any luck if I give this a refresh, it works.

that includes, uh, what we need. Okay? So with any luck if I give this a refresh, it works. And this looks great. I love it. So let's see. Let's go to the homepage. Let's access this one right here. All right, we see the avatar, we see a generic banner here. We can see his bio and who he's following, and how many people follow him. This looks great. And here's all of his replies. It just works, which is awesome. I really like this. Now, one thing I would like

It just works, which is awesome. I really like this. Now, one thing I would like to take a look at is right down here. I don't know if, if we're actually going to flesh out the idea of highlights, but it might be useful to see all of the replies that this person has left. And right now we haven't implemented it. So let's see. It looks like Jeremy set this up as the profile and then yet with replies, which is a little interesting,

It looks like Jeremy set this up as the profile and then yet with replies, which is a little interesting, but that's okay, we can go with that. So if we go to our wraps file right here, that loads ProfilesController replies. All right, grab the profile. We load the, so it's interesting that each of these is their own query. I wonder if these could be merged a little bit. And once again, I don't love

I I wonder if these could be merged a little bit. And once again, I don't love that we have the fully qualified name there 'cause it's already being imported at the top probably because of Rector. Uh, but nonetheless, we're gonna stick with that. So we're gonna do the exact same thing as we had before. We're going to return an inertia view called profiles.replies. We're gonna send through the profile and the posts. Great.

profiles replies. We're gonna send through the profile and the posts. Great. And then, yeah, maybe if I open this up, we can just duplicate that. 'cause I, my guess is they're pretty similar. So let's duplicate and rename to replies, and then let's find out what Jeremy created originally. And yeah, it looks very similar and in fact, it's so similar. I wonder if, if I need a separate page component for this.

and in fact, it's so similar. I wonder if, if I need a separate page component for this. Here's what I'll do. I'm gonna move Jeremy's to the right and I'm gonna go to our replies. And remember, this is just a copy paste from the show page, and I wanna see how they are different. So we still have the main section. Okay, we have the profile header, we have the feed. Yeah, I mean, it's virtually identical. The only difference is what, like,

Yeah, I mean, it's virtually identical. The only difference is what, like, it's, it's the same thing. So I wonder, hmm, let's gonna ProfileController. Can I just get away with loading the show page again? Let's just see what would happen if we switch back. All right, so here are his, uh, posts. But now if I click on replies, yeah, I mean, I think, I think that's correct, right? Correct to me if I'm wrong, if you worked

I think that's correct, right? Correct to me if I'm wrong, if you worked through section two, is there anything unique there or is it just basically a filter? Um, so I could be wrong, but I think we can maybe skip that dedicated replies page entirely. So if that were the case, yeah, if we go to replies view, why don't we just delete it and hope we didn't break anything?

why don't we just delete it and hope we didn't break anything? Okay. But there are a couple things we should do. For example, uh, we need to show the currently active link here. Okay, fair enough. So we go into show view, scroll down here, or I'm sorry, wrong page profiles/show. And let's see, it looks like we have a ProfileHeader that contains all of this information. And then here is the navigation.

that contains all of this information. And then here is the navigation. I might even extract that into its own component, by the way. Okay, so I do see two links here. And yeah, it looks like we are skipping over highlights and streams, uh, in this series. We're, we're trying to leave certain things open. If you wanna continue on in section four, you have certain things to work on.

If you wanna continue on in section four, you have certain things to work on. Okay, so anyways, right here, these are anchor tags. They should now be Inertia links so that we're not performing full page refreshes. And then next, why don't we bind a new class and we'll say, look, let's do, actually, let's do it like this. Let's say, is this the currently active page? So once again, I could say, well, if the,

Let's say, is this the currently active page? So once again, I could say, well, if the page component, although in this case it's going to be profiles showed no matter what. So we could do pageURL, or actually a quick little tip because we're using Ziggy, Ziggy gives us the ability to check what the current route is as well. So yeah, we could say, um, if the route current is profiles replies,

So yeah, we could say, um, if the route current is profiles.replies, then let's do like our yellow textPixel. Otherwise textPixel light, 60%, get rid of that. And let's take a look in the browser. All right, so here's another profile or on the post page, let's go to replies. And now you can see that's highlighted there. All right, let's now do the exact same thing.

And now you can see that's highlighted there. All right, let's now do the exact same thing for this one up here. Paste that in. And this time we're gonna go to profiles.show as our check. All right, come back, replies and posts. Everything is working. Cool. Is there anything else we need to do here? Uh, some of the form stuff I think would be a sectionFour, or we could go back to sign then.

Uh, some of the form stuff I think would be a section four, or we could go back to sign then to implement, uh, the form pages. Uh, but this mostly seems okay to me. The only thing I might do at this point to wrap up is to return to the profile page and just look for, um, basic cleanup. For example, right here, what is this? SVG? Uh, let's find out. It says back. Okay, so it's like the little, the little arrows there.

Uh, let's find out. It says back. Okay, so it's like the little, the little arrows there. Okay, let's change that to, why don't we call it backIcon. All right, so within the icons directory, let's add a new one called backIcon. All right, paste that in, reformat switchBack, import it, and little bit cleaner. Okay, so we have our feed. Um, yeah, like I was saying, this is the sort of thing,

Okay, so we have our feed. Um, yeah, like I was saying, this is the sort of thing, I believe this is in multiple places in the code base, so I'm just gonna look for that's all folks. And yeah, you can see it's in the index page, show page. Um, these are the blade files that aren't relevant anymore, but nonetheless, we are repeating this over and over. So maybe this should be moved. Uh, if it can't go in the layout file, it can at least go in its own footer.

Uh, if it can't go in the layout file, it can at least go in its own footer. So if this does qualify as the app footer, then maybe something like site-footer or app-footer, um, yeah, I would do that. So I'd put that in a basic components directory at footer. And it's just a, this is just a basic template here. It's, it's a dumb template, um, that doesn't have anything special in it, and that's okay. Okay. So once again, I'd import that.

that doesn't have anything special in it, and that's okay. Okay. So once again, I'd import that. I'd look for any other locations. All right, here's another one. And yeah, let's replace it with appFooter. And real quick, I just wanna double check. Are there any unique classes here? NT 30, ML 14? Yeah, it looks like the exact same thing. So let's get rid of that one more. That's all folks. There we go. I knew there was one more. Okay.

So let's get rid of that one more. That's all folks. There we go. I knew there was one more. Okay. And let's replace this, uh, footer. Yeah, little things like this, I promise you really do go a long way. The same thing here, like if this represents our feed where it's an ordered list, um, but each post is itself a list item, maybe we extract all of this into a Feed component that where you pass in all of the relevant posts, that's, uh,

of this into a feed component that where you pass in all of the relevant posts, that's, uh, something we could do as well. Uh, I believe this is also something where it's repeated over and over again. That should go within its own component as well. And I'm gonna do that one behind the scenes. Alright, we're making really good progress. I will see you in the next episode.

I will see you in the next episode.