Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,180 --> 00:00:03,650
Were you successful?
2
00:00:03,650 --> 00:00:06,130
Let's implements this together.
3
00:00:06,130 --> 00:00:10,020
For this in the input folder in the components folder,
4
00:00:10,020 --> 00:00:13,290
we got this new-comment.js file,
5
00:00:13,290 --> 00:00:14,470
where we have this form.
6
00:00:14,470 --> 00:00:17,600
And that talks to the comments.js file
7
00:00:17,600 --> 00:00:20,950
where we send the request for adding a comment.
8
00:00:20,950 --> 00:00:25,370
And that's the part where I wanna trigger my notification
9
00:00:25,370 --> 00:00:27,640
in basically the same way as I did it
10
00:00:27,640 --> 00:00:29,390
for the newsletter signup.
11
00:00:29,390 --> 00:00:31,380
So therefore, what we need to here,
12
00:00:31,380 --> 00:00:36,380
is we need to useContext by importing that from React,
13
00:00:38,940 --> 00:00:42,860
and then of course import the NotificationContext from
14
00:00:43,830 --> 00:00:48,710
going up, going up, store, notification-context,
15
00:00:48,710 --> 00:00:51,740
and tapping into that NotificationContext
16
00:00:51,740 --> 00:00:53,530
with help of useContext.
17
00:00:54,394 --> 00:00:58,300
So that we get our notificationCtx here as well.
18
00:00:59,250 --> 00:01:02,040
And then I really wanna do the same thing
19
00:01:02,040 --> 00:01:05,099
as I did for the newsletter registration.
20
00:01:05,099 --> 00:01:08,050
So I'll quickly copy the code from there, actually.
21
00:01:08,050 --> 00:01:11,210
When we get started, right before we call fetch,
22
00:01:11,210 --> 00:01:14,580
I wanna set the pending notification.
23
00:01:14,580 --> 00:01:16,980
So with that copied in comments.js,
24
00:01:16,980 --> 00:01:19,250
here in the addCommentHandler,
25
00:01:19,250 --> 00:01:21,170
right before fetch,
26
00:01:21,170 --> 00:01:25,260
I'll call notification context showNotification,
27
00:01:25,260 --> 00:01:26,920
and I'll just change the text.
28
00:01:26,920 --> 00:01:30,817
Here I'll then say 'sending comment,'
29
00:01:32,800 --> 00:01:34,223
and as a message, maybe,
30
00:01:35,210 --> 00:01:37,280
'Your comment
31
00:01:39,140 --> 00:01:41,970
is currently being stored
32
00:01:43,280 --> 00:01:44,420
into a database,'
33
00:01:44,420 --> 00:01:45,680
or anything like this.
34
00:01:45,680 --> 00:01:47,253
And the status is pending.
35
00:01:48,680 --> 00:01:52,560
Now, in this last then block, we know that things worked.
36
00:01:52,560 --> 00:01:55,070
So here, instead of console logging,
37
00:01:55,070 --> 00:01:59,853
I wanna show another notification with a status of 'success'
38
00:02:00,990 --> 00:02:04,480
where we say 'success' as a title
39
00:02:04,480 --> 00:02:07,480
and as a text we can say, 'your comment
40
00:02:08,770 --> 00:02:10,160
was saved.'
41
00:02:10,160 --> 00:02:11,223
Something like this.
42
00:02:12,320 --> 00:02:15,730
Now it would also again be good to have error handling,
43
00:02:15,730 --> 00:02:18,410
and there we can also utilize the same logic
44
00:02:18,410 --> 00:02:21,160
as for the newsletter registration.
45
00:02:21,160 --> 00:02:24,060
So this if response.ok check
46
00:02:24,060 --> 00:02:27,840
and this nested promise for throwing an error.
47
00:02:27,840 --> 00:02:31,070
I'll copy that code from the newsletter registration
48
00:02:31,070 --> 00:02:33,193
and add that here as well.
49
00:02:34,330 --> 00:02:37,570
Now, that means that we can now add a catch block here
50
00:02:37,570 --> 00:02:38,740
at the end,
51
00:02:38,740 --> 00:02:41,510
where we catch any potential errors thrown
52
00:02:41,510 --> 00:02:43,890
from inside this promise chain.
53
00:02:43,890 --> 00:02:46,680
And there, we then wanna say 'error.'
54
00:02:46,680 --> 00:02:50,035
So we wanna show a notification with a text of 'error,'
55
00:02:50,035 --> 00:02:53,220
and then show that error message here
56
00:02:53,220 --> 00:02:57,320
or some fallback where we say 'something went wrong,'
57
00:02:57,320 --> 00:02:59,140
or anything like this.
58
00:02:59,140 --> 00:03:01,720
And the status of course should be 'error.'
59
00:03:02,900 --> 00:03:04,260
And that's already it.
60
00:03:04,260 --> 00:03:05,590
That's the first part,
61
00:03:05,590 --> 00:03:07,690
and it's really the same as we did it
62
00:03:07,690 --> 00:03:10,290
in the newsletter registration.
63
00:03:10,290 --> 00:03:13,710
Of course, therefore, you could also refactor this code,
64
00:03:13,710 --> 00:03:17,020
look into using a custom hook, for example,
65
00:03:17,020 --> 00:03:18,130
things like that.
66
00:03:18,130 --> 00:03:21,240
But I will go with this more explicit code here,
67
00:03:21,240 --> 00:03:24,350
since I think that also hopefully makes it a bit easier
68
00:03:24,350 --> 00:03:27,223
to understand what each component does.
69
00:03:28,240 --> 00:03:29,840
So therefore, if we now give this a try,
70
00:03:29,840 --> 00:03:31,770
if I click show comments,
71
00:03:31,770 --> 00:03:32,883
let's test this.
72
00:03:33,870 --> 00:03:35,760
If I try to submit something invalid,
73
00:03:35,760 --> 00:03:38,340
I still get this front end validation,
74
00:03:38,340 --> 00:03:41,393
and if I now do enter some data here,
75
00:03:42,230 --> 00:03:46,020
this is a test, if I click submit,
76
00:03:46,020 --> 00:03:48,360
I seem to have a typo if I look at this
77
00:03:48,360 --> 00:03:49,560
the way it's written.
78
00:03:49,560 --> 00:03:52,130
So, yeah.
79
00:03:52,130 --> 00:03:54,140
Let me fix this.
80
00:03:54,140 --> 00:03:55,890
Notification context
81
00:03:57,690 --> 00:04:00,410
instead of 'noti-fiction' context.
82
00:04:00,410 --> 00:04:02,713
So let's get rid of that typo here.
83
00:04:03,570 --> 00:04:06,870
And I guess I have that typo in the newsletter too.
84
00:04:06,870 --> 00:04:08,180
Yes I have.
85
00:04:08,180 --> 00:04:11,200
That should be the notification context here as well,
86
00:04:11,200 --> 00:04:15,260
and I also wanna get rid of that typo in all those places.
87
00:04:15,260 --> 00:04:18,930
Since I have that typo there in all the places, it worked,
88
00:04:18,930 --> 00:04:22,440
but of course I don't want to have that typo anywhere.
89
00:04:22,440 --> 00:04:24,340
So I fixed it in both files
90
00:04:24,340 --> 00:04:27,880
so that this is notificationCtx now,
91
00:04:27,880 --> 00:04:29,640
and with that if we test this again,
92
00:04:29,640 --> 00:04:32,520
we see the pending state, and the success state.
93
00:04:32,520 --> 00:04:35,690
And then after three seconds, it's removed.
94
00:04:35,690 --> 00:04:40,690
And if we send multiple comments, this also works.
95
00:04:41,010 --> 00:04:42,580
So now I added a couple of comments,
96
00:04:42,580 --> 00:04:45,870
and hence, if we hide and show them, they are loaded again.
97
00:04:45,870 --> 00:04:46,703
And of course,
98
00:04:46,703 --> 00:04:49,540
we could also look into doing this differently
99
00:04:49,540 --> 00:04:52,000
so that we show and add a comment right away,
100
00:04:52,000 --> 00:04:54,500
but that's just not the focus here.
101
00:04:54,500 --> 00:04:57,670
Instead I now wanna work on that loading state.
102
00:04:57,670 --> 00:04:59,290
Because if I do show them,
103
00:04:59,290 --> 00:05:02,440
the comments make take a while to show up.
104
00:05:02,440 --> 00:05:03,680
And it would be great
105
00:05:03,680 --> 00:05:07,760
if we could show some loading text whilst that happens.
106
00:05:07,760 --> 00:05:09,610
Which means that I don't wanna work
107
00:05:09,610 --> 00:05:12,130
with my notification context there,
108
00:05:12,130 --> 00:05:15,380
but really just show a little loading text
109
00:05:15,380 --> 00:05:17,780
in this component here.
110
00:05:17,780 --> 00:05:21,730
Now it's the comments.js file where we fetch comments here
111
00:05:21,730 --> 00:05:23,240
with useEffect,
112
00:05:23,240 --> 00:05:27,650
and that's where I wanna manage my, well, loading state.
113
00:05:27,650 --> 00:05:30,910
Hence, I'll add a new local state here,
114
00:05:30,910 --> 00:05:33,710
because not everything has to be a global state.
115
00:05:33,710 --> 00:05:37,060
If a state really only affects a single component,
116
00:05:37,060 --> 00:05:39,970
there is no need to use a global state.
117
00:05:39,970 --> 00:05:43,370
And then here, I'll set this to false initially,
118
00:05:43,370 --> 00:05:45,649
because that is my
119
00:05:45,649 --> 00:05:48,840
isFetchingComments state
120
00:05:48,840 --> 00:05:53,333
with the setIsFetchingComments updating function.
121
00:05:54,520 --> 00:05:58,480
And here, in useEffect, if we are now showing comments,
122
00:05:58,480 --> 00:06:01,290
I'll setIsFetchingComments to true,
123
00:06:01,290 --> 00:06:03,450
because we are now loading,
124
00:06:03,450 --> 00:06:05,807
and if we're done eventually here,
125
00:06:05,807 --> 00:06:08,420
I'll setIsFetching to false.
126
00:06:08,420 --> 00:06:10,970
We could also add error handling here.
127
00:06:10,970 --> 00:06:13,430
Feel free to do this as a bonus task.
128
00:06:13,430 --> 00:06:17,860
I will just focus on showing a loading state for now.
129
00:06:17,860 --> 00:06:21,360
So now, with that, we're managing this state.
130
00:06:21,360 --> 00:06:23,270
We can now use this state
131
00:06:23,270 --> 00:06:25,560
to (indistinct) show the comment list
132
00:06:25,560 --> 00:06:27,280
if we have our comments,
133
00:06:27,280 --> 00:06:31,793
or to show some loading backup text.
134
00:06:32,980 --> 00:06:34,730
So here, I will tweak this,
135
00:06:34,730 --> 00:06:36,840
and I'll only show the comment list
136
00:06:36,840 --> 00:06:41,840
if we are in showComments mode and we're not fetching,
137
00:06:42,440 --> 00:06:44,860
so not isFetchingComments,
138
00:06:44,860 --> 00:06:47,870
because else, if we are in showComments mode,
139
00:06:47,870 --> 00:06:50,080
but we are fetching,
140
00:06:50,080 --> 00:06:54,453
then I wanna show this loading fallback text here.
141
00:06:55,500 --> 00:06:57,220
That's how we could implement this,
142
00:06:57,220 --> 00:06:59,070
and if we do it like this,
143
00:06:59,070 --> 00:07:00,870
we see that if I click show comments,
144
00:07:00,870 --> 00:07:02,310
we see loading initially
145
00:07:02,310 --> 00:07:04,590
before the comments show up.
146
00:07:04,590 --> 00:07:08,130
And that's exactly the behavior we want here.
147
00:07:08,130 --> 00:07:10,100
Again, there is more you can do.
148
00:07:10,100 --> 00:07:12,120
You can tweak this however you want,
149
00:07:12,120 --> 00:07:14,070
but that was the task here.
150
00:07:14,070 --> 00:07:17,910
And most importantly, that was how you can use context
151
00:07:17,910 --> 00:07:20,183
in a Next.js application.
11474
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.