The next thing that we need to do is take the feed items both from the feed view and the profile view and extract that this is where things really start to get fun. You know, Adrian did a fantastic job designing this application and of course Simon did a fantastic job of extracting that into markup. And I say that because when it comes to the feed, which starts here, the feed is the same both in the feed view.

which starts here, the feed is the same both in the feed view and the profile view, it's the exact same markup. So this is going to allow us to really make it easy to extract this and use it in both places. And the reason why this is going to be fun is because not only do we get to extract this markup, but now we get to start thinking in terms of our models, the data that we are going to be using. Because now we have some, you know, actual display

the data that we are going to be using. Because now we have some, you know, actual display of information such as a feed item, you know, who typed or or who submitted this feed item, their avatar, their name, their handle, how long ago the item was posted, you know, those kinds of things because I don't want to just extract this, I want to essentially provide data to the partial that we extract, which will then display, you know, that information. So first things first, we just need to extract this.

which will then display, you know, that information. So first things first, we just need to extract this. It is this li element right here. And all we are going to do is include partials and then feedItem. We of course need to make this feedItem file. So let's do that inside of our partials folder, we'll create a new feedItem.blade.php file and we will paste in that markup. So I'm gonna change the indentation

and we will paste in that markup. So I'm gonna change the indentation because I'm a little obsessive about that. Not too obsessive but obsessive. And now we have this partial and you know, the first thing I wanna do is just focus on one view and then we can just apply that to like the profile. So for right now we're gonna focus on feed. And the idea here is we will open up the

So for right now we're gonna focus on feed. And the idea here is we will open up the routes file and we're going to build a structure that we are going to pass to the feed view so that we can start to actually display that stuff. So we're gonna have feed items, which is going to be an array of feed items. So these feed items are going to have things like the profile because you know, we need to know the information about

to have things like the profile because you know, we need to know the information about who posted a particular item. So we need the profile information so that we can get the display name, the handle, all of that stuff. And then we are going to feed that to the feed view. But at the same time, you know, I want something a little more than just an array here because I don't wanna have to come back to this view

I want something a little more than just an array here because I don't wanna have to come back to this view and make any changes to how we output this information. So I'm gonna do something which will look a little wonky. We're gonna json_encode this so that we can turn around and then immediately json_decode it. The idea being that we're gonna take this array, we're going to encode it as json so that we can decode it into an object so that the syntax that we use inside

that we can decode it into an object so that the syntax that we use inside of our view will be just like if we were using Eloquent models, which means that our profile will have an avatar and the value of that avatar is, well it's not inside of the feed view anymore, it is inside of feed item right here, images Michael, php. So we could do something like this to where we will have our item, we'll have a profile, then we will have our avatar.

where we will have our item, we'll have a profile, then we will have our avatar. And so we just need to provide that value for avatar. And there we go. Now of course we need to supply the feed items here. So let's call compact passing in feedItems, which means that inside of our feed view we need to iterate over our feedItems. So we will use foreach feedItems as item and then we will pass that item.

So we will use it for each feed items as item and then we will pass that item to our partial view and then we will end for each. So as far as our feed view is concerned, we're we're practically done. And in fact let's just go ahead and let's take this block of code this for each loop and we're gonna put it inside of our profile. So we just need to find where the feed starts. And here it is, here's our feed, here's our feed item.

So we just need to find where the feed starts. And here it is, here's our feed, here's our feed item. We're gonna collapse that so that we can easily replace it with our foreach loop. And there we go. So we are done with our profile view and our feed view, at least as far as the files are concerned, we'll still need to go back to the browser and check those out. But you know, we can go back and take a look at the feed view.

But you know, we can go back and take a look at the feed view and we see the avatar being used there. If we change it to something else like Adrian's avatar, then of course we're gonna see Adrian's picture. So we can at least see that you know, the data that we are passing to the view is actually being used. And that's great. So we need a couple of other things. We need the displayName, which in this case is going to be Michael.

We need the display name, which in this case is going to be Michael. Then we have the handle for Michael and I don't remember what that handle is, but we can easily find it, uh, right here. So we're gonna take that out so that we can use the item profile handle that's gonna work. The value will of course be our handle value. And then we need to use this display name. So Michael here will simply be replaced with item.

And then we need to use this displayName. So Michael here will simply be replaced with item.profile.displayName. We'll need to use that again up here close to the top. So, uh, where we have the avatar for Michael, we're gonna replace that with the displayName. And let's see here. So let's go line by line to make sure I don't miss anything because I probably will. Now, here is the timeAgo that this item was posted.

Now, here is the time ago that this item was posted. So we could do something like this to where we have the item and then posted date time, I don't know. Um, we're gonna leave that as is, but this is not part of the profile. This is part of the item information, which in this case was just three hours. So we have that. And then let's see what else we need.

which in this case was just three hours. So we have that. And then let's see what else we need. We have the handle being used there. So now we have the post options and I think we're okay until we get to the content. And our content is simply this right here, this <p> element and this <img>. So for right now, I'm not sure how we want to store this information. So I'm just going to output raw HTML so

to store this information. So I'm just going to output raw HTML so that we will have our item and then content and that should work just fine for us. Now I'm gonna use a heredoc for this just to make things a little easier. Let's close that heredoc, so that now that we have the content, everything else should just be, you know, the likes and things like that. So we need to find the likes if we keep scrolling down.

you know, the likes and things like that. So we need to find the likes if we keep scrolling down. So we have 23 likes. That looks like that there are 23 comments. Okay, so since these are counts, I wanna do something like this. So we have a feed, not a feed. Uh, what are these things? These are likes. We have a lightCount, which it doesn't matter what it is. Then we'll have the replyCounts.

which it doesn't matter what it is. Then we'll have the replyCount. Now I know in the content or in the markup, this is comment, comments, replies. I'm gonna go with reply. So replyCount, let's have 45 and then we have a repostCount. And let's set that to 151. Again, the values don't matter

And let's set that to 151. Again, the values don't matter and we just need to output that information. So this right here is going to be our likeCount. So we'll have our item and likeCount. Then let's just copy that so that we can easily paste that for the replies, which will be there. The property name will be replyCount. And then finally we need the repostCount. So let's keep scrolling on down.

And then finally we need the repostCount. So let's keep scrolling on down and let's replace that with repostCount. Okay, so let's see, what else do we need? Um, I think there's one other place where the displayName is used and it's gonna be the reply form. So reply to Michael's post. So instead of Michael, we want to use the item profile, displayName.

So instead of Michael, we want to use the item profile, displayName. And I think that's going to be it. If we take a look inside of the browser, we can see that everything is going to look exactly like it did before, except that now we are supplying data to this. Now the profile doesn't work because uh, we're not passing any data to that. So let's just copy our feedItems and let's paste that inside of the profile route so

So let's just copy our feed items and let's paste that inside of the profile route so that we can supply the feed items there. And then that will give us the ability to see that inside of the profile. Everything else should work as it did before. Our numbers are what we are passing 23 likes, 45 replies, 151 reposts, reply to Michael's posts.

45 replies, 151 reposts, reply to Michael's posts. Yeah. Now we're not gonna be done with this because we also need to include, you know, the actual profile information, like in this case for Adrian. But that's gonna come at a different time. What I want to do next is focus on the replies. We need to extract that, but before we do that, let's commit our changes.

We need to extract that, but before we do that, let's commit our changes. We can put whatever we want for the message, but I'm gonna put extracted feed item. Let's commit and in the next episode we will extract the replies markup.