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.