Now coming back to our application, let's make this interactive using live Via. So if I click on a bookmark icon, I shouldn't be redirected to another page. Instead this page should dynamically update. And also when I remove a bookmark, we also need to make this search feature work. So we can either make these individual roll cards as live I components or this entire page. Now if we make this entire page a live via component,

as live I components or this entire page. Now if we make this entire page a live via component, it'll be easier for search and bookmark feature both. So let's do that. Let's create a new live wire component. Live wire is already installed so we don't have to do that. We can simply use the command PHP Artisan Make live wire and let's call it roll list 'cause that's what it is. All right, we have a class and the view. So let's go to our dashboard, view

All right, we have a class and the view. So let's go to our dashboard, view dashboard blade phv and copy everything from here. That is right from the input and the toast as well. Again, we'll do something about toast, but for now, copy it all and put it inside Roll list Blade P hb. Okay, so in place of this in dashboard, let's use the live via component, live via rules list.

let's use the live via component, live via rules list. That's how you include the component. And right here in the class, now that we are making this interactive, we don't have to get all the rules in the beginning in the controller and then pass it to the view can directly open this view and then fetch the rules. So let's go to the routes file and change this to what it was before.

So let's go to the routes file and change this to what it was before. So instead of using get route, we'll say route view. So we'll simply load the dashboard view itself and then use live via to fetch the rules. So we don't need the rule controller anymore and whatever we used to do in the controller can now be done here. So how do we do that? We use this method called Public Function.

So how do we do that? We use this method called Public Function. Mount Mount is like a constructive, so all the data that you need to pass to the view, you can initialize them here. So first we have this public rules equals a blank array. And right here, this is where we populate the rules. So we can say roles equals roll all to get them all in the dashboard.

So we can say roles equals roll all to get them all in the dashboard. And let's once again import the class. And this should be this rules and we don't have to pass anything to the view here. This public property is directly accessible. So as soon as the live work component is loaded, this mount me mount method is called and all the rules are fetched. So without doing anything,

and all the rules are fetched. So without doing anything, just including the live work component should work. Let's check in the browser right now, refresh the page and yes, everything is exactly as it is. Now we need to do the same thing for bookmarks as well. So go back to the routes file and once again, instead of get route, we use view and Write. Here we simply redirect.

we use view and Write. Here we simply redirect. We show the bookmarks view and I don't think we need to have a name for this. We can simply make it bookmarks. We won't need any of these, but we'll get to that. So open the bookmarks blade view and once again we have to replace, we can replace all of this now with that same live via component using live Via roles list.

of this now with that same live via component using live Via roles list. Okay, but there's one thing, how do we know if we have to get all the roles or only the bookmarked ones? Now within this component right here, we can pass some data into the component using attributes. So here we either want all data or only the bookmark data. Here we can say we can have this attribute called type. We can call it anything and just specify something like all. Now here, if you are simply hard coding it this way,

We can call it anything and just specify something like all. Now here, if you are simply hard coding it this way, this attribute works perfectly fine. If you are passing some PHP data, some variables here, then you'll have to prefix it with colon just like we did with blade components, right? For now, since we are just hard coding it, it's just a string. We can say type equals all here. And in the bookmarks blade view, let's say type equals

We can say type equals all here. And in the bookmarks blade view, let's say type equals bookmarked, okay? And come back to the component here. This is again going to be a public property. We could say public string type equals all. Let's take that as default. And once that is passed from the component, we can check if type equals bookmarked. We can get only the bookmarked ones using auth user,

type equals bookmarked. We can get only the bookmarked ones using auth user, get the authenticated user, get the rules, get the bookmarked rules. That's what is it's called and return. So if the type is not bookmarked, of course this type, if the type is not bookmarked, then we return all the rules. Once again, let's look at the browser and see if this works. All right, we changed the name of this route,

Once again, let's look at the browser and see if this works. All right, we changed the name of this route, maybe it was not a good idea. Go back and let's retain this refresh. We are in the dashboard route. It's showing us all the roles and in the bookmarked we are not able to get the bookmarked routes. That's interesting. Of course we didn't assign it to this roles.

That's interesting. Of course we didn't assign it to this roles. Okay, now it should work. We have the dashboard, all the roles, and in the bookmarks we have only the bookmark routes. So using live Via, we can simply delete the controllers and those routes. We don't need that anymore, but we'll do the cleanup later. Coming back to dashboard, we need to be able to add the bookmark without using the post route.

Coming back to dashboard, we need to be able to add the bookmark without using the post route. So let's go back to the view. I'll close all the files, I'll open them when needed. I'll open the roll blade PB roll, the single roll view, the blade component that we have. And here we are still using Alpine as of now. So we get the bookmarked uh data, we check if it's already been bookmarked and then we show through or false and we are using the form.

we check if it's already been bookmarked and then we show through or false and we are using the form. And here again, we are using Alpine to check. So what I'm going to do is I'll first remove this form. We don't need this anymore. We don't even need any of this. We simply need the button. And I'm going to delete this for now. We don't need the comments. And this time instead of Alpine, let's do it in live bio. So I'm gonna remove all the Alpine stuff here,

And this time instead of Alpine, let's do it in live bio. So I'm gonna remove all the Alpine stuff here, even this class because we are going to use laterals conditional styling. So I'm gonna use the at class blade directive. And within this array you can specify all the classes without any condition and then specify the classes with some condition. So let's say we want text Amber 500. If it's bookmarked, we'll anyway, come to that and then else

So let's say we want text Amber 500. If it's bookmarked, we'll anyway, come to that and then else or whatever, show text Zinc 200 If some other condition. Okay, so I can remove all of this now and instead of checking it here in Alpine and then using the class, we can check here directly. So we can say rule is bookmarked by and pass the authenticated user or user.

by and pass the authenticated user or user. And then if it's not bookmarked, Then we show text Zinc 200. Let's first see if this much is working, go to the browser refresh. And yes, we are able to see the bookmark rules and otherwise it doesn't. And the hubber is also working. Now coming to the click action, we've seen

And the hubber is also working. Now coming to the click action, we've seen that we can use something called via click and call the method in the live via component. So here we can say via click, toggle, bookmark, but even before we are able to do something like that, there's one thing you need to remember. This is happening because of Alpine. And Alpine is already included inside a live Via component, which means we don't have to externally include Alpine,

And Alpine is already included inside a live Via component, which means we don't have to externally include Alpine, but if you remember in our app Blade PHP, the layout file, we had this script tag where we were externally including Alpine. So we can remove this now, in fact, we have to remove this because uh, if there are two instances of Alpine, things will not work. So I can close this. So whenever you are inside a live wire component,

So I can close this. So whenever you are inside a live wire component, Alpine will work by default. Now that we are calling toggle bookmark, let's go into the component and create a new method called toggle bookmark. And let's toggle the bookmark here. But we need to know which role it is that we are trying to bookmark or remove the bookmark.

But we need to know which role it is that we are trying to bookmark or remove the bookmark. So we need to pass the role ID here and we can do that simply like pass passing any other parameter saying role id. But in case this is not an integer, if it's a string, this will create a problem. So it's better to always include it within single codes like so. And now we can access this as dollar roll id.

codes like so. And now we can access this as dollar roll id. And inside here, let's first just DD and check if we are getting the roll. Id go to the browser refresh and click on a bookmark icon. Yeah, we are able to see the correct id. Great, go back. So here we get the authenticated user and get the bookmarked rules. And instead of checking if the bookmark exists,

and get the bookmarked rules. And instead of checking if the bookmark exists, then detach it or it's the bookmark doesn't exist, attach it. There's also a toggle method that you can directly chain right here saying, sorry, bookmark rolls. Yeah, that's right. Toggle roll. ID instead of attach or detach. Okay, go to the browser, refresh and click on it.

ID instead of attach or detach. Okay, go to the browser, refresh and click on it. It's working. Click on it again, it's gone. Click on this, it's gone. Click on this, it's gone. The page is not refreshing. We are exactly where we are. Click on anything and only this part of the page dynamically changes. Let's go into the bookmarks page and now let's try and remove it. Yes, the bookmark is rem, the bookmark is removed,

and now let's try and remove it. Yes, the bookmark is rem, the bookmark is removed, but the rule still exists here because the public property rules doesn't automatically get updated. We need to update it. So let's go back and once the toggle has happened, let's fetch the rules once again. So we will say this rules equals earth.

let's fetch the rules once again. So we will say this rules equals earth. User bookmarked rules again. But we need to once again check that if we are in the bookmarks tab or not. So we'll say if this type is bookmarks bookmarked only then update the rules. Otherwise you don't have to. That is if you're in the dashboard route, you don't have to make this check.

That is if you're in the dashboard route, you don't have to make this check. Anyway, let's go back. Let's refresh the page. We are in the bookmarks tab. Let's go to the dashboard, add a couple more, come to the bookmarks tab and let me remove this. And it's gone. We are in the same page. That page jump that you saw was not a redirection, it was just removal of this. So if I remove this and it's gone,

it was just removal of this. So if I remove this and it's gone, I know we don't have the stores yet, but we will do that. Look at how much we've been able to achieve with live wire. Now you can go back and remove all these controllers and routes. So we don't need the destroy route, we don't need the store route. And we can change this to bookmarks itself. Go to the nav bar

And we can change this to bookmarks itself. Go to the nav bar that was in the app blade PHP and wherever. Yeah, this was remove it, make it bookmarks. We can happily delete the controllers in app HTTP controllers. We can delete both the rule controller And the bookmark controller. Look at how much code is removed. Once again, let's verify if everything is still working, go

Look at how much code is removed. Once again, let's verify if everything is still working, go to the dashboard, bookmark them. Yes, it's fantastic. So in the next episode we implement the search functionality and after that we make this toast. Appear back.