So now that the Context is defined
and we wrap our components here with our Context provider,
it's time to start using that Context.
Now I mentioned that I wanna show the notification here
in this underscore App.js file.
And I would actually have problems with that
because that's also the file
where we wrap with our Notification Context Provider.
So this component itself,
this MyApp component in which I use the notification
is not wrapped by Notification Context Provider
because it's this component's JSX code
where we do the wrapping.
Hence we can't tap into our Context here
inside of this component function.
But that's no problem,
we can get rid of the notification here
and cut it and remove its import,
and instead of just use the layout component
because that also is a wrapper around all our other content.
And it's the perfect component for rendering a notification.
Also, if we have a look at its name, layout,
it is per definition, a wrapper for visual content.
And therefore, if I go to my layout component,
I'll simply add the notification there,
and then of course also add the import
for the notification component from the UI folder like this.
And now in the layout component,
we can tap into our Context.
And for that I'll import the use Context hook
which allows us to do that.
We can call use Context and then pass the Context
to which we want to establish a connection
as a argument to use Context.
So to make that work,
we should import the Context to which we want to connect.
And that's the Notification Context,
not the Notification Context Provider,
but just the Notification Context,
because I just want to connect to this Context object here.
So not the provider component, but this Context object,
this one, which is exported as a default.
That's what I need for use Context.
So in the layout component,
that's what I'll import from my store folder.
So for my store Notification Context file.
So pass Notification Context as a argument to use Context
and that gives us access to that Context value.
Now we can use that Context
to call, show, or a hide notification,
or to get the current notification data.
And that's what we need here in this layout component
to conditionally show the notification.
So here I'll then get access to the notification,
and I'll name this activeNotification.
So I'll store it in notification, managed by my Context
in a constant here in this component.
And if that is not null,
so if we have an activeNotification in our Context,
then I want to render this notification
with the data stored in activeNotification.
So we want to render notification conditionally,
and we can do it as we always do it,
with this syntax here, and then just populate the props here
with the active values from the active notification.
So activeNotification.title,
and also set the message to activeNotification.message,
and for the status,
I'll set this to activeNotification.status.
So now this notification component is rendered
whenever we have an activeNotification in our store,
in our Context.
At the moment though, we never have an activeNotification
because we have no place
that would trigger the show notification handler
by calling show notification on the Context object.
And that's what I want to change now.
Now that all the Context is set up,
I want to dive into the components
where we do send http requests
to then call show notification
from inside those components
to show and update that notification
with the appropriate data.