All right welcome back.
So in this video we're continuing to use and implement the flash in the last video we installed it we
talked a little bit about how it works we use Kinect flash the package to help us here.
The idea again is that we can send a message through to the next route to the next request so that we
can then display it to the user.
And what we want to do now is rather than displaying it individually on every template which I only
did one time but rather than doing this on every single page that we wanted to you potentially have
an error message or success message.
We're going to move that type of code to the header which is a natural place for that.
So I'm going to open up the header to start.
So Parshall's E.J..
And what we can do is just at the bottom after the nav bar we can just add in H1 and we can add in something
like message.
We'll keep it the same name.
Now the issue is that message will work on our excuse me log in forum right here where we're passing
in message.
But on any other route message will be undefined which is going to be problematic.
As you can see here.
So if I refresh the page it works fine but if I try and go to sign up we have a problem.
Message is not defined.
That's because Sign-Up has the same header file and message hasn't been provided.
So to fix that when we get rid of this line right here we're going to cut it out actually and not pass
it to log in individually.
Then I'm going to go to the app.
Yes.
And just where we have the same code where we're doing current user where we passed current user to
every single template we can do the same thing.
Or we can say rez dot locals the message equals request flash dot error or request up flash error.
So if there's anything in the flash we'll have access to it in the template under message.
So I'll show you that now if I restart first time if I refresh.
I couldn't see anything.
I go to sign up it now works and there's nothing to be flashed but if I try and trigger that again so
I go to slash campgrounds trying out a new one I get my message.
Please log in first.
So let me show you that it's working on every page though so let's say when I sign out.
So if we go to the log out route which is in our I have it open but I'll just show you again routes
index j us where the log out happens is right here.
Request that log out and then right before we redirect we could do something like request.
Does it flash.
And for now I'm keeping it as error because that's what I have set up and we'll just say log you out
just like that.
Now if I restart.
Let me sign up here just as anyone just do law.
Perfect sign up.
Great.
Now if I click on law I get logged out and if I could from the page it goes away.
So we have this interface this way of sending one message to a user or a message that we want to last
.
Basically one request and that's it one requests last response and then if the user refreshes or go
somewhere else we don't want that to persist and we have that displaying on every page because we have
it in the header so we don't have to manually render a variable and pass a variable through.
All we have to do now.
Any time we want to show a user some sort of message before we redirect them we just add in requests
not flash now rather than just doing error every time I showed you in the first video that we would
have a green or red alert basically.
So a success and an error and that's built in with bootstrap.
So if you go to get bootstrap dotcom click on components and then on the right the nav bar you click
on alerts you can see that these are what alerts look like there are these little messages that have
different colors just like the buttons.
The colors are named the same so there's success in fair warning and danger.
And we'll be using danger.
So if there's an error like you must be logged in to do that or password is incorrect we'll have a red
alert.
And if something good happens like if someone signs up we want to say contrats or if someone logs out
we'll say success we logged out or we could do something like successfully created comment whatever
we want we'll use the green on here which is success.
So these are the divs div class and let's start with danger.
So is going to copy this actually and go to my header file and rather than displaying an H1 and display
a div and I'll add message inside if that div to just like that.
So that will just be a stylistic change.
So if I refresh the page again notice that it's there first of all.
And that's because we've just added it so it doesn't matter if there is no message if it's empty or
not.
So we'll fix that but also notice that goes all the way across the screen which is not ideal.
So let's let me add some text in to show you what I mean.
This isn't a great message to a user.
So what we'll do to fix it in the short term and this actually will be a long term fix as well.
But before we fix the issue of it always being there even if there is no message we're going to add
in just another container and put our alert in that container.
So on the top of every page if I refresh I now have a message it's empty but if I do something like
try and go to add new campground I get my message.
Please log in first.
And of course we still have to style this form so we'll get there.
But this at least is looking relatively finished.
So that's working just fine.
But we still don't have a way to differentiate between green and red or success and error and that will
be really easy for us to do.
So the idea is that when we get rid of this form is that when we flash we could do something like log
you out and we might want that to be success.
So I added in under success but then we might have something like in our middleware that we already
have where we want to flash ever where we want a red danger dialog or danger alert.
So we have these two ways and we could add anything we could do info we could call this blog.
This is not related to bootstrap unnecessarily.
This is just what we're adding it into the flash under the key.
But I'm going to keep it as error and success then what we'd need to do is instead of her app yes where
we're passing this data through break here we'll actually have two different variables.
So one for error and now call this redstart locals dot error and then we'll have another one for success
just like that.
So now we have two different pieces of data in our template.
Both of them will be empty most of the time.
Usually there's not something to display.
But then if there is an error instead of the error variable we'll be able to access that.
If we add anything to a flash under success why access it in this access variable inside the template
.
So now let's go to our template for a header and just duplicate this except rather than alert danger
will do alert success and rather than message that doesn't exist anymore will have error here and success
.
Those are the two variables redefined.
If I refresh right now we'll have a red and green stripe as you can see.
And if I try and let's go to slash campgrounds and get an error
you can see it only shows up in that red one.
And then if I do something like sign up with some jibberish
and then I go to log out you can see that it shows up in the green section.
So what we've done there is just differentiated between two different types of messages.
And we could add in as many as we want so there aren't any rules.
If we want to use bootstrap though we want to go with these different classes.
But as far as our own classification is concerned we can put whatever we want so we could have if we
go back here where we're doing the flash we could ever own thing that we put here rather than success
.
But I'm sticking with success and error.
Now let's tackle the issue of these two boxes the alerts always being there even if they're empty.
What we'll need to do is go into our header file and add an if statement with our Ejay Yes we'll have
if.
And let me just add in the brackets to start and we'll do one for error just like that.
Not in our IF statement there.
In our closing bracket and we'll just start with that one.
So what we're going to do is check if there is an error and it actually needs to look like this.
So if error and error length is greater than zero.
And the reason for that is just having error exist isn't enough for us to want to display error.
So for example right now error is empty.
There's no text in there there's no string but it's not undefined but it's still showing up here.
So what we want to do is check if error dot length is greater than zero.
Because even when error is empty when there is nothing in there it's still an empty array.
And if we just check if there if empty array that's not falsie.
Again I could show you that here.
We did something like this.
A lot of stuff there if
empty array.
That log anything.
If I hit enter I get that comes with that log.
And that's because an empty array is truthy.
So right here where we're checking if error exists at all it still could be an empty array which most
of the time it is.
So this is really just checking to make sure.
Like let's say that we didn't have this code at all in our SJS.
Where are you.
Here we go if we didn't have this at all then error and success would be undefined.
And that line of code would just prevent an error.
But this is actually the more important part to check if there's anything in the array.
So if there's anything in the array if it the length is greater than zero then display this and we're
going to do the exact same thing down here except rather than error.
Well check instead of success if we need our closing brace as well.
All right.
So let's try this up or fire this up again restart the server refresh the page.
We don't see anything.
Let's try and add a new campground.
I get my read message Please log in first.
Let's sign up now.
Now if I log out I get my green message log you out.
Great.
So all we have left really is to now go and add in the correct messages call the request up flash in
the appropriate places.