Even though the course is officially over, there are a few more view-use functions that I found extremely useful and just couldn't help but share some videos on them. So that's what this chapter is about. It's a little bit of bonus content to give you just a little bit more view-use awesomeness. Okay, so we're gonna start out looking at the Use Confirm dialog composable from view-use.
In this project, I have already installed view-use, of course. as well as Tailwind CSS and Daisy CSS, or actually it's called Daisy UI, for styling. So what do we have going on? Well, right now it's basically some markup to display this box over here, this modal overlay on the right-hand side.
This is a common scenario when you need to delete something in the application. You have a modal overlay dialog like this that pops up and gives you an option to cancel the action or confirm the action, okay? Well, with useConfirmDialog, viewUse makes this extremely easy to do. Let me show you how it works.
So I already have useConfirmDialog being called over here on the left-hand side. And from it, you can see all of these different things that we get out. We get an isRevealed variable, which tells us whether or not the dialogue should be revealed or not. It gives us a reveal function to trigger the revealing of the dialog, a confirm to call whenever the confirm button is pressed, the cancel function to call whenever cancel is pressed, onReveal to provide a callback whenever the dialog is revealed.
We won't actually be using that, but it's helpful to know that it's there, as well as an onConfirm and onCancel function so that we can provide callbacks whenever each of those events occur. Okay, so let's hook it up to the template below. Right here is my button to open up the dialog. You can pretend it's the delete button like on the row of a list of items within your system, right?
So all we have to do now is do at click and provide it the function of reveal. Great. That means that is revealed is going to be true whenever delete is clicked. The next thing I want to do is conditionally show my modal overlay whenever isRevealed is true.
Now we could use a VIF on here, but this modal open class is already provided by Tailwind CSS. So let's just add that conditionally. Awesome. Let's try it and see if it works.
I'll hit delete. And sure enough, the confirm delete dialog pops up. Now cancel and confirm still aren't working though. So let's add the proper event handlers to those.
I'll add atClick here and call the cancel function from the view's composable. Then let's do the same thing for confirm. Awesome. This time over on the right-hand side, when I hit cancel, sure enough, the overlay goes away.
If I open it up again and hit confirm, the overlay also goes away. So notice no matter whether we click cancel or confirm, is revealed becomes false, which makes sense because both of them should trigger the closing of our modal overlay. Now though, we'd like to do something special whenever cancel is clicked and something else whenever confirm is clicked. That's where onConfirm and onCancel come in.
Let's call onCancel and then we'll provide a callback function to run whenever the dialog is canceled. We can do something simple like an alert. Awesome. Now, we can do the same thing for onConfirm.
In a real-life system, you'd certainly be doing something else onConfirm, like making the request to your backend to actually make the deletion. And in a real-life system, you might not need onCancel at all, because canceling the dialog might do nothing more than hide the modal overlay, which is already done for you. But this is just here to be handy just in case you need it. Finally, moment of truth, let's see if things are working.
Press delete to open the modal overlay, hit confirm, and sure enough we get the confirmed alert. Okay, try it one more time, delete, and then cancel, and cancel is now alerted. While you could probably pretty easily provide such functionality yourself, you don't have to with this handy and succinct composable. Even though the course is officially over, there are a few more view-use functions that I found extremely useful and just couldn't help but share some videos on them.
So that's what this chapter is about. It's a little bit of bonus content to give you just a little bit more view-use awesomeness. Okay, so we're gonna start out looking at the Use Confirm dialog composable from view-use. In this project, I have already installed view-use, of course.
as well as Tailwind CSS and Daisy CSS, or actually it's called Daisy UI, for styling. So what do we have going on? Well, right now it's basically some markup to display this box over here, this modal overlay on the right-hand side. This is a common scenario when you need to delete something in the application.
You have a modal overlay dialog like this that pops up and gives you an option to cancel the action or confirm the action, okay? Well, with useConfirmDialog, viewUse makes this extremely easy to do. Let me show you how it works. So I already have useConfirmDialog being called over here on the left-hand side.
And from it, you can see all of these different things that we get out. We get an isRevealed variable, which tells us whether or not the dialogue should be revealed or not. It gives us a reveal function to trigger the revealing of the dialog, a confirm to call whenever the confirm button is pressed, the cancel function to call whenever cancel is pressed, onReveal to provide a callback whenever the dialog is revealed. We won't actually be using that, but it's helpful to know that it's there, as well as an onConfirm and onCancel function so that we can provide callbacks whenever each of those events occur.
Okay, so let's hook it up to the template below. Right here is my button to open up the dialog. You can pretend it's the delete button like on the row of a list of items within your system, right? So all we have to do now is do at click and provide it the function of reveal.
Great. That means that is revealed is going to be true whenever delete is clicked. The next thing I want to do is conditionally show my modal overlay whenever isRevealed is true. Now we could use a VIF on here, but this modal open class is already provided by Tailwind CSS.
So let's just add that conditionally. Awesome. Let's try it and see if it works. I'll hit delete.
And sure enough, the confirm delete dialog pops up. Now cancel and confirm still aren't working though. So let's add the proper event handlers to those. I'll add atClick here and call the cancel function from the view's composable.
Then let's do the same thing for confirm. Awesome. This time over on the right-hand side, when I hit cancel, sure enough, the overlay goes away. If I open it up again and hit confirm, the overlay also goes away.
So notice no matter whether we click cancel or confirm, is revealed becomes false, which makes sense because both of them should trigger the closing of our modal overlay. Now though, we'd like to do something special whenever cancel is clicked and something else whenever confirm is clicked. That's where onConfirm and onCancel come in. Let's call onCancel and then we'll provide a callback function to run whenever the dialog is canceled.
We can do something simple like an alert. Awesome. Now, we can do the same thing for onConfirm. In a real-life system, you'd certainly be doing something else onConfirm, like making the request to your backend to actually make the deletion.
And in a real-life system, you might not need onCancel at all, because canceling the dialog might do nothing more than hide the modal overlay, which is already done for you. But this is just here to be handy just in case you need it. Finally, moment of truth, let's see if things are working. Press delete to open the modal overlay, hit confirm, and sure enough we get the confirmed alert.
Okay, try it one more time, delete, and then cancel, and cancel is now alerted. While you could probably pretty easily provide such functionality yourself, you don't have to with this handy and succinct composable.