Okay, let's work on actually showing the notifications in our dialogue here. So like I said before, we're going to be making use of Laravel's notification system. So we'll start off with mail notifications, because that will help you understand database notifications more if you don't already understand it. So let's generate a new markdown mail notification. So let's grab this and paste that in. Let's say, let's call it CommentAdded. That's the notification we'll be adding in our system. And markdown, I believe I have an emails folder. And let's call it comment-added, okay.

And markdown, I believe I have an emails folder. And let's call it comment-added, okay. And let's go ahead and go into that. So let's go to the actual email comment added. And I'm just going to paste in the body here to save some time. So we have a title, comment was posted on your Idea. And we're going to pass through the comment here so we can grab all of the information we need. So this is the username. This is the name of the Idea.

So this is the username. This is the name of the Idea. And this is the actual Comment. And for the button, let's say, go to idea. And the URL will be, let's make use of the route helper here, route('idea.show'). And we can pass through the idea from the comment, comment->idea. Okay. Now let's go to the actual notification class. So CommentAdded. It's an App\Notifications.

So Comment added. It's an app notifications. And we have to pass through the Comment here. So let me just use this plugin I have here to set the constructor. And it should be a Comment, okay. And let's go ahead and correct the indentation here. Okay. And let's type into here with a Comment. Import that. And that is good.

Import that. And that is good. And then we have to pass it through. So this is the delivery channel. So right now we're using mail and we'll add database in a second. And here is the method that runs for mail. So let's add a subject here. So let's make a new line. Let's say subject. Say laracasts voting.

Let's say subject. Say laracasts voting. A Comment was posted on your Idea. And let's also make sure to pass the comment through so we can pass it through here. That is this comment, okay. And that should be it for our setup. Now we just have to actually notify the specific User. So let's go to our AddComment Livewire component. And we just have to notify the User in here. So let's add it right here.

And we just have to notify the User in here. So let's add it right here. So let's say this Idea. So remember, the Idea is being passed through here for the Comment, okay. And we can grab the User here. So this is the person who created the Idea. And this is the person we want to notify. So this Idea User, we can say notify. And we can use that class we just created. So new Comment added.

And we can use that class we just created. So new Comment added. And if I press tab, that should import it. And we need to pass in the comment we just created. So let's say new comment here. And let's use a variable here to grab it when we create it, okay. So did I do that right? I feel like there's too many braces here. Okay, so I have my mail client running here. So let's see if I did everything correctly.

But I'm okay with that. Let's go ahead and comment on this one. And let's see if a new email comes in. Checking notification, okay. And it looks like it does. Cool. So here's my email client. And you can see the email in here. So comment was posted on your Idea. This is the User.

So Comment was posted on your Idea. This is the User. This is the idea name right there, okay. And this is the comment, cool. And if I click this link, it should go to that idea. And it does. So now for database notifications, if we go to the documentation right here, think of it as every email gets a new entry in a database table. So as you can see here, we have to create this new table and migrate it. So let's go ahead and do that.

So as you can see here, we have to create this new table and migrate it. So let's go ahead and do that. php artisan migrate notifications table. Okay. And let's go ahead and php artisan migrate:fresh --seed. Okay. Let me just go back to the main page. And let's do the same thing. Actually, we have to update our via method in our CommentAdded class right here. Where is it via right here.

Actually, we have to update our via method in our CommentAdded class right here. Where is it via right here. So right now we're using the mail channel, but we also want the database channel. So let's add that database. Okay. So now I should not only get an email, but it should also add an entry in our database. So let's check the database to check if there's that notifications table. There it is. notifications. And it's empty right now.

Notifications. And it's empty right now. But if I add a new Comment on any of my Ideas, it should add an entry in that table. So let's try again. Trying database. Okay. There's the mail. But did it add one in here? And it did. Cool.

And it did. Cool. So there you can see the type. You can have different types of notifications. This is the User that's being notified. And this is the userId. Now we also want data associated with that notification. So to do that, if you take a look at the docs here, you'll see that we have to specify the data in this two array method. So let's take a look at that.

data in this toArray method. So let's take a look at that. toArray should be defined down here. There it is. And this is the information you need for the notification. So in our case, this is pretty much everything that we need in this one notification. So for example, the user's avatar, the user's name, the actual comment, the idea, title, and so on. So if you want, you can just store the commentId and grab all that information from the comment like this.

So if you want, you can just store the commentId and grab all that information from the comment like this. So this commentId. That's fine. But we'd have to make extra queries to grab all the other information. So in this case, I'm just going to store everything that we need. And I'm just going to paste that information in right now. So there it is. I have the commentId, the actual comment, the user's avatar. This is the user's name.

I have the commentId, the actual comment, the user's avatar. This is the user's name. This is the ideaId, the ideaSlug, because we need this to actually go to the idea and the ideaTitle. Okay. So now let me just delete this one for now. And if you try again, all that information should be stored in this field here, the data field. And it's stored as JSON, but we can access it as an array. So let's try that.

And it's stored as JSON, but we can access it as an array. So let's try that. Testing data. Let me just hard refresh to make sure. Testing data. Okay. There's our mail. But our database entry should have everything in here as JSON. And it does. Cool.

And it does. Cool. So let's add a few more. So when we test it, we have some data. So back here. Sorry. Back here, actually. Let's say secondComment and thirdComment. Okay. So now we should have three entries in our database.

Okay. So now we should have three entries in our database. And we can use this data to test this out over here. Okay. Now let's add a Livewire component for this dialogue that we created here. So app/Play.php. All of this. Let's move to a Livewire component. So let me just grab this. Sorry.

So let me just grab this. Sorry. Let's say Livewire. Let's call it commentNotifications. Okay. And let's go ahead and make that component. php artisan livewire make commentNotifications. Okay. Let's go ahead and paste that in. commentNotifications.

this right here. And we also have a way to grab the unread notifications. So that's just a flag on a field here called read_at. If it's null, it hasn't been read. If there's a timestamp, then it has been read. So actually, let me refresh this. There should be three here and there is. Cool. So let's go ahead and fetch the notifications here. And I'm going to show you two ways to do this.

So let's go ahead and fetch the notifications here. And I'm going to show you two ways to do this. So let's start with a simple way first. Go to comment notifications, and let's just grab it here before we return the view. Let's say notifications. Okay. Let's say offUser. And let's say unreadNotifications. So now we should have this notifications variable in our Blade portion in here, and we can just loop over them.

So now we should have this notifications variable in our Blade portion in here, and we can just loop over them. So we can get rid of these other aliases. So this is the first one, and we can get rid of the other ones I have here. One, two, three. Okay. And we need this last one to mark all as read. So we can loop over this one here. So let's just make sure there's still one here. Okay.

So let's just make sure there's still one here. Okay. And now let's loop over that one. So this is this one here. Let's do it for each. Okay. And we have a notifications variable as notification. And let me just put this and foreach at the end. So after this foreach, let's put it here. And there should be three now, even before I enter the data.

So after this ally, let's put it here. And there should be three now, even before I enter the data. And there is three. Cool. So now we can just replace these with the data that we have in our JSON data portion here in here. So let's start with the avatar here. Let's say notification, and we can say data, and we can access that JSON data like this. So userAvatar is what I named it. Okay.

So userAvatar is what I named it. Okay. And let's close that out. And let me just grab everything here so we can make use of it. For example, here, this is the userName. Okay. This is the ideaTitle. Okay. It's based out in ideaTitle. And this is the comment.

It's based out in idea title. And this is the comment. Grab this. Put the quotes back in. And let's say idea or sorry, comment body is what I named it. And for this timestamp, we can make use of Carbon here. So let's grab this. We can just say notification created_at and we can use diffForHumans. Okay. So that's all for now.

Okay. So that's all for now. Later on, we'll work on linking to the actual Idea page. Actually, I think we can do that now. So let me just add that route. Actually, no, it should be route. We're going to the idea.show page, and we're passing through the notification slug. So we pass that through as well. And I named it ideasSlug.

And I named it ideasSlug. Okay. So let's try this out. Hopefully I did it correctly. Let's open this up. There we go. We have three. So I commented on all of them. So the avatar doesn't change and the userName doesn't change. So let me just comment on another Idea here just to see it working.

So the avatar doesn't change and the user name doesn't change. So let me just comment on another Idea here just to see it working. So let's say this one down here, it's still going to be me, but the idea title should change newTitleNotification. Okay, cool. Refresh. There it is. Cool. And the default sorting order is by latest first, which is what I want. Let's check out the link actually works.

So if I were to load this page. So actually, let's open up DevTools here or debugbar, I mean, and you can see the models being loaded. We have 31 here. So if I didn't load this, it should be 31 minus these four that we loaded in. So 26, if my math is correct, 27. I mean, it's not correct. It should be 27. 31 minus four is 27.

31 minus four is 27. Okay. So if I were to just remove this or comment it out, it should be 27. Okay. So let me put that back and let's make it so that the notifications are only loaded when the user clicks on this icon over here. So we have to make use of Livewire events like we've been doing. So let's do that back in here. And let's open that up. Comment notifications.

And let's open that up. Comment notifications. And for the button here, let's emit an event here as well. So let's put this on a new line and it's only emit the event if it's open. So if $isOpen, then go ahead and emit a new event. So we can say Livewire.emit. And let's call it getNotifications. Okay. So now in our component Comment notifications, we can listen for that event. So let's say protected $listeners = ['getNotifications'];

So now in our component Comment notifications, we can listen for that event. So let's say protected listeners equals and I named it getNotifications. So let's go ahead and make a method, getNotifications. Okay. And let's make a new piece of state here called notifications. So this notifications equals this. So we no longer need to pass it through here, but we are grabbing it from a public property. Let's do that. Let's make a new public property, public notifications. Sorry, that should be a semicolon.

Let's make a new public property, public $notifications. Sorry, that should be a semicolon. And I think I have to instantiate it to a Collection or an empty Collection. Let's see if it works. Yeah. Okay. So let's make a mount method here, say mount, and let's set it to an empty Collection. So this $notifications equals collect([]). Does that fix it? Okay, cool.

Does that fix it? Okay, cool. So now if you look down here, you'll see that we have 27 again, and these are not loaded until we click this icon. So we click it and you see the new notification show up here. And I also believe that Livewire is smart enough to cache those results. So it doesn't make new requests every time you toggle this on or off. Cool. So let me just try this one more time. And I'm going to log in as another User so we can see the notifications working.

Cool. So I think this is a good place to break in the next video, we'll work on the badge and other nice features. So let's go ahead and make a commit. This is episode 60, git add, git commit, episode 60, view notifications.