With our Jay sacks complete we can set up some basic functionality.
Now what do I mean by basic Well we're gonna set up our toggle function as well as we're gonna set up
some initial values in panel submit.
So again we're just gonna do a bunch of placeholders where we're gonna show what kind of function we're
going to run and what is gonna happen if the value is true and then what is gonna happen if the value
is false.
Again we haven't set up our log in as well as the register functions as far as strappy is concerned.
That's the reason why we're gonna have some place orders.
And you're not.
I was thinking since I already have the files even though there's no data in there I do have my files.
I have the log and user as well as the register.
So we might as well can import it because again we're just gonna set some comments when we're going
to run these functions.
So let's start I guess by importing a log in user log and user.
Again it doesn't exist there.
There is nothing there is just a comment where we can still get it.
So we're gonna go with strappy Zen we're going to look for log in user copy and paste.
And now we're going to look for registered user.
So we just need to change the name.
We're gonna have them as default exports anyway so it doesn't really matter.
You can as always name it how are you like.
But I'm gonna go with a register user let's save it.
Let's keep on scrolling down because now would want to set up our is empty currently of course we are
hard coding but what I would like to do is I would like to setup is empty.
So it depends on my state values.
So if the value is false meaning if it is empty then I also want my is empty be true if the is empty
is true.
Well then I'm showing the paragraph that tells the user that hey listen you need to fill out the values
how we can set this up.
Well if my is empty is set up this way where I'm already asking if the value is empty and if it is true
then I would like to show the paragraph then the way I set it up is that I'm gonna check if the email
is in fact the opposite value.
Now what is currently email.
Email is an empty string.
So what is an empty string.
What is false.
All right.
Now when I said the opposite value is it true.
So essentially if my email is gonna be an empty value this is going to return true.
That in turn is going to set is empty equal to true.
And then I'm going to show my paragraph.
That's all we can easily test this out once we say with notice I have please fill out all the form fields
if I'm gonna type something in email.
Then of course right now I'm showing the bottom and I'm gonna do the same thing for all the values I'm
going to write the password here.
So again opposite of password because currently it is a empty value.
And then lastly I'm gonna do the same thing with a user name.
And this is the part where now we're gonna talk about the user name because you can clearly see that.
Okay.
So I have default and Y rest of them were an empty string.
Well let's think about it if I'm gonna change this to an empty string.
What do you think is gonna happen.
Well I can save it.
I can type in something in email I can type something in a password but I still cannot see the button.
Why I cannot see the button.
Well because it depends on all the values.
Which is fine if we're toggling the form correct.
If we're showing all the values if let's say user needs to register yes then I would like to check all
the values however for the time being.
If we're just signing in we might as well set this up as a default.
And don't worry we're gonna set our functionality within toggle member so depending on a member we're
also going to control this particular value.
That's the reason why initially we have this for default.
Otherwise there's no way for you user Simon because your value is just gonna be an empty string and
he or she cannot fill out the value but you're still not showing the sign in button or I guess submit
button.
All right.
Now we have these values and by the way eventually it's also going to depend on the alert.
But we're a long ways from that.
So just telling you that eventually there's gonna be one more value here.
And I guess now I can just work on our toggle member and toggle number is gonna be interesting because
we're gonna use the fact that the U.S. state the function that we get back whether that's set at passwords
and user names that he's a member whatever the function is in fact accepting a function as well.
And we're going to see that in a second.
So how is gonna work.
Well I would like to toggle the member.
All right.
So the function is set is member.
All right.
But initially everything that we've been doing is all right.
So we have our function and then we're just passing the new value.
However in this case I would want to check what is the previous value.
He is the member true or is it false because I'm going to be toggling.
So what we can do is we can pass a function here within a set number so set is member is already in
function.
And please keep in mind just because I'm talking about that number doesn't mean that the same works
for that email password as well as the user name so we can pass here a function instead of a new value
instead of me saying that this is gonna be let's say false.
I could pass in a function.
Now what's cool about this function that as a parameter it gets the old value and since it is parameter
I can call this whatever I would like.
So I'm going to call this brief member like so and by the way as always when in doubt just consult log
it to see what you're going to.
So brief member see whether that functionality works.
And once we can see that we can access the previous value that we have in the state which in our case
was true.
Now let's set up the functionality where we're gonna change it.
OK.
So first I'm going to sign it some kind of variable I'm gonna say let is member number and I'm gonna
say it's gonna be the opposite of whatever I have.
So since we're toggling I would want to set it to a opposite value.
And the fastest way of doing that is just by adding a exclamation mark and then say whatever the value
was for previous number.
Well give me the opposite one.
OK then we're gonna set up some kind of ternary operator so there is gonna be is member.
So now I'm going to check what is the actual value.
And if the value is true then I'm gonna run.
Set the user name I'm gonna set this to a default.
So if the member has already registered then I just want to show this as a default because again I don't
want this one the set user name to prevent me from submitting the form.
So again if this is true if the member has already register we're going to set the user name as a default
like so if the user hasn't register well then we're going to set some user name.
And this is gonna be an empty string.
And what we need to do from this function is always always return the value because that's gonna be
our new set is member value.
Whether that's true or false in this case or in general we always need to return it.
So I'm going to go with.
Return is member.
So I did my functionality and now I'm just returning it.
And that's the cool thing about the function that we're getting to set the state value.
So again instead of just passing some kind of value like we have been doing before.
True or false whatever array or whatnot that in this case we're passing in the function.
OK.
And then within that function the first thing as a parameter we get the old state value or you can say
current state value and then we can do whatever functionality we'd want but we'd need to make sure that
we return some kind of value.
So essentially we're setting that state value.
And now let's head over to handle submit and again we're just gonna set up some basic initial functionality
where there's going to be a value of response.
So I'm gonna set up a variable of response.
And this case I'm gonna be checking if the response is going to be true then I'm gonna do something.
And then if it's gonna be false then we're gonna do something else.
So if we're successful of logging in then of course we're gonna navigate a way from the page and all
that.
If not then we're just going to display some alert.
And also since we're getting the event object we know that one of the first things we would want is
prevent defaults or event prevent a default.
Otherwise again we're gonna refresh the page and that's not what we're looking for.
There's also gonna be an alert.
So let me add a comment off alert.
And the way it's going to work is once we submit the form it's going to depend whether the user is a
member or not because we have two functions.
We have log in user as well as the register user.
So that's the reason why we're gonna set up a if statement.
I'm not going to say if the user is a member then and I'm going to in this case I'm gonna run comments
where I'm gonna sign my response response equal to a log in years.
So log in user why we're setting this up because if the user has already registered we're gonna run
our log and user functionality.
Now this is gonna be a synchronous function so we're just gonna add a a wait because we have async await
and this is just gonna turn a promise.
So we're just gonna wait until the promise has settled again we're gonna have the proper functionality.
Now we're just adding these comments now if the user is not a member and then of course we would want
to register.
So in this case again we're gonna have comments for now but it's gonna be a response is a wait and we're
gonna be looking for a registered user registered user that is gonna be the function again it's gonna
be a synchronous function since we're gonna be performing actually typing requests.
So that's the reason why we're gonna wait again until our promise is settled and then once we get back
our response because regardless whether we run log and user or their user we're gonna have some kind
of value for response so we're gonna type out another if statement.
So if response is true then we're gonna do some logic where essentially again we're going to show alert
we're going to navigate from the page or if we're not successful of register or logging in the user
then we're gonna show the alert and that's it.
So let's save it.
That's how our initial annals of is going to look like.
And now we're going to switch gears and start working with our actual functions.