1
00:00:00,550 --> 00:00:07,100
With our user States values as well as functions complete we could move on and start in fact restricting

2
00:00:07,100 --> 00:00:10,580
access depending whether the user has logged in or not.

3
00:00:10,580 --> 00:00:16,940
However before we do that wouldn't be nicer if we would display to our user whether he or she has logged

4
00:00:16,940 --> 00:00:19,240
in or whether there was an error.

5
00:00:19,250 --> 00:00:20,240
So think about it.

6
00:00:20,240 --> 00:00:26,780
If I need to sign on I type in my email and let's say my password is incorrect we could just show the

7
00:00:26,780 --> 00:00:27,550
alert right.

8
00:00:27,860 --> 00:00:33,330
So if let's say the password was correct we're going to say you are logged in and then whatever user

9
00:00:33,330 --> 00:00:35,410
name and then we have some kind of text.

10
00:00:35,480 --> 00:00:37,430
And of course we can close out the alert.

11
00:00:37,580 --> 00:00:43,760
Or let's say if we're going to log out and try to log in with wrong credentials which is what I wanted

12
00:00:43,760 --> 00:00:49,080
to do initially but for some reason I entered the right password lets me enter the wrong one.

13
00:00:49,170 --> 00:00:50,420
Then we're gonna have a.

14
00:00:50,420 --> 00:00:51,420
There was an error.

15
00:00:51,470 --> 00:00:52,690
Please try again.

16
00:00:52,730 --> 00:00:55,550
So this is what we're going to work on in this video.

17
00:00:55,700 --> 00:01:00,770
And in fact we're going to do a bit differently where previously we set up the component first.

18
00:01:00,770 --> 00:01:02,890
Now in this case we're going to set up our functions.

19
00:01:03,010 --> 00:01:09,530
I'd also like to mention that if you have more global functions like this one alert than you probably

20
00:01:09,530 --> 00:01:12,190
would want to set up another context.

21
00:01:12,200 --> 00:01:15,710
So currently we have the card we have the product as well as the user.

22
00:01:15,830 --> 00:01:23,180
No I'm gonna be lazy and I'm going to add my alert functionality in my user context just because it

23
00:01:23,180 --> 00:01:27,990
wraps around my whole application and I already have these contexts open.

24
00:01:28,040 --> 00:01:33,110
Now again if you have more functionality let's say you have not only alert but something else that is

25
00:01:33,110 --> 00:01:39,860
global you probably would want to set up another context where you're specifically putting those utilities

26
00:01:39,890 --> 00:01:42,050
again in our case is just gonna be alert.

27
00:01:42,320 --> 00:01:48,500
So I'm gonna be a bit lazy and we're just going to set up our alert within the user j Yes and we're

28
00:01:48,500 --> 00:01:50,580
gonna start again by setting up the state volume.

29
00:01:50,660 --> 00:01:56,930
So you're going to have const alert alert like so we're gonna have a function of course we're gonna

30
00:01:56,960 --> 00:02:08,150
have a set alert function and then we're going to use a react use state use state and our initial value

31
00:02:08,410 --> 00:02:12,290
is gonna be an object and in this case we're not going to be checking a local storage.

32
00:02:12,410 --> 00:02:18,170
It is gonna be an object and by default we're gonna have a show property equal to False.

33
00:02:18,200 --> 00:02:24,800
So we're not going to display our alert by default the message property is gonna be equal to an empty

34
00:02:24,800 --> 00:02:25,610
string.

35
00:02:25,670 --> 00:02:29,490
And then lastly we also are gonna have a type of success.

36
00:02:29,510 --> 00:02:35,750
Now what is a type you see we're gonna have two options Either we're going to have a success alert meaning

37
00:02:35,750 --> 00:02:40,240
the color is going to be green or we're gonna have a danger one.

38
00:02:40,250 --> 00:02:44,560
So essentially if we have the danger that means that the our alert is gonna be red.

39
00:02:44,570 --> 00:02:47,150
And I just borrowed that from the bootstrap.

40
00:02:47,150 --> 00:02:49,210
So there's nothing unique about that.

41
00:02:49,250 --> 00:02:50,230
Let me save it.

42
00:02:50,240 --> 00:02:52,380
That is our initial object.

43
00:02:52,550 --> 00:02:54,470
And then we're gonna set up two functions.

44
00:02:54,470 --> 00:02:55,850
We're gonna have a show alert.

45
00:02:56,180 --> 00:03:00,640
So when we would want to show alert and then also when we would want to hide the alert.

46
00:03:00,710 --> 00:03:04,800
So we're gonna go with concert show alert.

47
00:03:04,940 --> 00:03:10,370
And then in order to display the alert we're gonna need to pass in the object.

48
00:03:10,370 --> 00:03:12,500
And of course we already have these state properties.

49
00:03:12,500 --> 00:03:13,190
Correct.

50
00:03:13,190 --> 00:03:17,100
So we have the show as well as message and type.

51
00:03:17,300 --> 00:03:24,020
And you know what by default right away I would want to set it up where if let's say we are passing

52
00:03:24,020 --> 00:03:26,690
in the type the type is going to be success.

53
00:03:26,690 --> 00:03:32,840
So unless I specifically write that type is gonna be danger when I would like to show the alert then

54
00:03:32,870 --> 00:03:34,680
by default is just gonna be success.

55
00:03:34,760 --> 00:03:35,590
No way we can do that.

56
00:03:35,580 --> 00:03:40,430
We can just type and we can use the default primer from iOS 6.

57
00:03:40,570 --> 00:03:46,700
I would just say that type by default if I don't specifically override it the danger is always always

58
00:03:46,700 --> 00:03:47,590
gonna be a second.

59
00:03:47,870 --> 00:03:50,400
And also what we're going to be looking for is the message.

60
00:03:50,660 --> 00:03:56,820
So what kind of message we would want to display when we show out earlier and then within the function

61
00:03:56,820 --> 00:04:02,080
body what we're gonna do is we're gonna use set set alert.

62
00:04:02,230 --> 00:04:04,100
That is of course our function.

63
00:04:04,100 --> 00:04:10,730
And then we're gonna pass in show as true and you're noticing that I'm hard coding this because I really

64
00:04:10,730 --> 00:04:16,490
don't see the point of showing these show alert function if I know that I'm going to show Diller.

65
00:04:16,490 --> 00:04:21,230
Now if you're creating like a toggle function where in some cases you're going to show alert and in

66
00:04:21,230 --> 00:04:22,640
some cases you're closer.

67
00:04:22,970 --> 00:04:24,360
Yeah that would be something else.

68
00:04:24,530 --> 00:04:29,490
Because remember we have within the alert also an option of just closing the alert.

69
00:04:29,540 --> 00:04:30,600
We have the button.

70
00:04:30,680 --> 00:04:35,360
So that's the reason why we're setting up a two functions but you could set this up of course as one

71
00:04:35,360 --> 00:04:39,450
function where instead of showing hide you could set up as toggle.

72
00:04:39,470 --> 00:04:43,490
Now if you're setting us toggle then it makes sense to pass here as a property.

73
00:04:43,670 --> 00:04:48,380
But in our case I always know that if I'm going around shoulder along always going to show that there's

74
00:04:48,380 --> 00:04:54,320
no point for me to pass it as a property and object I can just hard code when I'm setting up my alert

75
00:04:54,620 --> 00:05:00,770
using these state function and then I'm also going to pass in the message as well as the type.

76
00:05:00,800 --> 00:05:07,850
And again I know I said that already before but I'm using type of success as my default parameter.

77
00:05:07,970 --> 00:05:14,200
So if I'm not going to pass anything as mine type value then it's always always going to be a success.

78
00:05:14,240 --> 00:05:16,370
And also we would want to close it out.

79
00:05:16,430 --> 00:05:24,950
So I'm going to say const hide on alert and then we're not going to pass in any parameters or any arguments

80
00:05:25,310 --> 00:05:27,840
and we're just gonna run set alert.

81
00:05:27,900 --> 00:05:34,220
Darrell we're going to access the values so going to say whatever the values I have currently within

82
00:05:34,220 --> 00:05:35,060
the alert.

83
00:05:35,060 --> 00:05:39,490
Remember we have alert values and I'm just gonna override these show one.

84
00:05:39,530 --> 00:05:44,600
So if the show is true which of course would be the case if we're showing the alert while then we're

85
00:05:44,600 --> 00:05:49,730
just right click and we're gonna say show is equal to False that's it.

86
00:05:49,730 --> 00:05:50,860
That's all we have to do.

87
00:05:50,870 --> 00:05:56,210
So again we have state value we have show alert as well as the high alert function.

88
00:05:56,280 --> 00:06:02,120
And now I'm just going to pass in these values again within my value prop and in the next video we're

89
00:06:02,120 --> 00:06:03,990
going to set up our actual alert.

90
00:06:04,100 --> 00:06:10,520
So we're going to go with alert then we're going to look for show alert function and then of course

91
00:06:10,520 --> 00:06:12,860
we'll also have a higher alert function.

92
00:06:12,920 --> 00:06:14,120
Let's save it.

93
00:06:14,280 --> 00:06:16,970
Now let's start working on our alert component.