1
00:00:02,000 --> 00:00:03,000
To use the context API

2
00:00:03,000 --> 00:00:05,000
I'll create a new folder,

3
00:00:05,000 --> 00:00:06,000
which you don't have to do,

4
00:00:06,000 --> 00:00:10,000
but I wanna store my context related files

5
00:00:10,000 --> 00:00:13,000
my application wide state related files

6
00:00:13,000 --> 00:00:15,000
in a separate folder.

7
00:00:15,000 --> 00:00:18,000
And I'll name the folder store.

8
00:00:18,000 --> 00:00:20,000
Since this contains my state store

9
00:00:20,000 --> 00:00:23,000
for the entire application.

10
00:00:23,000 --> 00:00:26,000
And in store I'll add a new file, which I'll name

11
00:00:26,000 --> 00:00:30,000
notification-context.JS.

12
00:00:30,000 --> 00:00:33,000
This file is all is up to you though the file name.

13
00:00:34,000 --> 00:00:37,000
Now in here we wanna import from react

14
00:00:37,000 --> 00:00:41,000
and we wanna import the create context function

15
00:00:41,000 --> 00:00:44,000
because the goal here is to create a new context,

16
00:00:44,000 --> 00:00:48,000
a new context for managing our notifications.

17
00:00:48,000 --> 00:00:52,000
Now we can provide an initialization object here,

18
00:00:52,000 --> 00:00:56,000
which defines the structure of this context

19
00:00:56,000 --> 00:00:58,000
and the context so does object,

20
00:00:58,000 --> 00:01:03,000
which will also be exposed to the different components

21
00:01:03,000 --> 00:01:05,000
in our application later,

22
00:01:05,000 --> 00:01:10,000
this context should actually have a notification

23
00:01:11,000 --> 00:01:13,000
property let's say,

24
00:01:13,000 --> 00:01:14,000
which is null initially,

25
00:01:14,000 --> 00:01:18,000
but which eventually will be an object with a title,

26
00:01:18,000 --> 00:01:21,000
a message and a status property.

27
00:01:21,000 --> 00:01:22,000
So a nested object.

28
00:01:24,000 --> 00:01:28,000
And besides that, besides that notification property,

29
00:01:28,000 --> 00:01:32,000
I also want to have a method for showing a notification,

30
00:01:32,000 --> 00:01:36,000
the show notification method.

31
00:01:36,000 --> 00:01:40,000
So a property which holds a function,

32
00:01:40,000 --> 00:01:41,000
which initially may be empty.

33
00:01:41,000 --> 00:01:43,000
So which isn't doing anything here

34
00:01:43,000 --> 00:01:46,000
because we'll replace it with a different function

35
00:01:46,000 --> 00:01:49,000
in a different place anyways,

36
00:01:49,000 --> 00:01:51,000
I'm just setting up my base context here

37
00:01:51,000 --> 00:01:53,000
to get better auto completion.

38
00:01:53,000 --> 00:01:58,000
So the data here is really just dummy data in the end.

39
00:01:58,000 --> 00:02:01,000
Still I wanna have a show notification function

40
00:02:01,000 --> 00:02:02,000
and then let's say also

41
00:02:02,000 --> 00:02:06,000
a hide notification function like this.

42
00:02:07,000 --> 00:02:09,000
That could be our context.

43
00:02:09,000 --> 00:02:12,000
And with that all store it in a constant,

44
00:02:12,000 --> 00:02:16,000
the notification context.

45
00:02:17,000 --> 00:02:21,000
And I'll then export this notification context here

46
00:02:21,000 --> 00:02:25,000
to make it a way level outside of this file as well.

47
00:02:25,000 --> 00:02:27,000
So that we can tap into this context

48
00:02:27,000 --> 00:02:32,000
and use this context with the use context react hook

49
00:02:32,000 --> 00:02:34,000
in our react components.

50
00:02:35,000 --> 00:02:39,000
Now you know that the context which we create here

51
00:02:39,000 --> 00:02:42,000
actually allows us to create a component,

52
00:02:42,000 --> 00:02:44,000
a provider a component which we can wrap

53
00:02:44,000 --> 00:02:48,000
around the components and their child components

54
00:02:48,000 --> 00:02:52,000
that should be able to tap into this context.

55
00:02:52,000 --> 00:02:54,000
And therefore I'll actually change this

56
00:02:54,000 --> 00:02:56,000
to an upper case character here.

57
00:02:57,000 --> 00:02:59,000
The N to make it clear that we can get component

58
00:03:00,000 --> 00:03:02,000
out of this thing here.

59
00:03:03,000 --> 00:03:06,000
Now the goal will be to wrap this overall,

60
00:03:06,000 --> 00:03:10,000
content here with our context later.

61
00:03:10,000 --> 00:03:14,000
So to wrap all these components with our context.

62
00:03:14,000 --> 00:03:18,000
However I don't just wanna provide my context like this.

63
00:03:18,000 --> 00:03:21,000
Instead I wanna create a separate component,

64
00:03:21,000 --> 00:03:24,000
which also manages all the context related state.

65
00:03:24,000 --> 00:03:28,000
So back end is notification context

66
00:03:28,000 --> 00:03:30,000
file in the store folder.

67
00:03:30,000 --> 00:03:34,000
I'll not just create a context here and export it.

68
00:03:34,000 --> 00:03:37,000
Instead I'll also create a component in here,

69
00:03:37,000 --> 00:03:41,000
the notification context provider component,

70
00:03:42,000 --> 00:03:45,000
and this component will return

71
00:03:45,000 --> 00:03:49,000
notification context.Provider.

72
00:03:49,000 --> 00:03:53,000
So this component which we can get out of this context

73
00:03:53,000 --> 00:03:57,000
wrapped around props children.

74
00:03:57,000 --> 00:04:01,000
So here I'll wrap it around props children,

75
00:04:01,000 --> 00:04:02,000
and I'm doing that so that

76
00:04:02,000 --> 00:04:06,000
we can use the notification context provider component

77
00:04:06,000 --> 00:04:09,000
to wrap it around our components,

78
00:04:09,000 --> 00:04:12,000
which will then automatically have access

79
00:04:12,000 --> 00:04:14,000
to all our context.

80
00:04:14,000 --> 00:04:17,000
Hence I'll also exports this function.

81
00:04:17,000 --> 00:04:21,000
And now it's this notification context per wider function,

82
00:04:21,000 --> 00:04:23,000
which I wanna wrap around my components,

83
00:04:23,000 --> 00:04:26,000
which should have access to this context.

84
00:04:26,000 --> 00:04:30,000
And in this case that's in the underscore app JS file.

85
00:04:30,000 --> 00:04:33,000
I wanna wrap basically all that content here

86
00:04:33,000 --> 00:04:36,000
with my context.

87
00:04:36,000 --> 00:04:38,000
So here we can wrap everything

88
00:04:38,000 --> 00:04:42,000
with notification context provider

89
00:04:42,000 --> 00:04:46,000
and make sure that you import notification context provider

90
00:04:46,000 --> 00:04:50,000
from this notification context file into store folder.

91
00:04:50,000 --> 00:04:54,000
And then wrap that around all this content,

92
00:04:54,000 --> 00:04:56,000
which means that all these components,

93
00:04:56,000 --> 00:04:58,000
which are wrapped by the provider

94
00:04:58,000 --> 00:05:02,000
will be able to utilize our context later.

95
00:05:02,000 --> 00:05:04,000
And I'm creating this separate wrapper

96
00:05:04,000 --> 00:05:08,000
because this notification context provider function here

97
00:05:08,000 --> 00:05:11,000
will not just wrap props children.

98
00:05:11,000 --> 00:05:13,000
We wouldn't need it for that,

99
00:05:13,000 --> 00:05:15,000
if that would be all it's doing,

100
00:05:15,000 --> 00:05:17,000
but this function should also manage

101
00:05:17,000 --> 00:05:20,000
all the context related state.

102
00:05:20,000 --> 00:05:23,000
So here we will work with use state

103
00:05:23,000 --> 00:05:26,000
and so on to manage the notification state

104
00:05:26,000 --> 00:05:30,000
and to create the show and hide notification functions

105
00:05:30,000 --> 00:05:32,000
inside of this component.

106
00:05:32,000 --> 00:05:35,000
And that's what we'll do as a next step.