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
07. Refactoring for ultimate flexibility

Episodes

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

Transcript

00:00
OK, let's flip this back to how we had this before. So I'm going to choose the key here for the flash to success and say that worked nicely. And we're going to head over to handle inertia request that middleware.
00:14
And we're going to update this so we can build up the same structure that we're expecting over in our plug in here. But doing that, taking the key of the flash message that we have chosen into account.
00:28
So to do this, we're going to do a little bit of debugging, a little bit of dying and dumping here. So let's just go up here and just play around up here, first of all. So the first thing that we want to do is think about what we only want to grab
00:42
a specific set of types of messages from our session. Now, to get everything from our session, we can use our request or you can use the session helper and we're going to say all. So that will give us everything that's in our current session.
00:57
And you can see here that we've got a bunch of things in here. Now, that's dying and dumping at the moment, which isn't helpful because we can't actually submit this form, but we will get that in a second. So what we want to do here is limit this.
01:09
So we only want a specific subset of these things. We don't really want to be passing in this token previous flash anywhere. So with this, we're going to use the array helper and we're going to say array only. Let's just make sure we pull that array helper in from illuminate support
01:26
and the second argument to this is just what you want. So in this case, I really throughout my entire app only ever want success, error and warning to be taken into account. Now, that's not going to give us anything at the moment
01:40
because we're not flashing anything, but we can be clear about this. If we just comment this out, refresh this and then uncomment it. What we should then be able to do is do that and see what we get. Now, at the moment, this isn't working, but that's fine.
01:53
We can, in fact, let's just pass this whole thing down and just dump it out. I think that makes sense. So over in notifications, let's get rid of this and just console log out on notification. I think that will do for now.
02:09
So let's just click on this. And there we go. So we now have an object with success and that works nicely. But we don't want to handle in our plugin every single different type that we could get.
02:23
What we want to do is transform this that we see here. So that works in terms of showing us the success key and value. We want to transform this object here into something that has a type and a body so we can use it like this and like this.
02:38
So to do that over in here, we are going to go ahead and collect this up. Now, there's a load of probably different ways to do this, but this is just how I handled it. We're going to collect this into a Laravel collection so we can map through it with the keys available.
02:54
What we can then do is create out a closure in here and into this closure, we're going to go ahead and get the notification itself. So that's the flash notification itself, plus the key. So the success warning error, whatever it is.
03:08
And then we can return a new structure to this. So in this case, we can grab the type, which is the key, and we can output the body, which is the notification. So that should just be a plain string in this case.
03:20
So it's going to go through that, map through it with the keys, and it's going to return the new structure to us. Simple as that. Let's go over and click do something. And there we go.
03:29
We've got type, success and body that worked nicely. Now, this isn't going to work if you have, let's go to web, a different type. So let's just say ABC. If we just click do something, we get nothing back.
03:42
So nothing is available there. So it's not just going to pick up any old data in our session. It's only remember picking up success, error and warnings. And feel free to refactor this if you know a better way.
03:55
So we've now got a type. We've got a body. So really, all we need to do is go back to our plug in here and restore the toast notification that we had before. So now I can click on this and we get that work nicely.
04:09
But I now have the flexibility to change this around to error. So that failed nicely. And if we head over, there we go. And we now have introduced that warning.
04:21
And we'll say that warned nicely. And there we go. And of course, you could put in info if you wanted to really any types that the plug in that you're using support.
04:32
That's the key here. They have to be the types have to match up with what your plug in supports, although you could transform them if you wanted to. But really, it doesn't really matter too much if you're using a plugin
04:45
like this error success info warning are pretty much always included in that. So there we go. That is how we create really flexible notifications that don't really take much effort to actually flash in the first place
04:59
because we've gone ahead and taken them and transformed them into something that we can use within our plugin like this. And of course, if you want to add to this, if you want the body itself to have even more data, you could just take the body within your flash message here.
05:17
If that included maybe a body itself, plus maybe a link that the user could click and that you could output. It really doesn't matter. You can just go ahead and add on to this to make it as flexible as you need for your app.
05:33
But I'm pretty happy with this. I think just having something like this, the way you can just flash things like you normally would in Laravel and it automatically come through and whatever page you're working with in your app like that works really nicely.
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!

Comments

No comments, yet. Be the first to leave a comment.