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
16. Re-using form objects

Episodes

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

Transcript

00:00
So at the moment, inside of our update book component, we're pretty much duplicating what we did within our book form when we created a book. Let's just have a look at what we're doing in here.
00:11
And then we're going to move this over to reuse a book form, but for updating as well. And this is really, really convenient to have all of your rules in one place, and it just makes sense.
00:23
So we know that we are setting these properties on here. There's nothing wrong with doing this. Once this component mounts, we're extracting this data from our book that we've passed in,
00:33
and we're setting it to the title and author so we see that in the form. And then when we submit this, we're validating it with the rules that we've used for attributes,
00:40
and then we're updating the book and, of course, dispatching the specific book that we've updated. But we can improve on this. Now, just before we do this, if you do ever
00:50
come across a point where you want to do this and you're not working within a form, that's absolutely fine. There's nothing wrong with doing this. I want to show you a convenient way
00:59
where we can mass assign this state to our properties. So we can actually get rid of all of this code and do a shorthand, which is this and fill. So what this will do is it will take in an array of all
01:11
of the things that you want to fill, but it will sort of spread these out to each of the properties that you have. So rather than assign each one after one after another,
01:20
we could just say this book only title and author. So that gives us back an array and then our collection. And then what we can do is take that array and then fill the properties title and author from that.
01:37
So Livewire has a bunch of these helpers. There's nothing wrong with doing it in the way that we did it by individually assigning them. But if you want to be a little bit more efficient,
01:45
Livewire does give you things like this. So let's just take a look at that before we look at moving this over. And you can see it works in exactly the same way.
01:53
OK, so we're not going to end up doing this. We're going to move all of this stuff over to a form class, which we already know is a little bit better, a little bit neater.
02:02
So let's just open up our book form, which we purposely called book form, not create book form, because we're going to be using this to update the book as well.
02:13
We've already got the rules in here. It kind of makes sense. We've already got all of the properties that we need. We could just create another method
02:21
in here called update, which specifically updates this information. So there's a couple of steps to doing this. Let's just get rid of the title and the author
02:30
that we have in here. And let's get rid of the mount method so we can sort of start from scratch. Obviously, this is going to break things
02:37
because when we hit Edit here, we're not going to have any of the state, and we don't have that submit method either. OK, so we're going to head over to our book form.
02:47
What do we need to do in here to be able to update a book? Well, we need to take the book that we're updating in. So this is now a dual-purpose form. There's nothing when we've created a separate format
02:58
to specifically update a book. But this is now going to become a dual-purpose form. So inside of this form, what we're going to do is take in a book.
03:07
Really importantly, this is nullable. So we're going to go ahead and make sure that we set that to potentially nullable because when we create a book, we're
03:14
not going to have a book in there already. So this is now the book, the existing book that we want to update. And then we want a method in here which will set that book.
03:22
So we could do that anywhere. We'll just do this down here. And we'll call that setBook. That is obviously going to take a book in,
03:31
and it's going to assign it to the book that we're storing inside of there. So what we can now do is over on our update book, when this mounts, we can bring in that book form,
03:43
and then we can store the book. So let's bring in our book form to here like we did when we created a book. We'll just call that form.
03:51
And then when this component mounts, instead of setting the state locally to this component, what we can now do is say this form setBook, and we can pass this book in.
04:04
Or of course, if we're accepting this book in here, if we were doing that, we could just pass book in. But that's pretty much it now. So over on our form, we now have that book in there
04:14
ready to be updated with them properties. So no change here. It looks exactly the same. But when these mount, it's setting
04:21
that book in there for us. So over on our book form, what we now want is an update method. And we're just going to do this up here.
04:28
And let's create out an update method. And of course, what this is going to do is just update the book as we had before. So in here now, the responsibility
04:37
of the update method is taking the book that we've passed in when we set that in that mount method and going ahead and updating it. Now, let's just take a look while we're here
04:47
at these arrays. So there's a much more convenient way that we can do this. What we can do is say this only.
04:54
Now, if you've worked with Laravel for a while, you'll know that when you use something like a request object when you are submitting a form, you can use this only shorthand method
05:02
to grab only the things out of the form, out of the request that you need or the form request. In our case, only within Livewire within this context allows us to pluck out the title and author properties
05:15
of this class. So we can take this and this in a convenient method to pass it into where we would usually do something like this.
05:23
So we can actually refactor this part of this now as well and do exactly the same thing. So we can take this and we know that when we create a book, we want to create that with this.
05:34
So this will just return us an array like we would normally pass to the create and update method, much cleaner. So we've updated the book
05:41
and then we can just do the same thing by resetting this. We could return it if we really needed it, but I think that will do for now. Okay, so now that we've done that,
05:50
let's take a look at actually submitting this through. We don't do this in here now because that's being done in the form. We don't need to validate this now directly in here
05:59
because that is now on the form itself. And there we go. So let's just review the differences and then we will look at how this works on the front end.
06:08
So instead of storing the properties inside of here, we're reusing the book form by setting the book model directly within the book form to kind of put it into an update state.
06:20
Then what we're doing, once we've set the book is in submit rather than directly updating the model within submit, we're calling this form validate
06:29
and then which we nearly forgot this form update, really important. So let's go over, that's gonna update that book. It's then gonna reset the state of the form
06:40
and then we're gonna dispatch that event and everything should be good. So let's go ahead and make sure that this all works. So the book title and the book author,
06:49
again, are not in there. That's just because these are now being stored in our form. So what we need to do is over in our update book here, change that over to form.title,
07:00
change this to form title. So it's just basically doing the same thing as we did when we refactored our create form. And if we head over and hit edit,
07:09
we still don't see any update there. So they are in there. I think if we go to our book form, when we set the book in here, yeah,
07:19
so we set the book, but we didn't actually fill any of these. So we forgot to move over the fill part of this. We need to fill them properties
07:27
so we can originally see them on the form. So let's go ahead and take the book or we could just take the book directly from here and say only title and author.
07:39
So when we set the book, set it as the model. So we know which model to update, but also set the properties in here so we can see them in the form.
07:46
Let's just give the page a refresh here, hit edit, and there they are. Great. Okay, so let's add another character onto the end of here.
07:54
Hit save. Remember when we hit save over in our update book component, that's gonna validate via the form.
08:01
And then it's gonna call that update method, which is now on our book form down here, which updates the book with the new values that have been bound with wire model.
08:10
So when I hit save, there we go. It works in exactly the same way. Now, like I said, you don't need to do this, but it's good to have a form that shares validation rules
08:19
that allows you to create and update a model as well. But there's nothing wrong with splitting this out to having two separate forms if you wanted to, to do different things.
08:31
Sometimes in an application, you'll need different rules for when you're updating things. So that would make sense.
08:36
But for something like this, we can reuse that book form to have two methods, both to update and create, and it makes everything just look a lot cleaner.

Episode summary

In this episode, we tackle some code duplication in our update book component by reusing our existing book form class for both creating and updating books. Up until now, we had separate logic and repeated validation rules. Instead, we're refactoring so all logic and validation lives in our reusable book form, which can handle both scenarios.

First, we look at how we were assigning properties and validating individually, and then demo a cool shorthand to mass assign properties using the only and fill helpers in Livewire. This makes grabbing and updating the fields way more concise. But then, rather than sticking with that, we step it up by moving our state and methods into the book form class.

We walk through making our form handle both create and update actions by passing in an existing book and making sure our properties get properly filled for editing. That way, when you hit edit, the values actually show up! Then, we ensure that submission validates the values using a single set of rules and hits the right update or create logic.

The real win is that everything for book creation and updating now lives in one place, so it's less code and way easier to maintain or change later. Plus, you see how convenient Livewire makes it to keep things DRY! By the end, we can edit and save books easily, and our code is much cleaner and more organized.

Episode discussion

No comments, yet. Be the first!