Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,100 --> 00:00:04,150
Now for this course section,
2
00:00:04,150 --> 00:00:08,010
you should of course know what React Context is.
3
00:00:08,010 --> 00:00:10,610
That's a prerequisite and therefore
4
00:00:10,610 --> 00:00:11,900
I strongly recommend
5
00:00:11,900 --> 00:00:15,460
that you go through dedicated React resources
6
00:00:15,460 --> 00:00:17,300
diving into React Context
7
00:00:17,300 --> 00:00:20,460
before you continue with this section.
8
00:00:20,460 --> 00:00:22,830
And with that out of the way attached
9
00:00:22,830 --> 00:00:25,920
you'll find a notification component file
10
00:00:25,920 --> 00:00:29,670
a sip file containing this notification JS
11
00:00:29,670 --> 00:00:33,640
and this notification.module.css file.
12
00:00:33,640 --> 00:00:36,750
These two files are attached in this sip file
13
00:00:36,750 --> 00:00:39,560
and you should add them to your project
14
00:00:39,560 --> 00:00:43,320
into the UI folder in the components folder.
15
00:00:43,320 --> 00:00:46,000
That's a simple presentational component
16
00:00:46,000 --> 00:00:48,750
which will just output a title and a message
17
00:00:48,750 --> 00:00:52,100
as a notification shown at the bottom of the screen
18
00:00:52,100 --> 00:00:53,640
once we do show it.
19
00:00:53,640 --> 00:00:56,370
At the moment we have no code for showing it
20
00:00:56,370 --> 00:01:00,140
but that's about to change throughout this course section.
21
00:01:00,140 --> 00:01:02,700
Now one important note first,
22
00:01:02,700 --> 00:01:05,129
you don't have to use React Context
23
00:01:05,129 --> 00:01:07,330
for this course section.
24
00:01:07,330 --> 00:01:09,460
For giving the user some feedback
25
00:01:09,460 --> 00:01:13,660
about the current status of the ongoing HTTP request,
26
00:01:13,660 --> 00:01:16,550
you could also just use Local State
27
00:01:16,550 --> 00:01:20,040
and provide any feedback of your choice.
28
00:01:20,040 --> 00:01:23,150
My goal just is to show an overlay
29
00:01:23,150 --> 00:01:25,930
a little notification at the bottom of the screen.
30
00:01:25,930 --> 00:01:30,930
And I wanna control that globally with the context API
31
00:01:30,950 --> 00:01:33,590
so that we can trigger this notification
32
00:01:33,590 --> 00:01:35,810
and control this notification
33
00:01:35,810 --> 00:01:39,010
from anywhere in our application.
34
00:01:39,010 --> 00:01:41,060
That's my only goal here.
35
00:01:41,060 --> 00:01:44,800
Now, therefore, before we add react context
36
00:01:44,800 --> 00:01:48,430
let's see how the end result is should look like.
37
00:01:48,430 --> 00:01:52,940
Let's go to the underscore app JS file in the pages folder.
38
00:01:52,940 --> 00:01:55,730
And there we have our layout.
39
00:01:55,730 --> 00:01:59,210
We have the head section with the general head data
40
00:01:59,210 --> 00:02:01,260
and we got this component prop
41
00:02:01,260 --> 00:02:04,480
which renders the actual page content.
42
00:02:04,480 --> 00:02:05,730
Now in here,
43
00:02:05,730 --> 00:02:09,580
I also wanna output the notification component.
44
00:02:09,580 --> 00:02:12,810
And for this, we need to import notification
45
00:02:12,810 --> 00:02:15,720
from the components folder there
46
00:02:15,720 --> 00:02:20,570
from UI and the notification JS file we just added.
47
00:02:20,570 --> 00:02:21,880
I'm just adding it here so
48
00:02:21,880 --> 00:02:25,193
that you see what we will add from this section.
49
00:02:26,060 --> 00:02:30,460
This notification component takes three props
50
00:02:30,460 --> 00:02:33,230
a title, a message, and a status.
51
00:02:33,230 --> 00:02:36,760
And therefore I'll set these three props here now.
52
00:02:36,760 --> 00:02:39,540
I'll set the title to test, the message
53
00:02:39,540 --> 00:02:43,090
to this is a test, like this
54
00:02:43,090 --> 00:02:46,023
and the status to pending, for a start.
55
00:02:46,880 --> 00:02:50,240
If we now save, we have this notification element
56
00:02:50,240 --> 00:02:53,560
at the bottom, and the goal is to show this
57
00:02:53,560 --> 00:02:56,030
once we did click the register button
58
00:02:56,030 --> 00:02:58,850
and then once the request succeeded or failed
59
00:02:58,850 --> 00:03:03,850
we wanna replace it with a proper error or success variant.
60
00:03:05,060 --> 00:03:07,290
Let me show you these variants here.
61
00:03:07,290 --> 00:03:09,390
If we changed as to success
62
00:03:09,390 --> 00:03:13,020
if we change the status to success, this switches
63
00:03:13,020 --> 00:03:17,250
to this success notification with a green background
64
00:03:17,250 --> 00:03:20,710
and if on the other hand, we change it to error
65
00:03:20,710 --> 00:03:23,493
this switches to this red notification.
66
00:03:24,350 --> 00:03:26,140
So that's the notification, but
67
00:03:26,140 --> 00:03:29,080
of course it shouldn't be hard coded here.
68
00:03:29,080 --> 00:03:31,260
It shouldn't always show up.
69
00:03:31,260 --> 00:03:34,980
Instead it should only be shown when we want it
70
00:03:34,980 --> 00:03:37,790
to show up when we have an ongoing request
71
00:03:37,790 --> 00:03:41,970
or when we have a response from our request.
72
00:03:41,970 --> 00:03:45,530
And I wanna control it with the context API
73
00:03:45,530 --> 00:03:48,930
because I want to render the notification component here
74
00:03:48,930 --> 00:03:51,350
in underscore app JS,
75
00:03:51,350 --> 00:03:55,340
but I wanna trigger it from inside other components.
76
00:03:55,340 --> 00:03:56,420
For example, from
77
00:03:56,420 --> 00:04:00,000
inside that newsletter registration component,
78
00:04:00,000 --> 00:04:04,140
where we also send this HTTP request.
79
00:04:04,140 --> 00:04:06,150
And because that's the case,
80
00:04:06,150 --> 00:04:08,580
because it is components should be triggered
81
00:04:08,580 --> 00:04:11,880
from totally different components than the component
82
00:04:11,880 --> 00:04:13,210
it's being rendered in,
83
00:04:13,210 --> 00:04:16,440
I wanna use app wide state management.
84
00:04:16,440 --> 00:04:18,930
I wanna use the context API
85
00:04:18,930 --> 00:04:21,860
to a wide pointless prop drilling
86
00:04:21,860 --> 00:04:26,490
and long prop chains across multiple components.
87
00:04:26,490 --> 00:04:30,283
And therefore let's now start using the context API.
6806
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.