1
00:00:02,000 --> 00:00:03,000
Now this notification is there,

2
00:00:03,000 --> 00:00:05,000
and that's great.

3
00:00:05,000 --> 00:00:07,000
But it would be good if, eventually,

4
00:00:07,000 --> 00:00:08,000
it would disappear.

5
00:00:08,000 --> 00:00:10,000
And that's something which we can implement.

6
00:00:10,000 --> 00:00:13,000
And I want to make sure that it can be removed

7
00:00:13,000 --> 00:00:15,000
in two different ways.

8
00:00:15,000 --> 00:00:19,000
We can click it, and then it should be removed instantly.

9
00:00:19,000 --> 00:00:21,000
Alternatively, there should be a timer

10
00:00:21,000 --> 00:00:23,000
which removes it after three seconds

11
00:00:23,000 --> 00:00:27,000
if it's a success or error notification.

12
00:00:27,000 --> 00:00:28,000
Pending notifications

13
00:00:28,000 --> 00:00:32,000
should not be removed automatically, let's say.

14
00:00:32,000 --> 00:00:34,000
Now to implement this, we can dive

15
00:00:34,000 --> 00:00:36,000
into the notification component

16
00:00:36,000 --> 00:00:40,000
and start with the click case, simply by adding onClick

17
00:00:40,000 --> 00:00:43,000
and doing something when it is clicked.

18
00:00:43,000 --> 00:00:46,000
Now the question is what we wanna do if it's clicked,

19
00:00:46,000 --> 00:00:49,000
and I would say we wanna call hideNotification

20
00:00:49,000 --> 00:00:50,000
on our context.

21
00:00:50,000 --> 00:00:54,000
So I will just use context inside of this component.

22
00:00:54,000 --> 00:00:57,000
There's nothing that prevents us from doing that.

23
00:00:57,000 --> 00:01:00,000
Just because we show this component,

24
00:01:00,000 --> 00:01:01,000
because of context,

25
00:01:01,000 --> 00:01:05,000
does not mean that we can't use context in there.

26
00:01:05,000 --> 00:01:07,000
So I'll use the useContext hook,

27
00:01:07,000 --> 00:01:09,000
which you should import from React,

28
00:01:11,000 --> 00:01:14,000
and I'll import the NotificationContext

29
00:01:14,000 --> 00:01:17,000
from the store folder and there,

30
00:01:17,000 --> 00:01:19,000
notification-context file,

31
00:01:19,000 --> 00:01:21,000
to establish this connection here.

32
00:01:22,000 --> 00:01:25,000
Then here we have the notificationContext object,

33
00:01:25,000 --> 00:01:29,000
and now we can use that to hide the notification.

34
00:01:29,000 --> 00:01:33,000
Because in our context, there is this

35
00:01:33,000 --> 00:01:36,000
hideNotification function which we call,

36
00:01:36,000 --> 00:01:38,000
which we can call, which eventually

37
00:01:38,000 --> 00:01:41,000
will call this function here.

38
00:01:41,000 --> 00:01:42,000
Now thereafter, what we can do

39
00:01:42,000 --> 00:01:44,000
in the notification component,

40
00:01:44,000 --> 00:01:49,000
is we can just bind onClick to notificationCtx.

41
00:01:50,000 --> 00:01:52,000
So to this notificationContext object

42
00:01:52,000 --> 00:01:54,000
I'm getting from my context here,

43
00:01:54,000 --> 00:01:58,000
and then point at the hideNotification function.

44
00:01:59,000 --> 00:02:03,000
Don't execute it here, so no parentheses,

45
00:02:03,000 --> 00:02:05,000
but instead let React execute it for you

46
00:02:05,000 --> 00:02:07,000
when that click occurs.

47
00:02:07,000 --> 00:02:10,000
That's what we do by pointing at it here.

48
00:02:10,000 --> 00:02:13,000
And then with that, if we save this,

49
00:02:13,000 --> 00:02:16,000
if I click the notification, it disappears.

50
00:02:16,000 --> 00:02:18,000
Shows up again, disappears.

51
00:02:18,000 --> 00:02:20,000
So that's working.

52
00:02:20,000 --> 00:02:23,000
Now it should also disappear automatically.

53
00:02:23,000 --> 00:02:27,000
And for this, we can go back into the notificationContext.

54
00:02:27,000 --> 00:02:30,000
And there we might wanna set a timer

55
00:02:30,000 --> 00:02:34,000
whenever the notification starts showing up.

56
00:02:34,000 --> 00:02:37,000
And that is a perfect-use case for useEffect,

57
00:02:37,000 --> 00:02:40,000
because that allows us to listen to changes

58
00:02:40,000 --> 00:02:42,000
to the notification object, and then act

59
00:02:42,000 --> 00:02:44,000
when it does change.

60
00:02:44,000 --> 00:02:47,000
So here I'll then import useEffect,

61
00:02:48,000 --> 00:02:52,000
and add a new useEffect call here.

62
00:02:52,000 --> 00:02:55,000
And at the useEffect function enter the dependency array.

63
00:02:56,000 --> 00:02:59,000
Now in the useEffect function, I wanna check

64
00:02:59,000 --> 00:03:02,000
if activeNotification is set,

65
00:03:02,000 --> 00:03:04,000
and, important,

66
00:03:04,000 --> 00:03:06,000
if activeNotification status

67
00:03:07,000 --> 00:03:09,000
is equal to success

68
00:03:10,000 --> 00:03:15,000
or if activeNotification status is equal to error.

69
00:03:17,000 --> 00:03:20,000
And I'll wrap that in parentheses

70
00:03:20,000 --> 00:03:22,000
so that the first condition must always be met

71
00:03:22,000 --> 00:03:26,000
and then either of the two other conditions.

72
00:03:26,000 --> 00:03:28,000
So if we have an activeNotification,

73
00:03:28,000 --> 00:03:30,000
then we also perform those checks

74
00:03:30,000 --> 00:03:32,000
to make it into this IF block

75
00:03:32,000 --> 00:03:36,000
if we have an activeNotification with a status

76
00:03:36,000 --> 00:03:38,000
of success and error.

77
00:03:38,000 --> 00:03:40,000
If we have no activeNotification,

78
00:03:41,000 --> 00:03:43,000
or if the status is pending,

79
00:03:43,000 --> 00:03:45,000
we don't do anything.

80
00:03:45,000 --> 00:03:49,000
Now if we do have this kind of notification though,

81
00:03:49,000 --> 00:03:52,000
then I wanna set a timer that will eventually

82
00:03:52,000 --> 00:03:54,000
remove the notification though.

83
00:03:54,000 --> 00:03:59,000
So then here I'll set a timer with setTimeout,

84
00:04:01,000 --> 00:04:04,000
which will eventually do something.

85
00:04:04,000 --> 00:04:07,000
And it should do that after three seconds roughly.

86
00:04:08,000 --> 00:04:11,000
And what it should do, is that it should call

87
00:04:11,000 --> 00:04:14,000
setActiveNotification and set this to null.

88
00:04:14,000 --> 00:04:16,000
Or, to be precise,

89
00:04:16,000 --> 00:04:20,000
it should call hideNotificationHandler.

90
00:04:20,000 --> 00:04:22,000
We could, of course, also call that function.

91
00:04:22,000 --> 00:04:25,000
But I'll just set the activeNotification to null here.

92
00:04:27,000 --> 00:04:31,000
Now I'll return here, I'll return that cleanup function,

93
00:04:31,000 --> 00:04:36,000
which useEffect accepts, to clear that timer,

94
00:04:36,000 --> 00:04:38,000
so that timer, which has stored this constant,

95
00:04:38,000 --> 00:04:43,000
if useEffect reruns before the timer went off,

96
00:04:43,000 --> 00:04:45,000
so that we don't have multiple ongoing timers

97
00:04:45,000 --> 00:04:47,000
at the same time.

98
00:04:47,000 --> 00:04:50,000
So here I'm utilizing this cleanup function of useEffect.

99
00:04:50,000 --> 00:04:53,000
All that code here is still in this IF block, though.

100
00:04:53,000 --> 00:04:56,000
If we're not making it in there, useEffect does nothing.

101
00:04:58,000 --> 00:05:01,000
Now since we are relying on the activeNotification here,

102
00:05:01,000 --> 00:05:04,000
and since we want to rerun this effect,

103
00:05:04,000 --> 00:05:06,000
whenever the activeNotification changes,

104
00:05:06,000 --> 00:05:10,000
I'll add activeNotification as a dependency here.

105
00:05:11,000 --> 00:05:13,000
And with this implemented,

106
00:05:13,000 --> 00:05:15,000
it should disappear automatically.

107
00:05:15,000 --> 00:05:20,000
If I do register, we see pending, and then success,

108
00:05:21,000 --> 00:05:25,000
and after three seconds it disappears automatically.

109
00:05:25,000 --> 00:05:28,000
We also don't have any errors here,

110
00:05:28,000 --> 00:05:31,000
except for that 500 error from earlier.

111
00:05:31,000 --> 00:05:32,000
So that is working.

112
00:05:32,000 --> 00:05:36,000
And that is how we use this notification component

113
00:05:36,000 --> 00:05:40,000
with React context for app-wide state management

114
00:05:40,000 --> 00:05:42,000
and for giving the user some feedback

115
00:05:42,000 --> 00:05:44,000
about the sign-up process.

116
00:05:45,000 --> 00:05:47,000
Now I got a challenge for you.

117
00:05:47,000 --> 00:05:49,000
We also have this comments area,

118
00:05:49,000 --> 00:05:52,000
where the user should get some feedback.

119
00:05:52,000 --> 00:05:55,000
And here, I want you to work on that.

120
00:05:55,000 --> 00:05:58,000
When a new comment is added, so when we click submit here,

121
00:05:58,000 --> 00:06:00,000
I want you to make sure

122
00:06:00,000 --> 00:06:03,000
that we also show this notification

123
00:06:03,000 --> 00:06:05,000
with pending, error, and success.

124
00:06:05,000 --> 00:06:10,000
And, as a bonus task, I want you to show some loading text

125
00:06:11,000 --> 00:06:14,000
whilst we're waiting for the comments to be loaded.

126
00:06:14,000 --> 00:06:18,000
So there you should not use the notification,

127
00:06:18,000 --> 00:06:21,000
but just some loading text whilst we're waiting for that.

128
00:06:21,000 --> 00:06:25,000
That's my challenge for you, a little exercise for you.

129
00:06:25,000 --> 00:06:29,000
In the next lecture, we're going to implement that together.