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.