Now this notification is there,
and that's great.
But it would be good if, eventually,
it would disappear.
And that's something which we can implement.
And I want to make sure that it can be removed
in two different ways.
We can click it, and then it should be removed instantly.
Alternatively, there should be a timer
which removes it after three seconds
if it's a success or error notification.
Pending notifications
should not be removed automatically, let's say.
Now to implement this, we can dive
into the notification component
and start with the click case, simply by adding onClick
and doing something when it is clicked.
Now the question is what we wanna do if it's clicked,
and I would say we wanna call hideNotification
on our context.
So I will just use context inside of this component.
There's nothing that prevents us from doing that.
Just because we show this component,
because of context,
does not mean that we can't use context in there.
So I'll use the useContext hook,
which you should import from React,
and I'll import the NotificationContext
from the store folder and there,
notification-context file,
to establish this connection here.
Then here we have the notificationContext object,
and now we can use that to hide the notification.
Because in our context, there is this
hideNotification function which we call,
which we can call, which eventually
will call this function here.
Now thereafter, what we can do
in the notification component,
is we can just bind onClick to notificationCtx.
So to this notificationContext object
I'm getting from my context here,
and then point at the hideNotification function.
Don't execute it here, so no parentheses,
but instead let React execute it for you
when that click occurs.
That's what we do by pointing at it here.
And then with that, if we save this,
if I click the notification, it disappears.
Shows up again, disappears.
So that's working.
Now it should also disappear automatically.
And for this, we can go back into the notificationContext.
And there we might wanna set a timer
whenever the notification starts showing up.
And that is a perfect-use case for useEffect,
because that allows us to listen to changes
to the notification object, and then act
when it does change.
So here I'll then import useEffect,
and add a new useEffect call here.
And at the useEffect function enter the dependency array.
Now in the useEffect function, I wanna check
if activeNotification is set,
and, important,
if activeNotification status
is equal to success
or if activeNotification status is equal to error.
And I'll wrap that in parentheses
so that the first condition must always be met
and then either of the two other conditions.
So if we have an activeNotification,
then we also perform those checks
to make it into this IF block
if we have an activeNotification with a status
of success and error.
If we have no activeNotification,
or if the status is pending,
we don't do anything.
Now if we do have this kind of notification though,
then I wanna set a timer that will eventually
remove the notification though.
So then here I'll set a timer with setTimeout,
which will eventually do something.
And it should do that after three seconds roughly.
And what it should do, is that it should call
setActiveNotification and set this to null.
Or, to be precise,
it should call hideNotificationHandler.
We could, of course, also call that function.
But I'll just set the activeNotification to null here.
Now I'll return here, I'll return that cleanup function,
which useEffect accepts, to clear that timer,
so that timer, which has stored this constant,
if useEffect reruns before the timer went off,
so that we don't have multiple ongoing timers
at the same time.
So here I'm utilizing this cleanup function of useEffect.
All that code here is still in this IF block, though.
If we're not making it in there, useEffect does nothing.
Now since we are relying on the activeNotification here,
and since we want to rerun this effect,
whenever the activeNotification changes,
I'll add activeNotification as a dependency here.
And with this implemented,
it should disappear automatically.
If I do register, we see pending, and then success,
and after three seconds it disappears automatically.
We also don't have any errors here,
except for that 500 error from earlier.
So that is working.
And that is how we use this notification component
with React context for app-wide state management
and for giving the user some feedback
about the sign-up process.
Now I got a challenge for you.
We also have this comments area,
where the user should get some feedback.
And here, I want you to work on that.
When a new comment is added, so when we click submit here,
I want you to make sure
that we also show this notification
with pending, error, and success.
And, as a bonus task, I want you to show some loading text
whilst we're waiting for the comments to be loaded.
So there you should not use the notification,
but just some loading text whilst we're waiting for that.
That's my challenge for you, a little exercise for you.
In the next lecture, we're going to implement that together.