Flexible Flash Notifications with Inertia
This episode is for members only

Sign up to access "Flexible Flash Notifications with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
03. Basic notification flashing

Episodes

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

Transcript

00:00
OK, so we're going to put a simple button on this dashboard page,
00:03
which posts through to any route in our application. In our case, I'm going to go ahead and create out a route in here. And I'm not going to create a controller for this. But it's, of course, likely
00:13
that you're going to have a controller in your app that will deal with this. This will handle in exactly the same way. It doesn't matter whether we are working with a controller or just a route here. So we're going to go ahead and return back here.
00:24
And like we saw before, we're going to pass in a success message here. And we're just going to say that works nicely. Something like that. And this can be anything.
00:35
And what you can also do is use dynamic methods to do this. So if you prefer this syntax, you can do this. It will have exactly the same effect. I personally prefer just passing down the key in here.
00:46
I think it looks a little bit more obvious what is happening. But that's pretty much the route that we're going to be posting through to. So we're going to give this a name because we're going to pick this up within Inertia.
00:56
So I'm just going to call this something. And we're going to head straight over to the dashboard view page. And we're going to build out a form inside of here. So let's go ahead.
01:06
And I think we could probably get rid of that. Let's just create a button in here with a type of submit and say do something. And let's just head over, because sometimes this looks a bit weird here. So let's get rid of this form, bring back what we had before,
01:23
and we'll put this inside of here instead. A little bit of nesting, but that's OK. OK, so let's head over. There we go.
01:30
So we can click on this now and do something. The moment is just acting like a normal HTML form. So we want to post through to that route that we have just created. To do this, we need to be able to use forms within Inertia.
01:43
So at the top here, we're going to go ahead and pull in the use form composable from Inertia. So let's pull in use form and we can create our form down here. Now, we don't have any data here that we're sending through.
01:55
So we're just going to have an empty form in here. And that's pretty much it. We're just going to post this through. So for the form itself, we want to say V on and submit.
02:04
We want to prevent the default behavior of the form. That's effectively an event prevent default. And we're going to go ahead and say form. And we're going to post this through to slash something.
02:15
And to be honest, that's pretty much all we need to do. What you could also do in here, instead of going through to the actual route, you could use a route helper, which is powered by Ziggy. And you could define the name of the route in here,
02:27
much like you would find within a normal Laravel application. Now, the way this works, if we head over to Resources.js, App.js, we can see here that we're using this Ziggy view and Ziggy plugin. What that's going to do is it's going to take all of your routes
02:43
that you've defined within Laravel and the names of the routes and allow you to use them within your front end like this. Normally, that's quite a challenge, but that makes it really easy for us. So let's just take a look at this.
02:55
I'm going to pull up the network tab just here, and we're going to head over to the Fetch XHR filter. I'm going to click on that. And you can see, sure enough, we have a 302 redirect back from something.
03:05
And any new data that comes through to the dashboard is being populated just in here. And you can see we've got the user in here and all this information that's usually passed through into our app.
03:17
Now, where does that information come from? Where does that sort of global information come from? This is really key to how we're going to get this to work. We have a handle inertia requests
03:27
piece of middleware, which does a lot of things, but also allows you to share information with every single request within inertia. You can see that we've got the Ziggy inertia here,
03:38
which are the routes that we want to use within our front end. But we also have this user as well. And that's what you can see just in here. Now, normally what I would do or what I used to do
03:49
when I was setting up these notifications is do something like this notification and then do session. And we could say session get or we could just pass this in success, for example. So that's going to give us the message that we flash
04:03
when we come through past that post route. So once we get redirected back, that's going to contain that information so we can actually test this out and check it out. So if I hit do something, we come back over to dashboard,
04:14
which receives all of that new information and we look for notification in here. You can see. Doesn't help, I've named the app notification. You can see that we've got that data inside of there
04:25
so we can actually pick that up within inertia. So, for example, over on the dashboard, we could accept this in as a prop so we can go ahead and define the props are in here. We could say that the notification gets passed in and that is a string.
04:40
And then we could just dump this out on the page somewhere just to give you an example. So we'll dump that just above the form. So let's dump out notification and let's see what we get. So if I click do something, you can see that we get that work nicely
04:52
dumped out on the page. Now, the problem with this is that we don't really have a kind of global way to handle notifications. It means that we have to repeat ourselves or put this kind of functionality
05:03
into a component to check. Plus, we're going to be using a plugin to handle the notifications itself. So we want this to just pick these up from inertia as we get redirected back and use the functionality of the notification
05:18
plugin that we're going to be using. Also, if we head over to handle inertia request, this only accounts for a success notification. So we might also then have to pass through another payload in here
05:30
to show what kind of what type it is, all of that kind of stuff. We're going to make this as easy and as effortless as possible to get working. And we want this to kind of happen automatically when we're building new pages. We want this to happen without having to think about it.
05:45
So this is one option and it's an OK option, but we're going to go over and start to improve this. So let's head over to the next episode and look at how we can automatically pick up these notifications without having to pull them in using define props.
7 episodes• 28 mins

Overview

Flash notifications exist in almost every application. With Inertia, flashing notifications requires a bit more thought, and we're going to take this further and end up with a global notification plugin that just... works.

By the end of the course, you'll have the ability to flash any type of notification, anywhere in your application, without repeating any code.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!