Building Reactive Realtime Applications with Livewire
This episode is for members only

Sign up to access "Building Reactive Realtime Applications with Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
03. Outputting posts

Episodes

0%
Your progress
  • Total: 1h 43m
  • Played: 0m
  • Remaining: 1h 43m
Join or sign in to track your progress

Transcript

00:00
So the first performance issue that we're going to come across is when we implement infinite scroll.
00:04
We want to do this in a way that as we load more records onto the page, regardless of how many we have, we don't slow down each subsequent request. But before we start to look at infinite scroll,
00:15
let's head over and just start to create out our post and seed the database. So we're going to go ahead and, of course, make a model here called post.
00:23
We'll create a migration, a factory, and a seeder alongside that. And let's just fill in some of the information that we are going to be using.
00:32
Okay, so we are going to have in here a, let's say a text field for the body. We, of course, want this hooked up to a user. So let's make sure we include a foreign ID for the user
00:47
and constrain that. We're also going to have a really simple like count on here. So we're going to have an unsigned big integer for the likes.
00:57
And we'll set that at a default of zero. So let's go ahead and run our migration here to create that. And we'll head straight over to our post model. And we're just, for the purpose of this,
01:08
going to set guarded to false so we don't need to fill in anything fillable. Okay, so over on the user model, let's go and create out a relationship for them posts.
01:17
And then we'll just get these seeded. So a user just has many posts, really, really simple relationship here. So this has many and posts, great.
01:28
Okay, so let's go over to our post factory where we can define out some fake data inside of here. And for the body, we'll just use the fake helper, create out a sentence, and we'll just set this to 20.
01:43
And we have a default of likes, but we'll just define that in there anyway. Okay, so now it's time to go to our seeder. And we want to seed this data in order
01:51
because when we're implementing our infinite scroll, we need to make sure that these are in a naturally created order. So for every record we create, when we seed our posts,
01:59
we want the latest one to have a higher timestamp so we get these in a nice order. So we're gonna come over to our post seeder. And let's fill this out so we can go ahead and run it.
02:11
So we'll go ahead and grab our post model. We'll grab a factory instance here. And then we're going to choose how many times we want this. There's 200, and then we'll chunk this
02:21
by 10 in the next episode. So we get 10 loads. We need a state in here for the user. Now you can generate one of these out,
02:29
but as we're running through the course, I kind of want to see these when we get to the point where we're gonna be scrolling all the way down and editing. So I want these to actually hook up to a user.
02:38
So I'm gonna hook them up to the user that I've registered in my database. Okay, so we will go ahead and create them. But just before we do that,
02:46
we're gonna go ahead and add in some state to increment the created out date for every single record we create. So to do this, we can pass in a new sequence object,
02:55
and this takes in a closure. So let's go ahead and just use a short closure here. And basically we can just return from this what data we want to fill using a sequence.
03:06
Now this gets passed into it, a sequence object. And what we can do is just grab the current timestamp, and then we can just add a day onto this. So for every record that gets created,
03:17
we're just adding a day onto that. You can do pretty much whatever you want here. So from that sequence that we get passed in, we can just choose the index,
03:25
which will of course start at zero, and just keep incrementing. So we basically end up with a list of posts created one day after another,
03:33
and you could choose hours or minutes, whatever you wanted. Okay, let's go ahead and see this, and we should be good. So phpArtisan, dbseed, and we'll choose our post seeder, and there we go.
03:44
So if we head over to our database, we should now have, if we look at the created at date, an incrementing day for each of these. Great.
03:52
Okay, let's get these posts output on the page. So we'll go and create out a Livewire component for these. So phpArtisan, Livewire make, and we will just call this post index.
04:04
So let's create that out. And before we do anything, let's head over to the dashboard and just output this on here.
04:10
So Livewire post index, and that should be good. Okay, so over in our post index, we are going to just pass these down from render. We are gonna be changing this,
04:20
but we wanna get these out on the page and styled. So let's go ahead and grab our posts here, scope by the latest, and we will just get all of these and just render them out.
04:30
So over in post index, let's do this now. Okay, so let's make a start on doing just a simple foreach over each of these posts as a post, and we'll end the foreach there.
04:42
Now, each of these items is gonna have their own functionality. So I am gonna create out a nested component here. So let's go and create a post item,
04:50
which we can render out for each of these. So Livewire post item. And of course, we're gonna be passing the post into that so we can access it.
04:59
This is gonna work very differently when we get to infinite scrolling, but it won't be too much trouble to switch it out because we'll have all the styles there already.
05:07
Okay, so now that we're doing that, of course, at the moment, we don't see anything, but we can head over to our post item and start to build this out.
05:14
So we're gonna have a left-hand side here. So let's just create out a div for the left-hand side for the profile photo, and then we're gonna have a right-hand side in here.
05:23
So this will have things like the user's name. So post user name, which we don't have set up at the moment. So if we head back over to our model,
05:32
we'll go ahead and create out a user relationship in here. And we'll say this belongs to a user. Like so. And we should start to see something now.
05:44
Yeah, of course, we just need to accept the post item into here. So let's say post and pull this in. And there we go, great.
05:58
So of course, they're all by me at the moment. Okay, let's just finish styling this up now. So let's go down here and actually output the post itself. So we'll create out a separate container for this paragraph
06:11
because we're gonna be adding some editing stuff later, but this is gonna be the post body. Let's check it out. Okay, looking much better.
06:18
And just while we're here, let's go over to our dashboard and make this a little bit smaller as well, just so everything fits nicely.
06:24
I'm gonna bump that down even further. Great. Okay, so over in our post item then, let's just start to style each of these things up.
06:32
So we're gonna have a font of bold here, and we'll set the text to large for the user's name. We'll leave the paragraphs. We don't really care too much about that.
06:40
And let's go and implement the avatar. So for this, we'll just create a really simple avatar URL helper in here. And I'm just gonna pull some code over here for my notes,
06:52
which you can grab on the GitHub repository. This is basically just using the UI avatars API. We pass a URL encoded full name for the user in here, and then we can just choose the color,
07:02
the background and the font size. So nothing too difficult, and you can just go ahead and grab this. Okay, so inside of our div here,
07:10
of course, we're gonna output an image here. We'll miss the out out just for now. But in here, we want to, of course, output the post user avatar URL.
07:20
And let's check this out. Probably doesn't look great at the moment, but now that we've got everything we need, let's just start to style this overall thing up.
07:27
So in here, we're gonna set a flex of item center. That's gonna put both of them things next to each other, as you can see here. And then we'll set a space on the X axis of five
07:39
just to separate the avatar out from the user's details. Now for the avatar itself, we want to set shrink to zero. So that goes ahead and does not shrink. We don't want that to shrink in based on the content
07:52
we've got on the right hand side. And let's start to style the avatar up as well really quickly. So we'll set a width and a height of 12,
08:00
and we'll set rounded to full. And let's check that out. Okay, it looks much better. And then in here, we'll set a specific width of 12 as well,
08:09
just so we don't run into any issues. Now each of these posts needs to be spaced out. So we're gonna set a border on the bottom of, let's just say slate 200, it doesn't matter too much.
08:19
And we'll make sure we provide border bottom. And that should be pretty much it in terms of separating them out. We just need to add in some padding in here.
08:28
So we'll set a padding on the bottom to, let's try eight and see what that looks like. And I think that looks absolutely fine. And let's go ahead and make sure
08:36
that this content in here grows. And we'll also set a space Y of two to separate the name out from the body. I'm actually gonna change this around to items start as well
08:47
just so we have this avatar at the top next to the user. Now, the reason I've not added a padding on the top is because our top element will then have pet padding and it will look a little bit weird.
08:57
So what we're gonna do is head over to our posts index. And in here, we're gonna separate these out by a space Y of say four. And let's actually do that by eight
09:10
to kind of match that up. There we go. So we don't get a padding at the top now, but these are all nicely spaced out.
09:15
Okay, I think that's enough styling for now. We don't wanna take too much of our time up doing this. The last thing I am gonna do is add in an ID for each of these posts.
09:24
So I'm gonna put that just next to the user. We will get rid of that, but we basically want to see the ID of each of these records.
09:33
So you can see we start obviously 100 because we've seeded 100 and we go all the way down to one at the bottom. This is really important when we look in the next episode
09:41
at infinite scrolling, because we need to make sure that everything is coming in in the right order. So now that we've got a list of posts out is looking okay,
09:49
we'll tweak it as we go. Let's jump over to the next episode and tackle the problem with infinite scrolling this without slowing the page down as we go.

Episode summary

In this episode, we're laying the groundwork for outputting posts on the page before we dive into infinite scroll.

First, we set up our database and models by creating a Post model, migration, factory, and seeder. We give each post a body text field, link it to a user via a foreign id, and include a simple like count that defaults to zero. Then we define the necessary relationships on the User and Post models.

Next, we use factories and seeders to generate a bunch of posts for our testing. We make sure to increment the created_at date for each post so we’ll have a realistic timeline of posts (which will be especially important for infinite scrolling later!). We're seeding 200 posts here, each linked to a specific user in the database.

Once the data is ready, we create a Livewire component called PostIndex to display the posts. We keep things simple for now: just grabbing all posts ordered by latest and looping through each one. For better organization and future functionality, we nest a PostItem component for each post, passing in the post data.

We also tackle some basic styling: output the user’s avatar (with a quick helper using the UI Avatars API), show the user’s name (making sure the relationship is defined), and display the post body. Posts get separated nicely with borders and spacing, and we temporarily show the post ID next to the user name—a handy indicator as we go into infinite scrolling next.

In short: we're getting some posts on the page, complete with user data and a nice look, ready for the real fun (infinite scroll!) in the next episode.

Episode discussion

No comments, yet. Be the first!