1
00:00:02,000 --> 00:00:03,000
Were you successful?

2
00:00:03,000 --> 00:00:06,000
Let's implements this together.

3
00:00:06,000 --> 00:00:10,000
For this in the input folder in the components folder,

4
00:00:10,000 --> 00:00:13,000
we got this new-comment.js file,

5
00:00:13,000 --> 00:00:14,000
where we have this form.

6
00:00:14,000 --> 00:00:17,000
And that talks to the comments.js file

7
00:00:17,000 --> 00:00:20,000
where we send the request for adding a comment.

8
00:00:20,000 --> 00:00:25,000
And that's the part where I wanna trigger my notification

9
00:00:25,000 --> 00:00:27,000
in basically the same way as I did it

10
00:00:27,000 --> 00:00:29,000
for the newsletter signup.

11
00:00:29,000 --> 00:00:31,000
So therefore, what we need to here,

12
00:00:31,000 --> 00:00:36,000
is we need to useContext by importing that from React,

13
00:00:38,000 --> 00:00:42,000
and then of course import the NotificationContext from

14
00:00:43,000 --> 00:00:48,000
going up, going up, store, notification-context,

15
00:00:48,000 --> 00:00:51,000
and tapping into that NotificationContext

16
00:00:51,000 --> 00:00:53,000
with help of useContext.

17
00:00:54,000 --> 00:00:58,000
So that we get our notificationCtx here as well.

18
00:00:59,000 --> 00:01:02,000
And then I really wanna do the same thing

19
00:01:02,000 --> 00:01:05,000
as I did for the newsletter registration.

20
00:01:05,000 --> 00:01:08,000
So I'll quickly copy the code from there, actually.

21
00:01:08,000 --> 00:01:11,000
When we get started, right before we call fetch,

22
00:01:11,000 --> 00:01:14,000
I wanna set the pending notification.

23
00:01:14,000 --> 00:01:16,000
So with that copied in comments.js,

24
00:01:16,000 --> 00:01:19,000
here in the addCommentHandler,

25
00:01:19,000 --> 00:01:21,000
right before fetch,

26
00:01:21,000 --> 00:01:25,000
I'll call notification context showNotification,

27
00:01:25,000 --> 00:01:26,000
and I'll just change the text.

28
00:01:26,000 --> 00:01:30,000
Here I'll then say 'sending comment,'

29
00:01:32,000 --> 00:01:34,000
and as a message, maybe,

30
00:01:35,000 --> 00:01:37,000
'Your comment

31
00:01:39,000 --> 00:01:41,000
is currently being stored

32
00:01:43,000 --> 00:01:44,000
into a database,'

33
00:01:44,000 --> 00:01:45,000
or anything like this.

34
00:01:45,000 --> 00:01:47,000
And the status is pending.

35
00:01:48,000 --> 00:01:52,000
Now, in this last then block, we know that things worked.

36
00:01:52,000 --> 00:01:55,000
So here, instead of console logging,

37
00:01:55,000 --> 00:01:59,000
I wanna show another notification with a status of 'success'

38
00:02:00,000 --> 00:02:04,000
where we say 'success' as a title

39
00:02:04,000 --> 00:02:07,000
and as a text we can say, 'your comment

40
00:02:08,000 --> 00:02:10,000
was saved.'

41
00:02:10,000 --> 00:02:11,000
Something like this.

42
00:02:12,000 --> 00:02:15,000
Now it would also again be good to have error handling,

43
00:02:15,000 --> 00:02:18,000
and there we can also utilize the same logic

44
00:02:18,000 --> 00:02:21,000
as for the newsletter registration.

45
00:02:21,000 --> 00:02:24,000
So this if response.ok check

46
00:02:24,000 --> 00:02:27,000
and this nested promise for throwing an error.

47
00:02:27,000 --> 00:02:31,000
I'll copy that code from the newsletter registration

48
00:02:31,000 --> 00:02:33,000
and add that here as well.

49
00:02:34,000 --> 00:02:37,000
Now, that means that we can now add a catch block here

50
00:02:37,000 --> 00:02:38,000
at the end,

51
00:02:38,000 --> 00:02:41,000
where we catch any potential errors thrown

52
00:02:41,000 --> 00:02:43,000
from inside this promise chain.

53
00:02:43,000 --> 00:02:46,000
And there, we then wanna say 'error.'

54
00:02:46,000 --> 00:02:50,000
So we wanna show a notification with a text of 'error,'

55
00:02:50,000 --> 00:02:53,000
and then show that error message here

56
00:02:53,000 --> 00:02:57,000
or some fallback where we say 'something went wrong,'

57
00:02:57,000 --> 00:02:59,000
or anything like this.

58
00:02:59,000 --> 00:03:01,000
And the status of course should be 'error.'

59
00:03:02,000 --> 00:03:04,000
And that's already it.

60
00:03:04,000 --> 00:03:05,000
That's the first part,

61
00:03:05,000 --> 00:03:07,000
and it's really the same as we did it

62
00:03:07,000 --> 00:03:10,000
in the newsletter registration.

63
00:03:10,000 --> 00:03:13,000
Of course, therefore, you could also refactor this code,

64
00:03:13,000 --> 00:03:17,000
look into using a custom hook, for example,

65
00:03:17,000 --> 00:03:18,000
things like that.

66
00:03:18,000 --> 00:03:21,000
But I will go with this more explicit code here,

67
00:03:21,000 --> 00:03:24,000
since I think that also hopefully makes it a bit easier

68
00:03:24,000 --> 00:03:27,000
to understand what each component does.

69
00:03:28,000 --> 00:03:29,000
So therefore, if we now give this a try,

70
00:03:29,000 --> 00:03:31,000
if I click show comments,

71
00:03:31,000 --> 00:03:32,000
let's test this.

72
00:03:33,000 --> 00:03:35,000
If I try to submit something invalid,

73
00:03:35,000 --> 00:03:38,000
I still get this front end validation,

74
00:03:38,000 --> 00:03:41,000
and if I now do enter some data here,

75
00:03:42,000 --> 00:03:46,000
this is a test, if I click submit,

76
00:03:46,000 --> 00:03:48,000
I seem to have a typo if I look at this

77
00:03:48,000 --> 00:03:49,000
the way it's written.

78
00:03:49,000 --> 00:03:52,000
So, yeah.

79
00:03:52,000 --> 00:03:54,000
Let me fix this.

80
00:03:54,000 --> 00:03:55,000
Notification context

81
00:03:57,000 --> 00:04:00,000
instead of 'noti-fiction' context.

82
00:04:00,000 --> 00:04:02,000
So let's get rid of that typo here.

83
00:04:03,000 --> 00:04:06,000
And I guess I have that typo in the newsletter too.

84
00:04:06,000 --> 00:04:08,000
Yes I have.

85
00:04:08,000 --> 00:04:11,000
That should be the notification context here as well,

86
00:04:11,000 --> 00:04:15,000
and I also wanna get rid of that typo in all those places.

87
00:04:15,000 --> 00:04:18,000
Since I have that typo there in all the places, it worked,

88
00:04:18,000 --> 00:04:22,000
but of course I don't want to have that typo anywhere.

89
00:04:22,000 --> 00:04:24,000
So I fixed it in both files

90
00:04:24,000 --> 00:04:27,000
so that this is notificationCtx now,

91
00:04:27,000 --> 00:04:29,000
and with that if we test this again,

92
00:04:29,000 --> 00:04:32,000
we see the pending state, and the success state.

93
00:04:32,000 --> 00:04:35,000
And then after three seconds, it's removed.

94
00:04:35,000 --> 00:04:40,000
And if we send multiple comments, this also works.

95
00:04:41,000 --> 00:04:42,000
So now I added a couple of comments,

96
00:04:42,000 --> 00:04:45,000
and hence, if we hide and show them, they are loaded again.

97
00:04:45,000 --> 00:04:46,000
And of course,

98
00:04:46,000 --> 00:04:49,000
we could also look into doing this differently

99
00:04:49,000 --> 00:04:52,000
so that we show and add a comment right away,

100
00:04:52,000 --> 00:04:54,000
but that's just not the focus here.

101
00:04:54,000 --> 00:04:57,000
Instead I now wanna work on that loading state.

102
00:04:57,000 --> 00:04:59,000
Because if I do show them,

103
00:04:59,000 --> 00:05:02,000
the comments make take a while to show up.

104
00:05:02,000 --> 00:05:03,000
And it would be great

105
00:05:03,000 --> 00:05:07,000
if we could show some loading text whilst that happens.

106
00:05:07,000 --> 00:05:09,000
Which means that I don't wanna work

107
00:05:09,000 --> 00:05:12,000
with my notification context there,

108
00:05:12,000 --> 00:05:15,000
but really just show a little loading text

109
00:05:15,000 --> 00:05:17,000
in this component here.

110
00:05:17,000 --> 00:05:21,000
Now it's the comments.js file where we fetch comments here

111
00:05:21,000 --> 00:05:23,000
with useEffect,

112
00:05:23,000 --> 00:05:27,000
and that's where I wanna manage my, well, loading state.

113
00:05:27,000 --> 00:05:30,000
Hence, I'll add a new local state here,

114
00:05:30,000 --> 00:05:33,000
because not everything has to be a global state.

115
00:05:33,000 --> 00:05:37,000
If a state really only affects a single component,

116
00:05:37,000 --> 00:05:39,000
there is no need to use a global state.

117
00:05:39,000 --> 00:05:43,000
And then here, I'll set this to false initially,

118
00:05:43,000 --> 00:05:45,000
because that is my

119
00:05:45,000 --> 00:05:48,000
isFetchingComments state

120
00:05:48,000 --> 00:05:53,000
with the setIsFetchingComments updating function.

121
00:05:54,000 --> 00:05:58,000
And here, in useEffect, if we are now showing comments,

122
00:05:58,000 --> 00:06:01,000
I'll setIsFetchingComments to true,

123
00:06:01,000 --> 00:06:03,000
because we are now loading,

124
00:06:03,000 --> 00:06:05,000
and if we're done eventually here,

125
00:06:05,000 --> 00:06:08,000
I'll setIsFetching to false.

126
00:06:08,000 --> 00:06:10,000
We could also add error handling here.

127
00:06:10,000 --> 00:06:13,000
Feel free to do this as a bonus task.

128
00:06:13,000 --> 00:06:17,000
I will just focus on showing a loading state for now.

129
00:06:17,000 --> 00:06:21,000
So now, with that, we're managing this state.

130
00:06:21,000 --> 00:06:23,000
We can now use this state

131
00:06:23,000 --> 00:06:25,000
to (indistinct) show the comment list

132
00:06:25,000 --> 00:06:27,000
if we have our comments,

133
00:06:27,000 --> 00:06:31,000
or to show some loading backup text.

134
00:06:32,000 --> 00:06:34,000
So here, I will tweak this,

135
00:06:34,000 --> 00:06:36,000
and I'll only show the comment list

136
00:06:36,000 --> 00:06:41,000
if we are in showComments mode and we're not fetching,

137
00:06:42,000 --> 00:06:44,000
so not isFetchingComments,

138
00:06:44,000 --> 00:06:47,000
because else, if we are in showComments mode,

139
00:06:47,000 --> 00:06:50,000
but we are fetching,

140
00:06:50,000 --> 00:06:54,000
then I wanna show this loading fallback text here.

141
00:06:55,000 --> 00:06:57,000
That's how we could implement this,

142
00:06:57,000 --> 00:06:59,000
and if we do it like this,

143
00:06:59,000 --> 00:07:00,000
we see that if I click show comments,

144
00:07:00,000 --> 00:07:02,000
we see loading initially

145
00:07:02,000 --> 00:07:04,000
before the comments show up.

146
00:07:04,000 --> 00:07:08,000
And that's exactly the behavior we want here.

147
00:07:08,000 --> 00:07:10,000
Again, there is more you can do.

148
00:07:10,000 --> 00:07:12,000
You can tweak this however you want,

149
00:07:12,000 --> 00:07:14,000
but that was the task here.

150
00:07:14,000 --> 00:07:17,000
And most importantly, that was how you can use context

151
00:07:17,000 --> 00:07:20,000
in a Next.js application.