Learn Livewire
This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
14. Editing a book

Episodes

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

Transcript

00:00
So the goal for this episode is to take the toggle
00:02
that we've already implemented and, of course, instead just show a form there, which then we can get the data that we've already added to the books. Of course, we need to pre-populate that form.
00:13
We then want to enter any updates that we want to the book, hit Save, have that saved, but also have this component updated as well. Now, we're going to do this.
00:24
And then over the next couple of episodes, make some adjustments, first of all, just to clean things up. And second of all, take a look at a really important performance implication when we're using events.
00:35
So we're not going to be quite done here. The next two episodes are going to be crucial. Okay, so let's go ahead and build this form out. We're going to do this with inside
00:43
a Livewire component itself. We're not just going to dump a form out here because this form is going to have its own functionality. So like we separated out this form,
00:53
it's important to separate out these individual forms as well. So let's go ahead and create out a new Livewire component. And we're going to call this Update Book.
01:03
That kind of makes sense. And let's just add that directly into here. And let's just take a look. So when we edit, that toggles that component,
01:13
which of course doesn't have anything in at the moment. Okay, so with this component, we need to know which book we are actually toggling. So we're going to go ahead and grab the book
01:24
that remember is part of each of these book items. And we're going to pass it down to this component. We need to know which book we're editing. So that is super important.
01:33
So over in the Update Book Livewire class, let's go and make sure we accept in that book into there. So we have access to it. And of course we know which book to update.
01:46
Okay, so now over in the template itself, Update Book, we can basically just start to build the format. So we're going to steal this from the Create Book template because it's pretty much the same.
01:56
So let's go and just grab the form here. And we'll just go ahead and paste that in and then just make some adjustments. So let's just paste this entire form in.
02:05
We don't need an overall wrapper for this. We'll still keep the submit here because we're going to implement a submit method. We just need to change around some of these.
02:14
Now we're not going to use a form, a Livewire form for this just yet, because I'm going to show you how you can move this over and reuse the same form that we already have
02:24
for creating a book. And that's really, really efficient. So I'm going to get rid of form.title, and I'm going to get rid of that from here as well.
02:32
And I'm going to do the same thing for the author. So we're basically going to go back to square one and just have these properties inside of this component, which to be honest, isn't a bad thing
02:41
because the specific component that we've just created to update a book is kind of just like a form. So there's nothing wrong with just adding these in here. Okay, so I'm going to get rid of the loading state.
02:54
We'll keep that actually. We'll keep the loading state. And let's just check if we need to do anything else in here. And it looks like everything is good.
03:01
So let's just have a look at this on the page. If I hit edit, sure enough, we get the book title here and the book author. So the first job is to go ahead and populate this
03:11
with the current book data. And I'm just going to change over this label to save. So we know that inside of update book, we've already got access to this book.
03:20
So what we could do is pre-populate these inputs just here with that data. Now, what we're not going to do is head over here and start adding in a value.
03:30
We could actually do this. So we could say book and title like this, and you'll see that that book title is in there. But we know that this needs to update
03:41
and we need to know them new values to then go ahead and store them in the database. So that doesn't create a two-way binding that we can then use to access within our component.
03:51
So we're still going to keep wire model, but on update book, we are going to set up the state for this. So we're going to go ahead and create a title out in here,
04:01
which is an empty string. Ideally, we'd want to be able to do something like this book in here, but that just isn't valid PHP. So we're going to go ahead and get rid of that,
04:10
add it as an empty string. And we're going to do the same thing here for the author. So we spoke a little bit earlier about lifecycle hooks. When this component mounts, the mount method is called.
04:22
So let's go and bring in our mount method. And what we could do with this is we could read this book in still, or we could grab it in from here.
04:32
It doesn't really matter. So I'm just going to get rid of that. And in here, I'm going to set this title to this book title. And I'm going to set the author to the same thing.
04:45
So basically, our new update book form has a title and an author. We know that we need both of them things, but when we mount, grab it from the book that's in there.
04:55
And now we have a wire model hooked up to these two things, but we've changed their initial state. So if we come over now, just give this a refresh, hit edit, you can see that we get a book and Alex in here.
05:07
We can toggle that off. And of course, this is going to be different for each of the books that we have. So that's our initial state put in there.
05:14
What we can now do is add in a submit method. Bear in mind, we're going to change all of this around afterwards. This is just one way that we can do it.
05:22
So submit, and we can validate. So we can do exactly the same validation stuff up here. So we can go ahead and add in a rule in here if we want to. Let's just make sure we pull that in
05:32
from live wire and attributes. This is required. Of course, you can change around the error messages here as well if you want to.
05:39
Both of these are required. When we submit this via that form, we go ahead and validate. So we can call this validate,
05:47
and then we can just go ahead and update the book. Now, how do we update the book? Well, we've already got the book in here. So we can just call book update
05:54
like we usually would within Laravel. So this book update, and then we can go ahead and pass these values in. And we're going to look at a much more efficient way
06:03
to do this in a minute. So title is going to be the new title. If that's changed, and the same with the author as well.
06:12
So that's the second step done, actually updating the book. Let's just try this out. I'm going to go ahead and hit this,
06:20
just add an exclamation mark to each of these, hit save, and notice nothing happens. So there's a couple of things that we need to do here to get this working properly.
06:29
If I refresh this, reload the page, sure enough, it has actually updated, but it's really just the state we need to start clearing up. And there's a couple of things that we need to do.
06:39
First of all, we need to refresh this component. So it actually shows the new data. And second of all, we need to untoggle the editing states. We need to set that back to false.
06:49
Now there's a couple of ways that we can do this. Let's look at our own way with events. First of all, we know that we want these components
06:56
to communicate with each other. Book item has this editing state in here. So we somehow need to tell this book item that toggling needs to be set to false.
07:06
So what we could do is dispatch an event from here. So we could say this dispatch, and we could say book editing, and we're gonna use that as our toggle.
07:17
So we're gonna say false. So once this has been updated, dispatch an event to say that the editing state is false. And of course you can call that whatever you want.
07:25
So then what we could do over in our book item is we could listen for this event and then just toggle editing to false. So let's go ahead and say book editing false.
07:37
And taking that Boolean, and then we can set this editing to the value we get in there. And then we can listen for that event in here.
07:50
Book editing. So once the book editing event has been dispatched from here, we listen for it here,
07:57
making sure we put in that attribute, and then we just set it to whatever value we've given. So this will work, but there are a couple of other ways that we can do this.
08:05
We'll be looking at that. So when I hit save now, you can see that once that gets saved in the database, the event goes through,
08:11
listens from the main component, and then of course that disappears. So a side effect of what we have just done by toggling this is actually re-rendered the component out.
08:23
But this is a little bit dangerous, and I'm gonna show you what's going on in here. I'm gonna solve this in the next episode. So remember before when we edited this
08:32
and we made a change, we saved this out, the toggle wasn't set to false, so the form stayed,
08:40
but the component wasn't updated either. So if I hit save now that we have introduced this method within the item to toggle it, what do you think is gonna happen?
08:50
When I save this and I've added A onto the end of each of these, you can see that this does actually get updated now. This might feel a little bit weird,
08:59
but let's just go through this and see what's happening. So we know that when we update a book, we dispatch this event. We've already looked at events.
09:07
When we come over to our book item, we have a method in here that's being called on that event. We saw from earlier that calling a method on a component within Livewire
09:17
will actually re-render what we have. So this is just re-rendering the contents of this book. So by calling this method, it is actually going ahead and re-rendering it,
09:27
even though that's just a side effect of what we wanted. However, let's go over to our browser and just scroll down and see how many books we have. We have quite a few examples that we've put in here.
09:39
I'm gonna open up my console and open up the network tab, and I'm gonna go ahead and just edit this book and just see what happens. So let's click edit,
09:46
and let's just add another character onto the end of each of these. We know we get a few network requests here because we're working on blur validation.
09:54
When I hit save, we get an update here. So let's just find out which one this is. So it's this one just here and this one just here. Now, this one is re-rendering the list of books.
10:04
This is the request to actually send that data through and update the book. This is the request to re-render the list of books. Now, if we scroll down,
10:12
notice that every single book here has been re-rendered, even though we're just focused on editing one of these. Now, this is a massive deal because if you think about it, we've got a potentially really large list of books
10:28
with more data. This time that this has taken is just gonna grow. Basically, there's no need to update this entire list of books when we're just focused on one.
10:39
So this is a really tricky problem in LiveWire, particularly when we're working with events and refreshing things that we really need to take into account,
10:46
or we're gonna end up with a really, really slow application. So what I'm gonna do is jump over to the next episode, and I'm gonna show you how we can solve this by listening to very specific events based on an ID.

Episode summary

In this episode, we're tackling how to let users edit a book right from our interface. Instead of just showing a toggle when someone clicks "edit," we're now replacing that with a dedicated form. The cool part? The form is pre-populated with the existing data of the book, making it super easy for users to update any details.

To make this happen, we create a new Livewire component (called UpdateBook) that's responsible for the whole edit process. We pass the right book into this component so it knows exactly what to edit, and set up the initial state (title and author) using Livewire's lifecycle hooks, so the form fields show the current values.

We set up a submit method for the form, validate the inputs, and then perform the update in the database with Laravel's update method. Once updated, we want the interface to reflect the changes and close the edit form. To do this, we use Livewire events to communicate between components—for example, to tell the parent book item that editing is finished.

However, we start to notice a performance issue: triggering the event causes all book items in the list to re-render, not just the one we edited! This isn't ideal, especially if your list of books is long. The episode ends with a tease—next time, we'll fix this by dispatching and listening to more targeted events, so only the relevant book item updates. Stay tuned!

Episode discussion

No comments, yet. Be the first!