1
00:00:02,000 --> 00:00:03,000
So, in this

2
00:00:03,000 --> 00:00:05,000
NotificationContextProvider component,

3
00:00:05,000 --> 00:00:07,000
I wonna manage the state,

4
00:00:07,000 --> 00:00:10,000
which is then distributed through context

5
00:00:10,000 --> 00:00:12,000
to the various stakeholders,

6
00:00:12,000 --> 00:00:17,000
the various components that are interested in that state.

7
00:00:17,000 --> 00:00:19,000
And hence, I'll start by creating an useState.

8
00:00:20,000 --> 00:00:24,000
And that is the state that stores the notification

9
00:00:24,000 --> 00:00:27,000
that should be shown, if any.

10
00:00:27,000 --> 00:00:30,000
So here we can have the activeNotification,

11
00:00:30,000 --> 00:00:33,000
and a setActiveNotification function.

12
00:00:34,000 --> 00:00:37,000
And initially, that's undefined because initially,

13
00:00:37,000 --> 00:00:39,000
I have no active notification.

14
00:00:40,000 --> 00:00:42,000
But then I'll add two functions,

15
00:00:42,000 --> 00:00:46,000
the showNotificationHandler function,

16
00:00:46,000 --> 00:00:51,000
and the hideNotificationHandler function.

17
00:00:54,000 --> 00:00:57,000
These are the two functions I'll add here.

18
00:00:57,000 --> 00:00:59,000
In the showNotificationHandler,

19
00:00:59,000 --> 00:01:02,000
I wonna set my active notification

20
00:01:02,000 --> 00:01:05,000
and I do expect that I get information

21
00:01:05,000 --> 00:01:08,000
about the notification that should be shown

22
00:01:08,000 --> 00:01:10,000
as a parameter here.

23
00:01:10,000 --> 00:01:14,000
So here, I'll expect to get my notification data.

24
00:01:14,000 --> 00:01:18,000
And then I'll set my active notification to an object

25
00:01:18,000 --> 00:01:22,000
where the title is notificationData.title,

26
00:01:22,000 --> 00:01:25,000
where the message is notificationData.message,

27
00:01:25,000 --> 00:01:30,000
and where the status is notificationData.status.

28
00:01:30,000 --> 00:01:33,000
And since these objects are exactly equal,

29
00:01:33,000 --> 00:01:35,000
we can of course, take a shortcut

30
00:01:35,000 --> 00:01:37,000
and just set the active notification

31
00:01:37,000 --> 00:01:41,000
to that notification data we're getting here.

32
00:01:41,000 --> 00:01:42,000
To get correct auto completion,

33
00:01:42,000 --> 00:01:47,000
I'll then also update my showNotification function up there,

34
00:01:47,000 --> 00:01:50,000
which will soon use

35
00:01:50,000 --> 00:01:53,000
and expect notification data there as well.

36
00:01:53,000 --> 00:01:56,000
Again, we're not doing anything with it there,

37
00:01:56,000 --> 00:02:00,000
but this will help us with IDE auto completion later.

38
00:02:00,000 --> 00:02:02,000
The actual function is defined here

39
00:02:02,000 --> 00:02:05,000
and we'll connect it to the context soon.

40
00:02:06,000 --> 00:02:09,000
Now, in hideNotificationHandler,

41
00:02:09,000 --> 00:02:12,000
I wonna set my active notification to null.

42
00:02:12,000 --> 00:02:14,000
I wonna reset it and get rid of it.

43
00:02:16,000 --> 00:02:19,000
Now, the goal is to bundle my notification data

44
00:02:19,000 --> 00:02:24,000
and pointer set these functions together into one object,

45
00:02:24,000 --> 00:02:27,000
which we can then distribute as context

46
00:02:27,000 --> 00:02:29,000
to the other components in the app.

47
00:02:29,000 --> 00:02:33,000
So, I'll create a new constant here, my context.

48
00:02:33,000 --> 00:02:35,000
And that's our object,

49
00:02:35,000 --> 00:02:37,000
which now has the structure defined up here

50
00:02:37,000 --> 00:02:39,000
for this initial context.

51
00:02:39,000 --> 00:02:44,000
So here, I then wonna have a notification key

52
00:02:44,000 --> 00:02:48,000
and point at the activeNotification state here as a value.

53
00:02:49,000 --> 00:02:51,000
I'll add a showNotification key.

54
00:02:51,000 --> 00:02:55,000
And we defined that this should hold a function,

55
00:02:55,000 --> 00:02:56,000
so, here I will point at this

56
00:02:56,000 --> 00:02:59,000
showNotificationHandler function,

57
00:02:59,000 --> 00:03:03,000
which is a function off the proper structure and signature.

58
00:03:04,000 --> 00:03:07,000
And I'll add my hideNotification key

59
00:03:07,000 --> 00:03:11,000
and point at the hideNotificationHandler function.

60
00:03:13,000 --> 00:03:15,000
So, that's now my context object.

61
00:03:15,000 --> 00:03:18,000
And now we distribute this to all the components

62
00:03:18,000 --> 00:03:22,000
that are interested through the value prop

63
00:03:22,000 --> 00:03:24,000
on this provider component.

64
00:03:25,000 --> 00:03:27,000
We set that equal to context.

65
00:03:27,000 --> 00:03:29,000
And the cool thing is that whenever we change

66
00:03:29,000 --> 00:03:31,000
this state here,

67
00:03:31,000 --> 00:03:32,000
for example, by calling

68
00:03:32,000 --> 00:03:35,000
show or hideNotificationHandler in the end,

69
00:03:35,000 --> 00:03:39,000
this notification context provider component will re-render

70
00:03:39,000 --> 00:03:42,000
and will distribute the updated context object

71
00:03:42,000 --> 00:03:45,000
to interested components.

72
00:03:45,000 --> 00:03:47,000
And that's exactly what we need here.