All language subtitles for 004 Adding Context State_Downloadly.ir_en

So, in this

NotificationContextProvider component,

I wonna manage the state,

which is then distributed through context

to the various stakeholders,

the various components that are interested in that state.

And hence, I'll start by creating an useState.

And that is the state that stores the notification

that should be shown, if any.

So here we can have the activeNotification,

and a setActiveNotification function.

And initially, that's undefined because initially,

I have no active notification.

But then I'll add two functions,

the showNotificationHandler function,

and the hideNotificationHandler function.

These are the two functions I'll add here.

In the showNotificationHandler,

I wonna set my active notification

and I do expect that I get information

about the notification that should be shown

as a parameter here.

So here, I'll expect to get my notification data.

And then I'll set my active notification to an object

where the title is notificationData.title,

where the message is notificationData.message,

and where the status is notificationData.status.

And since these objects are exactly equal,

we can of course, take a shortcut

and just set the active notification

to that notification data we're getting here.

To get correct auto completion,

I'll then also update my showNotification function up there,

which will soon use

and expect notification data there as well.

Again, we're not doing anything with it there,

but this will help us with IDE auto completion later.

The actual function is defined here

and we'll connect it to the context soon.

Now, in hideNotificationHandler,

I wonna set my active notification to null.

I wonna reset it and get rid of it.

Now, the goal is to bundle my notification data

and pointer set these functions together into one object,

which we can then distribute as context

to the other components in the app.

So, I'll create a new constant here, my context.

And that's our object,

which now has the structure defined up here

for this initial context.

So here, I then wonna have a notification key

and point at the activeNotification state here as a value.

I'll add a showNotification key.

And we defined that this should hold a function,

so, here I will point at this

showNotificationHandler function,

which is a function off the proper structure and signature.

And I'll add my hideNotification key

and point at the hideNotificationHandler function.

So, that's now my context object.

And now we distribute this to all the components

that are interested through the value prop

on this provider component.

We set that equal to context.

And the cool thing is that whenever we change

this state here,

for example, by calling

show or hideNotificationHandler in the end,

this notification context provider component will re-render

and will distribute the updated context object

to interested components.

And that's exactly what we need here.