1
00:00:00,570 --> 00:00:01,750
All right welcome back.

2
00:00:01,980 --> 00:00:07,710
So in this video we're continuing to use and implement the flash in the last video we installed it we

3
00:00:07,710 --> 00:00:12,020
talked a little bit about how it works we use Kinect flash the package to help us here.

4
00:00:12,180 --> 00:00:18,120
The idea again is that we can send a message through to the next route to the next request so that we

5
00:00:18,120 --> 00:00:20,000
can then display it to the user.

6
00:00:20,430 --> 00:00:25,590
And what we want to do now is rather than displaying it individually on every template which I only

7
00:00:25,590 --> 00:00:31,410
did one time but rather than doing this on every single page that we wanted to you potentially have

8
00:00:31,410 --> 00:00:34,020
an error message or success message.

9
00:00:34,020 --> 00:00:38,150
We're going to move that type of code to the header which is a natural place for that.

10
00:00:38,190 --> 00:00:40,710
So I'm going to open up the header to start.

11
00:00:40,710 --> 00:00:43,450
So Parshall's E.J..

12
00:00:44,220 --> 00:00:53,640
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

13
00:00:53,940 --> 00:00:55,320
like message.

14
00:00:55,490 --> 00:00:57,640
We'll keep it the same name.

15
00:00:57,660 --> 00:01:06,510
Now the issue is that message will work on our excuse me log in forum right here where we're passing

16
00:01:06,510 --> 00:01:07,200
in message.

17
00:01:07,260 --> 00:01:11,740
But on any other route message will be undefined which is going to be problematic.

18
00:01:11,900 --> 00:01:13,040
As you can see here.

19
00:01:13,260 --> 00:01:18,170
So if I refresh the page it works fine but if I try and go to sign up we have a problem.

20
00:01:18,210 --> 00:01:19,550
Message is not defined.

21
00:01:19,720 --> 00:01:25,290
That's because Sign-Up has the same header file and message hasn't been provided.

22
00:01:25,290 --> 00:01:31,530
So to fix that when we get rid of this line right here we're going to cut it out actually and not pass

23
00:01:31,530 --> 00:01:33,790
it to log in individually.

24
00:01:33,930 --> 00:01:35,130
Then I'm going to go to the app.

25
00:01:35,160 --> 00:01:36,230
Yes.

26
00:01:37,110 --> 00:01:42,210
And just where we have the same code where we're doing current user where we passed current user to

27
00:01:42,300 --> 00:01:45,660
every single template we can do the same thing.

28
00:01:45,900 --> 00:01:56,160
Or we can say rez dot locals the message equals request flash dot error or request up flash error.

29
00:01:56,520 --> 00:02:01,930
So if there's anything in the flash we'll have access to it in the template under message.

30
00:02:02,190 --> 00:02:07,440
So I'll show you that now if I restart first time if I refresh.

31
00:02:07,440 --> 00:02:08,460
I couldn't see anything.

32
00:02:08,490 --> 00:02:14,960
I go to sign up it now works and there's nothing to be flashed but if I try and trigger that again so

33
00:02:14,970 --> 00:02:19,120
I go to slash campgrounds trying out a new one I get my message.

34
00:02:19,140 --> 00:02:20,910
Please log in first.

35
00:02:21,420 --> 00:02:26,370
So let me show you that it's working on every page though so let's say when I sign out.

36
00:02:26,370 --> 00:02:31,850
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

37
00:02:31,930 --> 00:02:36,510
index j us where the log out happens is right here.

38
00:02:36,510 --> 00:02:41,380
Request that log out and then right before we redirect we could do something like request.

39
00:02:41,380 --> 00:02:43,050
Does it flash.

40
00:02:43,320 --> 00:02:49,200
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

41
00:02:49,440 --> 00:02:51,820
just like that.

42
00:02:51,840 --> 00:02:54,360
Now if I restart.

43
00:02:55,800 --> 00:03:00,430
Let me sign up here just as anyone just do law.

44
00:03:01,470 --> 00:03:04,190
Perfect sign up.

45
00:03:04,200 --> 00:03:05,010
Great.

46
00:03:05,010 --> 00:03:11,830
Now if I click on law I get logged out and if I could from the page it goes away.

47
00:03:12,150 --> 00:03:18,780
So we have this interface this way of sending one message to a user or a message that we want to last

48
00:03:18,780 --> 00:03:18,830
.

49
00:03:18,840 --> 00:03:24,190
Basically one request and that's it one requests last response and then if the user refreshes or go

50
00:03:24,190 --> 00:03:30,090
somewhere else we don't want that to persist and we have that displaying on every page because we have

51
00:03:30,090 --> 00:03:35,640
it in the header so we don't have to manually render a variable and pass a variable through.

52
00:03:35,640 --> 00:03:36,620
All we have to do now.

53
00:03:36,630 --> 00:03:42,750
Any time we want to show a user some sort of message before we redirect them we just add in requests

54
00:03:42,760 --> 00:03:49,680
not flash now rather than just doing error every time I showed you in the first video that we would

55
00:03:49,680 --> 00:03:53,250
have a green or red alert basically.

56
00:03:53,310 --> 00:03:57,780
So a success and an error and that's built in with bootstrap.

57
00:03:57,780 --> 00:04:06,000
So if you go to get bootstrap dotcom click on components and then on the right the nav bar you click

58
00:04:06,000 --> 00:04:13,200
on alerts you can see that these are what alerts look like there are these little messages that have

59
00:04:13,380 --> 00:04:15,270
different colors just like the buttons.

60
00:04:15,340 --> 00:04:19,210
The colors are named the same so there's success in fair warning and danger.

61
00:04:19,560 --> 00:04:20,990
And we'll be using danger.

62
00:04:21,000 --> 00:04:27,630
So if there's an error like you must be logged in to do that or password is incorrect we'll have a red

63
00:04:27,630 --> 00:04:28,330
alert.

64
00:04:28,740 --> 00:04:34,830
And if something good happens like if someone signs up we want to say contrats or if someone logs out

65
00:04:35,120 --> 00:04:40,500
we'll say success we logged out or we could do something like successfully created comment whatever

66
00:04:40,500 --> 00:04:44,300
we want we'll use the green on here which is success.

67
00:04:44,310 --> 00:04:47,900
So these are the divs div class and let's start with danger.

68
00:04:47,910 --> 00:04:57,000
So is going to copy this actually and go to my header file and rather than displaying an H1 and display

69
00:04:57,000 --> 00:05:04,970
a div and I'll add message inside if that div to just like that.

70
00:05:05,280 --> 00:05:07,500
So that will just be a stylistic change.

71
00:05:07,530 --> 00:05:13,120
So if I refresh the page again notice that it's there first of all.

72
00:05:13,380 --> 00:05:19,470
And that's because we've just added it so it doesn't matter if there is no message if it's empty or

73
00:05:19,470 --> 00:05:19,800
not.

74
00:05:19,860 --> 00:05:26,610
So we'll fix that but also notice that goes all the way across the screen which is not ideal.

75
00:05:26,610 --> 00:05:29,270
So let's let me add some text in to show you what I mean.

76
00:05:32,100 --> 00:05:34,470
This isn't a great message to a user.

77
00:05:34,710 --> 00:05:41,140
So what we'll do to fix it in the short term and this actually will be a long term fix as well.

78
00:05:41,160 --> 00:05:47,250
But before we fix the issue of it always being there even if there is no message we're going to add

79
00:05:47,250 --> 00:05:51,150
in just another container and put our alert in that container.

80
00:05:51,540 --> 00:05:58,860
So on the top of every page if I refresh I now have a message it's empty but if I do something like

81
00:05:59,730 --> 00:06:03,080
try and go to add new campground I get my message.

82
00:06:03,120 --> 00:06:04,640
Please log in first.

83
00:06:04,860 --> 00:06:07,370
And of course we still have to style this form so we'll get there.

84
00:06:07,410 --> 00:06:10,550
But this at least is looking relatively finished.

85
00:06:11,040 --> 00:06:12,930
So that's working just fine.

86
00:06:13,080 --> 00:06:19,830
But we still don't have a way to differentiate between green and red or success and error and that will

87
00:06:19,830 --> 00:06:21,690
be really easy for us to do.

88
00:06:21,690 --> 00:06:28,350
So the idea is that when we get rid of this form is that when we flash we could do something like log

89
00:06:28,350 --> 00:06:32,170
you out and we might want that to be success.

90
00:06:32,430 --> 00:06:37,950
So I added in under success but then we might have something like in our middleware that we already

91
00:06:37,950 --> 00:06:44,810
have where we want to flash ever where we want a red danger dialog or danger alert.

92
00:06:45,210 --> 00:06:50,460
So we have these two ways and we could add anything we could do info we could call this blog.

93
00:06:50,520 --> 00:06:52,940
This is not related to bootstrap unnecessarily.

94
00:06:52,950 --> 00:06:57,130
This is just what we're adding it into the flash under the key.

95
00:06:57,450 --> 00:07:06,300
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

96
00:07:06,350 --> 00:07:11,320
we're passing this data through break here we'll actually have two different variables.

97
00:07:11,340 --> 00:07:19,260
So one for error and now call this redstart locals dot error and then we'll have another one for success

98
00:07:22,530 --> 00:07:23,860
just like that.

99
00:07:24,510 --> 00:07:27,970
So now we have two different pieces of data in our template.

100
00:07:28,050 --> 00:07:30,450
Both of them will be empty most of the time.

101
00:07:30,450 --> 00:07:31,970
Usually there's not something to display.

102
00:07:31,980 --> 00:07:38,200
But then if there is an error instead of the error variable we'll be able to access that.

103
00:07:38,370 --> 00:07:44,010
If we add anything to a flash under success why access it in this access variable inside the template

104
00:07:44,030 --> 00:07:44,430
.

105
00:07:44,820 --> 00:07:51,780
So now let's go to our template for a header and just duplicate this except rather than alert danger

106
00:07:51,980 --> 00:08:00,270
will do alert success and rather than message that doesn't exist anymore will have error here and success

107
00:08:00,270 --> 00:08:00,370
.

108
00:08:00,390 --> 00:08:02,140
Those are the two variables redefined.

109
00:08:02,370 --> 00:08:09,440
If I refresh right now we'll have a red and green stripe as you can see.

110
00:08:09,780 --> 00:08:14,070
And if I try and let's go to slash campgrounds and get an error

111
00:08:17,440 --> 00:08:20,020
you can see it only shows up in that red one.

112
00:08:20,610 --> 00:08:23,870
And then if I do something like sign up with some jibberish

113
00:08:27,210 --> 00:08:32,350
and then I go to log out you can see that it shows up in the green section.

114
00:08:32,880 --> 00:08:36,920
So what we've done there is just differentiated between two different types of messages.

115
00:08:36,930 --> 00:08:40,910
And we could add in as many as we want so there aren't any rules.

116
00:08:41,400 --> 00:08:45,110
If we want to use bootstrap though we want to go with these different classes.

117
00:08:45,750 --> 00:08:52,200
But as far as our own classification is concerned we can put whatever we want so we could have if we

118
00:08:52,200 --> 00:08:57,430
go back here where we're doing the flash we could ever own thing that we put here rather than success

119
00:08:57,440 --> 00:08:57,570
.

120
00:08:57,750 --> 00:08:59,730
But I'm sticking with success and error.

121
00:09:00,090 --> 00:09:06,340
Now let's tackle the issue of these two boxes the alerts always being there even if they're empty.

122
00:09:06,480 --> 00:09:15,540
What we'll need to do is go into our header file and add an if statement with our Ejay Yes we'll have

123
00:09:15,590 --> 00:09:16,300
if.

124
00:09:16,480 --> 00:09:25,160
And let me just add in the brackets to start and we'll do one for error just like that.

125
00:09:25,230 --> 00:09:27,980
Not in our IF statement there.

126
00:09:28,680 --> 00:09:32,910
In our closing bracket and we'll just start with that one.

127
00:09:32,910 --> 00:09:39,450
So what we're going to do is check if there is an error and it actually needs to look like this.

128
00:09:39,450 --> 00:09:46,880
So if error and error length is greater than zero.

129
00:09:47,700 --> 00:09:57,800
And the reason for that is just having error exist isn't enough for us to want to display error.

130
00:09:57,810 --> 00:10:00,290
So for example right now error is empty.

131
00:10:00,300 --> 00:10:06,920
There's no text in there there's no string but it's not undefined but it's still showing up here.

132
00:10:07,290 --> 00:10:11,440
So what we want to do is check if error dot length is greater than zero.

133
00:10:11,760 --> 00:10:17,660
Because even when error is empty when there is nothing in there it's still an empty array.

134
00:10:18,060 --> 00:10:22,610
And if we just check if there if empty array that's not falsie.

135
00:10:22,650 --> 00:10:24,160
Again I could show you that here.

136
00:10:24,330 --> 00:10:26,480
We did something like this.

137
00:10:26,610 --> 00:10:28,200
A lot of stuff there if

138
00:10:30,990 --> 00:10:34,400
empty array.

139
00:10:34,910 --> 00:10:37,700
That log anything.

140
00:10:38,350 --> 00:10:41,510
If I hit enter I get that comes with that log.

141
00:10:41,730 --> 00:10:46,210
And that's because an empty array is truthy.

142
00:10:46,260 --> 00:10:52,350
So right here where we're checking if error exists at all it still could be an empty array which most

143
00:10:52,350 --> 00:10:53,250
of the time it is.

144
00:10:53,250 --> 00:10:55,490
So this is really just checking to make sure.

145
00:10:55,560 --> 00:11:00,110
Like let's say that we didn't have this code at all in our SJS.

146
00:11:01,110 --> 00:11:01,920
Where are you.

147
00:11:01,920 --> 00:11:07,030
Here we go if we didn't have this at all then error and success would be undefined.

148
00:11:07,410 --> 00:11:09,710
And that line of code would just prevent an error.

149
00:11:09,720 --> 00:11:13,920
But this is actually the more important part to check if there's anything in the array.

150
00:11:13,950 --> 00:11:19,650
So if there's anything in the array if it the length is greater than zero then display this and we're

151
00:11:19,650 --> 00:11:26,740
going to do the exact same thing down here except rather than error.

152
00:11:26,800 --> 00:11:33,140
Well check instead of success if we need our closing brace as well.

153
00:11:34,320 --> 00:11:34,800
All right.

154
00:11:34,800 --> 00:11:40,550
So let's try this up or fire this up again restart the server refresh the page.

155
00:11:40,650 --> 00:11:41,900
We don't see anything.

156
00:11:42,360 --> 00:11:44,020
Let's try and add a new campground.

157
00:11:44,460 --> 00:11:47,720
I get my read message Please log in first.

158
00:11:47,910 --> 00:11:53,070
Let's sign up now.

159
00:11:53,100 --> 00:11:57,660
Now if I log out I get my green message log you out.

160
00:11:57,810 --> 00:11:58,420
Great.

161
00:11:58,470 --> 00:12:05,400
So all we have left really is to now go and add in the correct messages call the request up flash in

162
00:12:05,400 --> 00:12:07,040
the appropriate places.