All language subtitles for 006 Example_ Triggering & Showing Notifications_Downloadly.ir_en

Now, let's start

with the newsletter-registration.

For this we have the newsletter-registration component

in the input folder

and there we're sending this HTTP request.

Now I wanna show the pending notification

whilst we are sending and waiting for the response.

I wanna show the success notification

if sending succeeded,

and I wanna show the error notification if sending failed.

Now, to make all of that happen

in the NewsletterRegistration component

we need to connect to context.

And we do that with the useContext hook, as you learned.

So here we then call useContext

and we simply import the NotificationContext.

So again, not the provider, but the context itself

from our store and there to notification-context file.

And then we establish this connection

as we did it before a couple of minutes ago.

So here we then have our notificationContext.

But here I'm not interested in the notification,

here instead, I wanna call a function

to show the notification.

For example, here in the registrationHandler

when we start sending this request.

Right before we do send it, I want to show a notification

that is in the pending status

that says something like signing up.

So for this, we can use the notificationContext object

and call showNotification

and pass a object with the notification data.

And here all set a title of Signing up,

a message of Registering for newsletter, something like this

and set the status here to pending, because we are pending.

Now, if we are successful,

so in this last then block here

then I want to set the notification to success.

So in here I'll actually call showNotification again

but then say, "Success."

As a title and as a text here,

we can say, "Successfully registered for newsletter."

Something like this.

And the status is success instead of pending.

Now, in case of an error

I also wanna show the appropriate notification

and that's why I will add a catch method here

where we get a potential error

and here I also wanna show a notification

but the status will be error, the title will be Error

and the message could be retrieved from the error.

Here we could check if we have a message property

which we wanna use,

and alternatively just say, "Something went wrong."

So we show the error message if we have it,

or we showed us fallback

if there is no message attached to the error.

Now, one problem we'll have here is

that the fetch function works such that error HTTP codes.

So 400 and 500 status codes

will not cost is promise to fail.

So we will not make it into this catch block

if we have an error status code.

And I would like to make it

into this catch block if that's case.

So to make sure that this is how everything works

I will actually dive into this then block

and check if response.ok.

This is the extra field with this response object has.

And if that's the case

I know that we have a success status code.

Then I wanna return response.jason.

If that's not okay, though, if we make it past this if check

then I know that we have an error.

In this case, I also wanna get my response data

but I also want to throw an error.

I wanna reject that promise by throwing an error

inside of the then block.

And for data here, when using then catch

instead of async await, we'll need a nest that promise

because I'll need to get access to the response object

while it's getting access

to the past data at the same time.

So here all then called response.jason as well

but I'll not return it.

But instead here in the then block,

I noted we're already in the error case

because we're past this if check,

here I will then throw a new Error with a message

which I get from my data.

Here I'll check if I got a message in my response

which I got back from the server

and I'll use stat as an error message if I have one

otherwise I'll set up fallback here as well,

"Something went wrong."

And now you're all returned,

this promise chain, this nest of promise chain

which will throw an error if things go wrong.

And this will then cause the outer promise chain,

the main promise chain started by fetch to reject as well

with that error passed along so that'd be make it

into this catch block if we do have an error.

So with all that implemented, we can try if this works.

If we save everything and I reload,

if I sign up for my newsletter here and I click register

we see the signing up notification

and it changes to success.

It never disappears, we'll work on this later,

for the moment it's always there.

Now let's test it with an error,

and for this all dive into my db-util.js file

and break my mongodb credentials again,

so that connecting to the database

and inserting data will fail.

If I do that and I try the same request again

we start with pending, but then we go to the error case

and we see that error message at the bottom.

Now it's of course up to you

if you wanna show that error message here, I'm doing it

and everything works the way it should work here.

And with that all change the credentials back

to work and credentials and we're good.

Now of course it would also be good

if the notification could be removed

and if it would disappear eventually.