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
10. Toggling editing state with Alpine


So because we are adding a few additional requests to keep this really fast, let's look at a method that we can use to toggle this edit form without sending an additional request to Livewire. So we'll create this toggle out so we can see the form, and then we'll look at editing and broadcasting this in real time and how we're going to deal with that.
Okay, so our body is just here, but this is what we want to toggle. So we are going to go ahead and wrap this and use an Alpine component. So let's just rearrange this a little bit. I'm going to go ahead and wrap all of this stuff within a div here, indent this, and then in here, we are going to introduce an Alpine component with an editing state. That means that what we don't
need to do is over in our post item, our actual component itself, have some sort of editing Boolean in here, which we need to send an additional network request down to toggle. So we're going to do this all on the client side to save requests. Okay, so what we're going to do in here is have the ability to toggle this. Now we're going to
copy this, paste this here, change this to edit, and we'll add in a thing in our policy in a minute, and then we'll change this over to edit. And let's get rid of this wire click just for now. Okay, so before we do anything, let's head over to our post policy, and we're pretty much just going to replicate this entire thing down and just change the name over because the condition
is exactly the same. Okay, so we should see our edit links now, specifically for us, and let's also go ahead and add in a space Y of 4 on here just to separate these out. And now when we click on this edit button, we want to toggle editing to true and then show something if this is true. So let's think about this. We actually probably want this wrapped in here because all of that
will be hidden in here if we don't have editing set to true. So we could say show this if we're not editing, so show our post and our buttons if we're not editing, and then here we could show this or just do X show editing, and this is our edit form, and then we want a cancel button in there as well. So let's go and hook this up to actually change this value. So we're going to say
X on click, and we're going to set editing to true. And now when we hit edit, we see that edit form, so it kind of swaps that out. Now we do have a little bit of a flicker here, which we can get around using X cloak. So let's go ahead and add in X cloak to here, and then we're just going to come over to our main CSS file and target this. Now this works by Alpine adding in an X cloak
attribute, so we can target that attribute specifically, and when the page is loaded, then this will be removed. So basically we want to initially hide this, and we can do that with a display of none, and just make that important. So basically X cloak will get added to any element that we add X cloak to, then it will be removed once everything's finished, and then this will be
shown if it needs to be shown. So now you can see there's no flicker when I refresh the page. So let's hit edit, and that toggles that over nicely. Okay so the first thing that we need to do is just build our form out. So let's do that inside of here. We are going to create another Livewire component for this, because we want this to have its own functionality. We don't want all
that stuff hovering around in here. So let's go ahead and build out a component really quickly. So Livewire make, and we'll call this edit post, and let's just add this directly into here. Livewire edit post, and what do we need as part of this? Well we need to know which post we're editing, and of course we need to fill in the original details of the body. So if we head over
to the edit post component, let's design this out. This is of course going to be a form, so let's switch that over. Again we'll just keep this really simple. So let's go and create our div here. In fact we could probably take what we had from create post, and go ahead and just copy this all over. So let's go over to edit post, paste this in. We know we've got a post body, the placeholder we
don't necessarily need. We will wire this up in a minute, but let's get rid of that. We'll keep the errors in there, and we'll change this over to edit. So let's go ahead and have a look at this. There we go, so that looks nice. We'll also have a button next to edit, so we can actually cancel this off. So let's go ahead and wrap this in a div, and then put these two things next to each other.
So let's go and set a flex item center, and we'll space them out by say two, and then down here we'll have a plain button which cancels this, and then we will just set this to a type of button so it doesn't submit the form. So when we click on this, we want to dispatch to close this off. At the moment it's not going to do anything. If you think about it, the way that we've set this up now,
if we head over to our post item, we are using Alpine to toggle this, so we can't easily pick this event up within Livewire. But what we can do, we can still get around this, if we go over to edit post, with this button we can say x on click, so within Alpine we can dispatch, cancel, or we could say edit dot cancel, and then over in our post item we can pick this up and set editing back
to false. So we could say x on edit dot cancel, and we can set editing to false. So these are all going to be JavaScript events, but within the window, and they won't touch Livewire at all, so we'll see that in just a second. So if I hit edit now, and hit cancel, this doesn't work, and I think that's just because I've used a dot. So let's just hyphenate that instead, and let's go
over and change that in there as well, and let's have a look. There we go, so it cancels off. So now we've created a toggle, which we might usually go to Livewire for, and we've done that all on the client side. So if we keep our network tab open here, and we go ahead and hit edit, we don't send a request through to the back end. When we cancel, we don't send a request through to the back end
either, so that works really nicely. Okay, so now that we have toggled this, and spoke about why we've done this to save a network request, since we're sending a few too many when we've built up our functionality for actually posting, let's go over and now look at actually editing this, and broadcasting the changes, and how we pick that up and refresh each component.
12 episodes1 hr 43 mins


Livewire can react and re-render anywhere you need it to. But what if we have a infinite scrolling timeline of user posted content with updates in realtime? With added reactivity, we need to be a bit more careful about performance.

Let’s build this together, making sure we keep things running smoothly along the way.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!


No comments, yet. Be the first to leave a comment.