Original subtitles

Now for this course section,

you should of course know what React Context is.

That's a prerequisite and therefore

I strongly recommend

that you go through dedicated React resources

diving into React Context

before you continue with this section.

And with that out of the way attached

you'll find a notification component file

a sip file containing this notification JS

and this notification.module.css file.

These two files are attached in this sip file

and you should add them to your project

into the UI folder in the components folder.

That's a simple presentational component

which will just output a title and a message

as a notification shown at the bottom of the screen

once we do show it.

At the moment we have no code for showing it

but that's about to change throughout this course section.

Now one important note first,

you don't have to use React Context

for this course section.

For giving the user some feedback

about the current status of the ongoing HTTP request,

you could also just use Local State

and provide any feedback of your choice.

My goal just is to show an overlay

a little notification at the bottom of the screen.

And I wanna control that globally with the context API

so that we can trigger this notification

and control this notification

from anywhere in our application.

That's my only goal here.

Now, therefore, before we add react context

let's see how the end result is should look like.

Let's go to the underscore app JS file in the pages folder.

And there we have our layout.

We have the head section with the general head data

and we got this component prop

which renders the actual page content.

Now in here,

I also wanna output the notification component.

And for this, we need to import notification

from the components folder there

from UI and the notification JS file we just added.

I'm just adding it here so

that you see what we will add from this section.

This notification component takes three props

a title, a message, and a status.

And therefore I'll set these three props here now.

I'll set the title to test, the message

to this is a test, like this

and the status to pending, for a start.

If we now save, we have this notification element

at the bottom, and the goal is to show this

once we did click the register button

and then once the request succeeded or failed

we wanna replace it with a proper error or success variant.

Let me show you these variants here.

If we changed as to success

if we change the status to success, this switches

to this success notification with a green background

and if on the other hand, we change it to error

this switches to this red notification.

So that's the notification, but

of course it shouldn't be hard coded here.

It shouldn't always show up.

Instead it should only be shown when we want it

to show up when we have an ongoing request

or when we have a response from our request.

And I wanna control it with the context API

because I want to render the notification component here

in underscore app JS,

but I wanna trigger it from inside other components.

For example, from

inside that newsletter registration component,

where we also send this HTTP request.

And because that's the case,

because it is components should be triggered

from totally different components than the component

it's being rendered in,

I wanna use app wide state management.

I wanna use the context API

to a wide pointless prop drilling

and long prop chains across multiple components.

And therefore let's now start using the context API.