We have almost come to the completion of the app. Only one feature is pending that is displaying of the success toast when a user bookmarks or removes the bookmark. So let's get to the code here. We earlier had this toast and since everything was alpine, it was very easy to make it work. First of all, um, let's extract this toast into another blade component

First of all, um, let's extract this toast into another blade component because we might wanna show this reuse, this toast for multiple other purposes, right? So I'll cut this, open the file explorer, go to resources, views, components, create a new file and call it toast blade PHP and paste that here and here. Let's simply include that toast component, or we can even include it in our app layout itself

Let's simply include that toast component, or we can even include it in our app layout itself so others can, uh, make use of it. So right here we can say X toast. Now let me close this. All right, coming back here. Now you must have noticed that much of the alpine functionality has been replaced by live vio, but something like showing a toast or hiding it is best done in alpine itself. So let's retain this

or hiding it is best done in alpine itself. So let's retain this and turn this into an alpine component by adding x data equals show toast and set this to false to begin with. And once this is true, it'll be shown. Let me just change this to true and check if this still works. Go to the browser. Yeah, we do see something here, but there is no message because a message is blank.

Go to the browser. Yeah, we do see something here, but there is no message because a message is blank. Let's add a message and for now, let's simply hardcode it to say add it to bookmarks. We'll change that later. Great. So the toast message is shown. Let's change it to false. And we want to change this to true once the user bookmarks or removes the bookmark. That means if you go into the live via component right here,

or removes the bookmark. That means if you go into the live via component right here, right after this much is done, we want to show this toast. This is live via, and this is alpine. So how do we communicate? How do we change the alpine state after something is done in live wire For this we can use events. We can dispatch an event right here using this dispatch. Give it any name, say show toast.

We can dispatch an event right here using this dispatch. Give it any name, say show toast. Or we can say bookmarked or bookmark changed. It could be different things. So let's simply say show toast to keep it simple. And in the alpine component, we can listen for events using X on. So we say X on, followed by the name of the event. So X on show toast. And if this is coming from any live wear component loaded

So X on show toast. And if this is coming from any live wear component loaded anywhere, we'll have to use the dot window option so we can listen to events from any live wear component and do whatever you want. Here we can set show toast to true red. Let's check if this works. Go back to browser refresh, click on the bookmark icon

Go back to browser refresh, click on the bookmark icon and create, we see added to bookmarks. Of course, even if we click on it again, it still says added to bookmarks and it doesn't disappear. So let's fix those two things. Go back. We also need to change this message, so I'll remove it. And right here we need to send the message accordingly. Um, instead of using toggle, I think it's better we check and attach the attach accordingly and also send the message.

Um, instead of using toggle, I think it's better we check and attach the attach accordingly and also send the message. So if right here, let's first get the rule using rule find, we get a single role model using find method, passing the role id, the primary key, and then check if rule. Sorry, if rule is bookmarked by the authenticated user, then instead of toggling, we detach it

bookmarked by the authenticated user, then instead of toggling, we detach it because it's, it's bookmarked. We say detach roll id. And then dispatch this toast along with an appropriate message right here saying, message is added. Sorry, removed from bookmarks because that's what we did. Bookmarks as we do the reverse or user bookmark roles attach.

Bookmarks as we do the reverse or user bookmark roles attach. And here we say added to bookmarks. All right. Uh, but this, it's not just enough to send the message with the event here. We also need to get this message right here. So once we receive the event, we set show toast to true. We also set the message to event detail message.

We also set the message to event detail message. That's how it's done in JavaScript. So let's go back to the browser, see if this is working. Refresh. Click on this. And yes, we have the added to bookmarks message. Remove it. We have removed from bookmarks. Add it, remove it, remove it, remove, add. And you can see, but it's not disappearing yet. And that's just one simple line.

And you can see, but it's not disappearing yet. And that's just one simple line. We need to set a timeout the moment we set show toast to true. We also need to say a set timeout function. Show dose equals false. Add the time here. 3000 milliseconds. This should work. Go back, refresh, click on it, add it to bookmarks. Let's wait and it's disappeared.

Go back, refresh, click on it, add it to bookmarks. Let's wait and it's disappeared. Click on it again, remove from bookmarks and it's disappeared. This doesn't work just on dashboard. It should also work on the bookmarks page. Remove it, remove from bookmarks and it disappears as well. There's one last UX issue that we need to deal with. If you go to the dashboard route and refresh a couple of times quickly, you can see

If you go to the dashboard route and refresh a couple of times quickly, you can see that these details appear and then they disappear. That's because even before Alpine is loaded and it tries to hide it, it's appearing. This is something we need to fix. So go back to the code and open roll plate PHP. That's where we have this scroll down to where we see the details.

That's where we have this scroll down to where we see the details. Uh, this is the component, but these are the details that, uh, hide or show based on show detail. So wherever you have these components like these, which could be hidden on page load, you will have to add this x cloak alpine directive and then go to your style sheet. This is something you need to add only once this particular

and then go to your style sheet. This is something you need to add only once this particular style, scroll down to the bottom and this is what needs to be added. X cloak display. None important. There's something you can copy from alban js dev. Once you do this, um, go to the browser refresh and I am clicking refresh multiple times, but it doesn't show up. Isn't this amazing?

but it doesn't show up. Isn't this amazing? Let's reflect on all the things that we've learned in the final episode.