Were you successful?
Let's implements this together.
For this in the input folder in the components folder,
we got this new-comment.js file,
where we have this form.
And that talks to the comments.js file
where we send the request for adding a comment.
And that's the part where I wanna trigger my notification
in basically the same way as I did it
for the newsletter signup.
So therefore, what we need to here,
is we need to useContext by importing that from React,
and then of course import the NotificationContext from
going up, going up, store, notification-context,
and tapping into that NotificationContext
with help of useContext.
So that we get our notificationCtx here as well.
And then I really wanna do the same thing
as I did for the newsletter registration.
So I'll quickly copy the code from there, actually.
When we get started, right before we call fetch,
I wanna set the pending notification.
So with that copied in comments.js,
here in the addCommentHandler,
right before fetch,
I'll call notification context showNotification,
and I'll just change the text.
Here I'll then say 'sending comment,'
and as a message, maybe,
'Your comment
is currently being stored
into a database,'
or anything like this.
And the status is pending.
Now, in this last then block, we know that things worked.
So here, instead of console logging,
I wanna show another notification with a status of 'success'
where we say 'success' as a title
and as a text we can say, 'your comment
was saved.'
Something like this.
Now it would also again be good to have error handling,
and there we can also utilize the same logic
as for the newsletter registration.
So this if response.ok check
and this nested promise for throwing an error.
I'll copy that code from the newsletter registration
and add that here as well.
Now, that means that we can now add a catch block here
at the end,
where we catch any potential errors thrown
from inside this promise chain.
And there, we then wanna say 'error.'
So we wanna show a notification with a text of 'error,'
and then show that error message here
or some fallback where we say 'something went wrong,'
or anything like this.
And the status of course should be 'error.'
And that's already it.
That's the first part,
and it's really the same as we did it
in the newsletter registration.
Of course, therefore, you could also refactor this code,
look into using a custom hook, for example,
things like that.
But I will go with this more explicit code here,
since I think that also hopefully makes it a bit easier
to understand what each component does.
So therefore, if we now give this a try,
if I click show comments,
let's test this.
If I try to submit something invalid,
I still get this front end validation,
and if I now do enter some data here,
this is a test, if I click submit,
I seem to have a typo if I look at this
the way it's written.
So, yeah.
Let me fix this.
Notification context
instead of 'noti-fiction' context.
So let's get rid of that typo here.
And I guess I have that typo in the newsletter too.
Yes I have.
That should be the notification context here as well,
and I also wanna get rid of that typo in all those places.
Since I have that typo there in all the places, it worked,
but of course I don't want to have that typo anywhere.
So I fixed it in both files
so that this is notificationCtx now,
and with that if we test this again,
we see the pending state, and the success state.
And then after three seconds, it's removed.
And if we send multiple comments, this also works.
So now I added a couple of comments,
and hence, if we hide and show them, they are loaded again.
And of course,
we could also look into doing this differently
so that we show and add a comment right away,
but that's just not the focus here.
Instead I now wanna work on that loading state.
Because if I do show them,
the comments make take a while to show up.
And it would be great
if we could show some loading text whilst that happens.
Which means that I don't wanna work
with my notification context there,
but really just show a little loading text
in this component here.
Now it's the comments.js file where we fetch comments here
with useEffect,
and that's where I wanna manage my, well, loading state.
Hence, I'll add a new local state here,
because not everything has to be a global state.
If a state really only affects a single component,
there is no need to use a global state.
And then here, I'll set this to false initially,
because that is my
isFetchingComments state
with the setIsFetchingComments updating function.
And here, in useEffect, if we are now showing comments,
I'll setIsFetchingComments to true,
because we are now loading,
and if we're done eventually here,
I'll setIsFetching to false.
We could also add error handling here.
Feel free to do this as a bonus task.
I will just focus on showing a loading state for now.
So now, with that, we're managing this state.
We can now use this state
to (indistinct) show the comment list
if we have our comments,
or to show some loading backup text.
So here, I will tweak this,
and I'll only show the comment list
if we are in showComments mode and we're not fetching,
so not isFetchingComments,
because else, if we are in showComments mode,
but we are fetching,
then I wanna show this loading fallback text here.
That's how we could implement this,
and if we do it like this,
we see that if I click show comments,
we see loading initially
before the comments show up.
And that's exactly the behavior we want here.
Again, there is more you can do.
You can tweak this however you want,
but that was the task here.
And most importantly, that was how you can use context
in a Next.js application.