Original subtitles

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.