1
00:00:00,150 --> 00:00:04,630
We go any further and start adding the delete and added functionality.

2
00:00:05,040 --> 00:00:07,620
I also want to set up my alerts.

3
00:00:08,070 --> 00:00:14,940
So if we navigate back to address, I would want you to first change the state values for the alert,

4
00:00:15,240 --> 00:00:19,600
because this is something that we're going to pass down to our alert component.

5
00:00:20,010 --> 00:00:26,250
So by default, let's just set it up as true, because I would want to showcase and the message is going

6
00:00:26,250 --> 00:00:31,200
to be, I don't know, hello, world doesn't really matter what you type over here because it is going

7
00:00:31,200 --> 00:00:32,910
to be set back to an empty strength.

8
00:00:33,180 --> 00:00:34,880
And then, like I said, we have two options.

9
00:00:34,910 --> 00:00:36,560
We have success and danger.

10
00:00:36,930 --> 00:00:38,910
So let's start with success.

11
00:00:38,910 --> 00:00:44,130
And then, of course, by the end of this video, we will change it to dangerous world the moment we

12
00:00:44,130 --> 00:00:47,040
don't see anything apart from the alert component.

13
00:00:47,400 --> 00:00:54,570
And what I would want is inside of this alert component, I would want to pass in all the properties

14
00:00:54,930 --> 00:00:57,240
from my state of alert value.

15
00:00:57,450 --> 00:01:01,640
And how we can do that is by the not so object threat operator.

16
00:01:01,860 --> 00:01:04,030
And then we go with alert.

17
00:01:04,470 --> 00:01:07,850
So now, of course, in the alert, I would want to grab them.

18
00:01:08,190 --> 00:01:14,250
So we're going to navigate to alert component and we're going to grab those properties then.

19
00:01:14,640 --> 00:01:21,930
Those are just coming from the alert state value and those are type on message because we really don't

20
00:01:21,930 --> 00:01:25,680
need the show showreel handle in the address.

21
00:01:25,920 --> 00:01:27,530
We don't really need it over here.

22
00:01:28,110 --> 00:01:33,720
And then as far as the heading to I'm going to go with paragraph and then I'll place my text.

23
00:01:34,080 --> 00:01:37,530
So I'll say message, whatever it is.

24
00:01:37,920 --> 00:01:45,090
And as far as the classes, well, this is where the type comes into play, where again I would want

25
00:01:45,090 --> 00:01:52,110
to set up my template strength and by default all of them will have the alert class, but then depending

26
00:01:52,110 --> 00:01:59,610
on the type of one more class and that class will be alert and then whatever is the type, again, the

27
00:01:59,610 --> 00:02:02,540
options are danger or success.

28
00:02:02,820 --> 00:02:08,090
So if you check it out now, I can see that this is, of course, the success class.

29
00:02:08,370 --> 00:02:13,470
So we have the alert and then in this case it is alert and then high from success.

30
00:02:13,790 --> 00:02:16,590
You want to check out those glasses, just navigate in The Exorcist.

31
00:02:16,980 --> 00:02:17,940
But like I said.

32
00:02:19,180 --> 00:02:27,670
If I change this danger, you'll see that our styling is going to be a bit different if we go danger

33
00:02:27,940 --> 00:02:30,420
where it is now, of course we have a different style.

34
00:02:30,790 --> 00:02:33,700
But then whatever is, the message gets passed.

35
00:02:33,700 --> 00:02:36,730
And Tueller, hopefully that is clear.

36
00:02:36,910 --> 00:02:43,150
Hopefully understand that we only showcase because truth is equal to our show.

37
00:02:43,330 --> 00:02:49,420
So our show values on online, whatever, passing as message and whatever type we pass in.

38
00:02:49,900 --> 00:02:56,240
This is how the alert is going to look like and what kind of text alert is going to happen.

39
00:02:56,590 --> 00:03:05,050
So now, of course, what I would want is to go back to default and just say I'm just trying as well

40
00:03:05,050 --> 00:03:05,620
as type.

41
00:03:05,840 --> 00:03:08,290
It is just going to be empty string.

42
00:03:08,620 --> 00:03:16,510
And now let's try displaying the alert once we click on the submit without adding any kind of values

43
00:03:16,870 --> 00:03:20,870
and hear what I could do is I have my condition, of course.

44
00:03:21,250 --> 00:03:24,900
So now I can just run my set alert.

45
00:03:25,240 --> 00:03:30,190
So technically I could do something like this set alert then I know that I need to pass in the object.

46
00:03:30,190 --> 00:03:36,940
Correct, because that is my default one and also show and control that.

47
00:03:36,940 --> 00:03:46,510
As far as the message, let's just say please enter values a message, please, please enter and fair

48
00:03:46,510 --> 00:03:47,230
value.

49
00:03:47,560 --> 00:03:50,290
And the last one, of course, is the type shown here.

50
00:03:50,290 --> 00:03:54,910
I'm going to go with danger since I would want my styles to be red.

51
00:03:55,160 --> 00:03:59,230
So now if I try to submit their ears are alert.

52
00:03:59,500 --> 00:04:00,750
However, there are two options.

53
00:04:00,760 --> 00:04:07,150
First of all, I would want to remove that alert after three seconds so it's not sitting there all the

54
00:04:07,150 --> 00:04:07,450
time.

55
00:04:07,900 --> 00:04:13,420
And the second thing, since we're calling this multiple times, I mean, I already know that we'll

56
00:04:13,420 --> 00:04:14,950
have to call this multiple times.

57
00:04:15,340 --> 00:04:21,430
There has to be a better approach where why don't we set up a function that is just looking for these

58
00:04:21,430 --> 00:04:25,330
three values and also maybe we can set up some default ones.

59
00:04:25,510 --> 00:04:30,670
And in the process, we're just going to speed up this alert functionality.

60
00:04:31,000 --> 00:04:37,690
So in this case, what I could do is come up with a function name and I'll call this show alert and

61
00:04:37,690 --> 00:04:39,280
it's going to be looking for three things.

62
00:04:39,670 --> 00:04:44,020
It's going to be looking for the show, for the type and the message.

63
00:04:44,080 --> 00:04:48,910
So essentially, everything that we're passing in, we're just going to set up some nice default as

64
00:04:48,910 --> 00:04:49,170
well.

65
00:04:49,420 --> 00:04:55,630
So in here, I'm going to go with show and I'll set it equal to a false by default.

66
00:04:55,840 --> 00:05:01,600
So again, this is ESX, where I say, yeah, I'm looking for this particular parameter, but by default

67
00:05:01,600 --> 00:05:02,270
it's going to be false.

68
00:05:02,380 --> 00:05:07,360
So if I don't pass it and then type by default will be empty.

69
00:05:07,690 --> 00:05:12,040
And then also I'm going to go with message and that one also will be empty.

70
00:05:12,280 --> 00:05:18,400
And then in this show alert, I'm just going to go set alert and then I'll say that I'm passing in the

71
00:05:18,400 --> 00:05:18,820
object.

72
00:05:19,030 --> 00:05:27,760
And then again, we can use that S6 feature where if the property name matches to the variable name,

73
00:05:27,760 --> 00:05:28,530
that holds the value.

74
00:05:29,540 --> 00:05:37,400
Then I can just say show and type of message, please keep in mind pretty much the same thing as I would

75
00:05:37,400 --> 00:05:39,440
have written like this where I have the show.

76
00:05:39,770 --> 00:05:40,890
So that is my primer.

77
00:05:40,910 --> 00:05:43,510
And I just set it equal in my object in there.

78
00:05:43,530 --> 00:05:47,370
Six, I can speed it up and this is not my value.

79
00:05:47,690 --> 00:05:53,870
Now, of course, in here I muster up a little bit with syntax since I was going for the error function.

80
00:05:54,110 --> 00:05:58,520
And now instead of using set alert, I can just use my Scholer.

81
00:05:58,730 --> 00:05:59,140
Correct.

82
00:05:59,510 --> 00:06:07,070
So I go with Scholer and then I need to decide, well, what kind of values I would want to pass it

83
00:06:07,070 --> 00:06:07,280
in.

84
00:06:07,670 --> 00:06:12,140
And I would want to say that first one is going to be true.

85
00:06:12,620 --> 00:06:20,180
So I would want to display my alert, of course, because I'm looking for the show first, then the

86
00:06:20,180 --> 00:06:23,030
next one is the class.

87
00:06:23,060 --> 00:06:24,380
So what is going to be the styling?

88
00:06:24,620 --> 00:06:28,520
And in my case, I'm going to say here danger since again is going to be red.

89
00:06:28,790 --> 00:06:30,830
And lastly, well, what is going to be the text?

90
00:06:30,830 --> 00:06:34,520
So we go please and try again.

91
00:06:34,670 --> 00:06:39,320
If you just call it in one place, probably not a big deal to keep the alert.

92
00:06:39,560 --> 00:06:45,920
But in my case, since we had multiple instances, I just thought that it's a bit faster if we come

93
00:06:45,920 --> 00:06:47,480
up with a function.

94
00:06:47,870 --> 00:06:51,140
And of course, once I click Verity's, I have my heart.

95
00:06:51,590 --> 00:06:56,600
Now let's also deal with hiding this alert in three seconds.

96
00:06:56,960 --> 00:07:00,710
And we have done that already quite a few times.

97
00:07:01,830 --> 00:07:09,720
But let me just repeat that we all need to pass in our show alert to alert function, that's probably

98
00:07:09,720 --> 00:07:10,820
going to be a start.

99
00:07:11,280 --> 00:07:17,560
And then also I would want to set up some kind of usufruct in the alert.

100
00:07:18,180 --> 00:07:22,430
So once the component renders, then I would want to call my usufruct.

101
00:07:22,710 --> 00:07:27,360
And then, of course, in the use of fact, I will call that show alert.

102
00:07:27,580 --> 00:07:32,630
Or in this case, I'm just going to say that show is false, by the way, is by default.

103
00:07:33,000 --> 00:07:36,180
If this doesn't make sense, just keep on typing with me.

104
00:07:36,600 --> 00:07:37,770
We're going to go with alert.

105
00:07:37,770 --> 00:07:42,450
I'm going to come up with some kind of name for the prop.

106
00:07:42,750 --> 00:07:47,390
And I'm going to say remove alert is equal to my function.

107
00:07:47,400 --> 00:07:53,910
So I pass in show alert like so I'm in alert, which I would need to structure it.

108
00:07:54,420 --> 00:07:58,280
We say remove alert, remove all.

109
00:07:58,740 --> 00:08:00,720
So that is my function.

110
00:08:01,200 --> 00:08:06,740
And then once I have access to it, then I would want to set up my use of fact.

111
00:08:07,290 --> 00:08:12,800
So here, when I say use effect and I'll set up my callback function.

112
00:08:13,050 --> 00:08:15,210
Now, when do I want this to happen?

113
00:08:15,570 --> 00:08:17,400
When the component renders right.

114
00:08:17,650 --> 00:08:25,200
So I'm just going to go here with this empty dependency list and then here again, let's do the cleanup.

115
00:08:25,530 --> 00:08:32,910
Just because we're responsible and we're going to go with time out is equal to a set time and then we

116
00:08:32,910 --> 00:08:34,590
pass in our callback function.

117
00:08:34,920 --> 00:08:41,490
And then I'll say that in three seconds I would want to run Michael back function and the inside of

118
00:08:41,520 --> 00:08:42,360
the callback function.

119
00:08:42,570 --> 00:08:43,650
What do we need to do?

120
00:08:44,130 --> 00:08:45,620
Just remove alert?

121
00:08:45,690 --> 00:08:46,070
Why?

122
00:08:46,440 --> 00:08:48,840
Because we already have this default notice.

123
00:08:49,260 --> 00:08:51,180
One I invoke Qalat.

124
00:08:51,570 --> 00:08:57,280
If show is not passed, it's going to be equal to a false and the rest of them to empty strings.

125
00:08:57,540 --> 00:09:00,950
Now, I don't care about these ones, but I definitely care about the show.

126
00:09:01,350 --> 00:09:06,540
So then after three seconds, of course I will invoke it and then I'll hide my work.

127
00:09:06,780 --> 00:09:11,880
And then like I said, because we're responsible, we're going to go with return and we'll set up,

128
00:09:11,880 --> 00:09:15,930
of course, our cleanup function and we'll set clear time out.

129
00:09:15,930 --> 00:09:21,940
And then we have access to our time multivariable something that we have already done before.

130
00:09:22,290 --> 00:09:26,970
So now if I try to submit with empty value, I'm going to get police and the value.

131
00:09:27,180 --> 00:09:32,580
And then you guessed that in three seconds we're just going to remove it from the list.

132
00:09:33,060 --> 00:09:35,550
Hopefully everything is clear now.

133
00:09:35,550 --> 00:09:44,160
Of course, we can start adding more functionality to our list items since we have our alert ready to

134
00:09:44,160 --> 00:09:44,370
go.