All language subtitles for 007 Example_ Removing Notifications (Automatically)_Downloadly.ir_en

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.