With our alert functionality in place now I'm going to open up my sidebar.
I'm gonna remove again all the tabs that I had open.
Then we're going to look for alert component and that is within the components so we have components
folder.
And then we're looking for dealer.
We're going to start with our imports.
So let me close again the sidebar and we're going to need to have a fantastic Mike on because we're
going to use it for our close button.
So let's import the icon name is FAA window close and that is coming from and then we have react icons
of course forward slash FAA and then also we need to have a user context because depending on whether
we have the value of shelf true then we are going to display or hide the alert.
And also we're gonna be toggling between the colors because remember we have an option of either success
meaning green or we have a danger which means that alert is going to be red.
So let's import first our user context again name the import it is coming from and then Let's navigate
it to a context Let's navigate to a user again I was lazy.
If you want you can set up of course a global context where you have maybe more things.
But I just went with the user and then we have our alert.
Awesome.
Now probably let's get alert and high alert.
So we need to first have access to our state value alert and then also we need to have access to high
dollar.
So let's grab a alert then hide.
Alert.
It is coming from react.
So we're going to use react use context and let's access the user context let's access user context
and once we have access to alert as well as high alert then we're going to set up our systems variable.
You could definitely do it differently.
You could use ternary operator in your sex but for this case I just chose this particular setup.
If you don't like it I can just change it up to your liking.
So the way I'm going to do it I'm going to have a c as this variable and then it's going to be equal
to a initial class.
So I'm going to stay alert and then I'm going to have a container.
And for now that's all we're going to have.
And then the second we're going to set up a if statement where we're going to check alert show as well
as alert type.
And as far as our Jeff Sachs we're going to have a div we're going to have some kind of div.
It's gonna have a class.
Now that class is gonna be our CSR is variable.
So whatever we have here your name the differently of course access it also correctly then within a
day if there's gonna be a div with a class of alert.
So let's write div with the class of alert and then we're gonna have our paragraph and the paragraph
is going to access to things it's going to access alerts show.
So if the value is true then we would want to display the message.
So we're gonna go here with a paragraph.
You know what I mean to set up paragraph and then the text is gonna be dependent in fact on alert show.
So we're gonna go with alert show.
So if of course that value is true if alerts show is true then I would want to show alert message.
So whatever message we're passing in.
And then also I would want to have my close button.
So let's head over here and let's say that we're gonna have a button man as far as the classes we're
gonna go with class name alert clothes and then also maybe set up a font.
Awesome icon so font awesome close and then let's add also a on click.
So we're going to have on a click so click event listener and we're gonna run the high dollar.
So once we click on our font awesome icon then we're gonna Heidelberg and with our J sex in place.
Let's set up our if statement.
So what we're gonna be checking and why I set up this as a variable.
You see I'm gonna have three classes I'm gonna have possibly alert container that is always gonna be
there then I'm also gonna have alerts show that is going to display the alert and then depending on
whether my type is danger I also would want to open the alert danger.
So I'm gonna have possibly three classes.
So that's the reason why I set this up as a variable and then I'm going to have a if statement.
So first I'm gonna check if I'll alert show if it is true then I will want to open to my C assess a
alert show.
So we're gonna go and see assess plus and we're gonna go with alert show.
Just please make sure that you have here a space so alert show but in a beginning of string.
Just add a space.
That's my first check.
If that is the case if I want to show alert that I'm just gonna add the class and the class is gonna
be the one that displays the alert.
Then also depending on whether my alert is danger or success I would want to add another class that
is gonna be responsible for my colors.
So I'm not sorry if and then we're going to go with alert type.
And if the type is equal to a danger then we're going to add one more class.
So then we're going to up and to our CFS variable.
One more class.
So we're gonna we're gonna do CFS plus.
So we're up ending this and we're gonna go with alert and the class name is danger.
So hyphen danger and with our alert component complete now we would want to see how it's gonna look
like.
So I'm gonna head over to a map because we would need to render it.
We're gonna head over to AB whereas our app component there it is and we're going to have to import
our alert.
So right after the header we just copy and paste we're gonna be looking for the app.
We're gonna look for the app and we're looking for the app component so let's look for components.
The name is alert and I don't know why I said app because of course I'm looking for alert and then right
after the header or before the header does matter we can just render our alert component which currently
is not going to display.
And the reason for that is very simple because of course our show is equal to False.
So I'm gonna head over back to user and I'm just going to hard code that the show is gonna be equal
to true.
I was going to be equal to true and the message is gonna be.
Hello world.
Let's say it and then right away we're gonna have our alert.
Why do we have the alert.
Because again we're gonna head over back to our component.
We're getting two things from our user context.
We're getting alert as well as we're getting high dollar.
So then we set up our success which initially is always always gonna be this container.
If I want to show my alert then the property of course is going to be equal to Trump.
Correct.
Now of course right now we're just hard coding that just saying Show is equal to true.
But eventually we're going to do that with our show alert function.
Then once we check what is in fact the value for the show then we just add to our CSI as a class a class
that displays our alert and then we have one more check then we check.
Well what is the time.
And like I said by default it's always going to be success.
So I'm like Whatever.
Just always always had it as an excess.
Now if you wouldn't want it to be a success if you'd want to be a danger then we specifically are going
to add that you know what I would want to show this as a danger.
How danger is going to look like it just hardcoded for now.
You say danger and of course our alert is going to be around again.
Let's roll back to alert.
That is how we set up our systems and then eventually we just access DC assess.
Then we have a class name for alert and then whatever message we are showing.
And if the alert show is equal to true then of course we can always also close it.
How do we close it.
Just click on a button.
And of course then we run our function hide alert function and with our component place.
Now we can utilize it within the logging.
Page.