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

Episodes

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

Transcript

00:00
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.
00:19
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
00:44
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
01:06
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
01:27
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
01:57
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
02:25
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
02:52
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
03:17
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
03:37
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
04:00
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
04:25
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.
04:46
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,
05:14
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
05:43
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
06:09
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
06:31
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.

Episode summary

In this episode, we're tackling how to toggle the editing form in our app using Alpine.js, instead of making extra requests to Livewire. The main goal here is to keep things snappy and avoid unnecessary network calls as much as possible.

We start by wrapping our post item in an Alpine component with an editing state. This lets us show and hide the edit form on the client side, meaning there's no need to set up a Boolean in Livewire and sync it back and forth with the server. We rearrange the markup a bit, make sure we only see the edit link for users who should have it, and clean up the UI with some Tailwind spacing.

Next, we hook up Alpine's click handlers to control when we show the edit form or the regular view and use x-cloak to prevent any flickering while the page loads. This approach gives us a really slick experience — you can hit 'edit', the form swaps in instantly, and there's no delay or network request.

To keep the code clean, we spin out the actual edit form into its own Livewire component. The form shows up when editing is true, and you can cancel out with a custom event handled purely by Alpine.

The end result? A smooth toggle between viewing and editing, entirely on the client side, with no extra chatter to the server. In the next episode, we'll go further and handle the actual editing, updating, and broadcasting changes in real time.

Episode discussion

No comments, yet. Be the first!