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

up really really quickly. So let's close everything off here and let's head over to our post item. So let's close off what we have here and we know that we want this to be next to what we have here so that's probably going to go down there and let's just put likes in there for now just so we can see that and there it is. Okay so let's just change this around to have a shrink of zero and

we'll say flex items start and let's say self stretch because we want this to be the same height as the other items that we have in there because we want this to sit in the middle. Okay so inside of here let's just keep this really really basic for now and create out a button and inside of that button it will be the like count for the post and let's say posts a post and likes and then let's

just style this button up really quickly so it looks a bit more clickable. So we'll set a padding on the x-axis to two and then a padding on the right of three in fact we'll do that on the x-axis and then we'll set a padding on the y-axis of one that will do. Okay so in here we're going to say item center we want to make sure that is flexed we'll set the background to slate 100

and we'll set this to rounded large let's just keep it like that for now you can add an svg icon in there a little bit later if we need to and we might do that. Okay so when we click this what do we want to do well we just want to hook this up to a like method within this component so let's open up our post item in here this is going to be really straightforward because if we implement our

like method and then we just say this post increment which is a eloquent method on likes that will just increment this in the database and save it for us so now if we head over to here we can click on this sure enough that increments now it updates for us of course because when we click on this we are reloading this component because we have called a method let's just check out our

network tab just to make sure this looks all good and if we click on this yep not too many updates we'll scroll down to another one down here and let's click on this one and check it out and yeah again we're just updating that individual component which is what we need okay so let's go ahead and broadcast this now so we can get this nicely working in real time and of course we're

just going to go ahead and make out an event and we're just going to call this post liked let's go over to post light and fill this in we've already seen this so this channel again is going to be post but we're going to be listening on an individual post channel so we don't globally listen to this and update all of our components so this will be on post dot and this post id let's

make sure we bring that into our constructor post id and then last but not least let's go ahead and make sure we implement should broadcast in here great okay so now when we actually like this we can go ahead and broadcast this so new post liked and we'll do that to others because obviously this will re-render for us post light takes in the post id and that should be pretty much it we can now

listen to post light so over in our post item here this is where we're going to listen to this so we can do exactly the same thing and we listen to post light and we refresh the component so let's just sort that out and there we go that should refresh now this isn't an ideal solution because what we're doing here is we're listening to whether something is liked which is technically just

increasing a number and we're refreshing the entire component when that happens we'll leave it like this for now we might change this over a little bit later for a more front end based solution but at least for now we're only just refreshing that individual component so there's not too much of a speed issue okay so now we've got that new event in there let's click and you

can see that this is kept up to date in real time and once again if we open up our network tab and we inspect this we're just updating that individual component and we're not refreshing an entire list of things just for this and again it's going to work in the same way because of the way that we've set this up and we're listening individually to components if we come down and like one of

these that will be updated in real time as well we've got a huge amount of records here so let's scroll down to one of these here and i think that's this one here and there we go you can see that regardless of where we are on the page this still works and again over on this side as well we're only going to be making a very small live wire re-render for each individual component as well