With our user States values as well as functions complete we could move on and start in fact restricting
access depending whether the user has logged in or not.
However before we do that wouldn't be nicer if we would display to our user whether he or she has logged
in or whether there was an error.
So think about it.
If I need to sign on I type in my email and let's say my password is incorrect we could just show the
alert right.
So if let's say the password was correct we're going to say you are logged in and then whatever user
name and then we have some kind of text.
And of course we can close out the alert.
Or let's say if we're going to log out and try to log in with wrong credentials which is what I wanted
to do initially but for some reason I entered the right password lets me enter the wrong one.
Then we're gonna have a.
There was an error.
Please try again.
So this is what we're going to work on in this video.
And in fact we're going to do a bit differently where previously we set up the component first.
Now in this case we're going to set up our functions.
I'd also like to mention that if you have more global functions like this one alert than you probably
would want to set up another context.
So currently we have the card we have the product as well as the user.
No I'm gonna be lazy and I'm going to add my alert functionality in my user context just because it
wraps around my whole application and I already have these contexts open.
Now again if you have more functionality let's say you have not only alert but something else that is
global you probably would want to set up another context where you're specifically putting those utilities
again in our case is just gonna be alert.
So I'm gonna be a bit lazy and we're just going to set up our alert within the user j Yes and we're
gonna start again by setting up the state volume.
So you're going to have const alert alert like so we're gonna have a function of course we're gonna
have a set alert function and then we're going to use a react use state use state and our initial value
is gonna be an object and in this case we're not going to be checking a local storage.
It is gonna be an object and by default we're gonna have a show property equal to False.
So we're not going to display our alert by default the message property is gonna be equal to an empty
string.
And then lastly we also are gonna have a type of success.
Now what is a type you see we're gonna have two options Either we're going to have a success alert meaning
the color is going to be green or we're gonna have a danger one.
So essentially if we have the danger that means that the our alert is gonna be red.
And I just borrowed that from the bootstrap.
So there's nothing unique about that.
Let me save it.
That is our initial object.
And then we're gonna set up two functions.
We're gonna have a show alert.
So when we would want to show alert and then also when we would want to hide the alert.
So we're gonna go with concert show alert.
And then in order to display the alert we're gonna need to pass in the object.
And of course we already have these state properties.
Correct.
So we have the show as well as message and type.
And you know what by default right away I would want to set it up where if let's say we are passing
in the type the type is going to be success.
So unless I specifically write that type is gonna be danger when I would like to show the alert then
by default is just gonna be success.
No way we can do that.
We can just type and we can use the default primer from iOS 6.
I would just say that type by default if I don't specifically override it the danger is always always
gonna be a second.
And also what we're going to be looking for is the message.
So what kind of message we would want to display when we show out earlier and then within the function
body what we're gonna do is we're gonna use set set alert.
That is of course our function.
And then we're gonna pass in show as true and you're noticing that I'm hard coding this because I really
don't see the point of showing these show alert function if I know that I'm going to show Diller.
Now if you're creating like a toggle function where in some cases you're going to show alert and in
some cases you're closer.
Yeah that would be something else.
Because remember we have within the alert also an option of just closing the alert.
We have the button.
So that's the reason why we're setting up a two functions but you could set this up of course as one
function where instead of showing hide you could set up as toggle.
Now if you're setting us toggle then it makes sense to pass here as a property.
But in our case I always know that if I'm going around shoulder along always going to show that there's
no point for me to pass it as a property and object I can just hard code when I'm setting up my alert
using these state function and then I'm also going to pass in the message as well as the type.
And again I know I said that already before but I'm using type of success as my default parameter.
So if I'm not going to pass anything as mine type value then it's always always going to be a success.
And also we would want to close it out.
So I'm going to say const hide on alert and then we're not going to pass in any parameters or any arguments
and we're just gonna run set alert.
Darrell we're going to access the values so going to say whatever the values I have currently within
the alert.
Remember we have alert values and I'm just gonna override these show one.
So if the show is true which of course would be the case if we're showing the alert while then we're
just right click and we're gonna say show is equal to False that's it.
That's all we have to do.
So again we have state value we have show alert as well as the high alert function.
And now I'm just going to pass in these values again within my value prop and in the next video we're
going to set up our actual alert.
So we're going to go with alert then we're going to look for show alert function and then of course
we'll also have a higher alert function.
Let's save it.
Now let's start working on our alert component.