So let's try to set everything up again, this video might be a little bit longer, but I have full
confidence that we are already familiar with the setup, so we have the function of that is nice.
Now I just want to grab all the imports, so we go back to the lead me.
And then we go to the register, I'm sorry.
Not registered profile.
My apologies.
So we go to the profile, we get all the imports.
That's the first step.
And now let's set up our import from the AMP context.
So close the sidebar and then let's go here with the user.
So we're going to be looking for user ID and we also want to good show alert that also display alert.
So Charlotte is going to be the condition and display alert is going to be a function.
And we also want to go and update user function that reduce just set up ease.
Loading, Of course, and then all of that is equal to use app context.
We invoke it.
That's the first step.
And now it's set up those state values one by one.
So we have name, email, last name and locations of consent, and we're looking for a name when the
function name will be set name and then that will be equal to use state.
And then let's look for user.
If the user exists, then we'll go the name.
That's it.
That's going to be our default.
And then, if not, that is going to be undefined.
Now, keep in mind that the only time when the user will be know is when we haven't logged in yet.
Correct.
So let's copy and paste this one, and this one will be equal to an email version of the function.
Name also will be equal to an email.
And then lastly, we're not looking for a name.
We're looking for email and let's copy and paste.
And here we're going to go with a last name, last name, and then the function name also will be the
last name.
And then lastly, what is the property?
It's also the last name, correct?
And again, you can go to the state and you'll clearly see that those are all the properties on our
user object.
And then lastly, we have the location.
So this is not going to be a last name.
We're going to go with location and here also go to location.
And as far as our user, dot will also look for location property, then let's set up the handle submit
and for the time being.
We're going to maybe log submitted the form or whatever.
Let's worry about this one at the very, very end.
So pranced and then handles submit.
Now we do want to right away grab the event object and we want to go with event and then prevent and
then default.
Let's invoke it.
Let's say update.
Here's our lecture.
That's our handle.
Submit.
So now let's worry about the return where I'm going to grab the wrapper again, which is coming from
where from the dashboard form page.
So go here with rapper and man inside of the rapper, let's set up our form.
So it's cohere with form as far as the action, while there's going to be no action here.
But I do want the class name.
It's going to be equal to a form.
And then we want to go on, submit and pass in our panel, submit that in inside of the form.
Let's go with Hank three.
And let's just say here profile and now it's right away.
Set up that alert.
So let's say here, Charlotte, and if it is true, then we want to go with our alert component, correct?
So we have here this alert component, and I want to showcase if the show alert is true again, you'll
probably hear me saying this a lot, just like we did in the register and then we want to start setting
up those form rules.
So let's go here with Dave with a class of form center and we want to go with our former all component
and remember what we were looking for.
We're looking for type, which is going to be equal to it next, right?
And we want to go with name.
And in this case, what does it equal to?
Well, this actually equals to my state, right, which is name.
So therefore, I need to pass here a name and a quick Senate since in this case are set up is different
since we are passing for different functions in house change.
I don't like the register where we passed in the single function.
We actually won't use name attribute value when we set the state ballot, so we're adding name attribute
just for consistency.
Please keep that in mind.
Then we want to go with value.
It's going to be again equal to name, right?
So now in this case, I'm actually selecting the state value.
So when I was setting up the name equal to the name.
Well, that was the name of my state property.
In this case, I'm looking for a value of the state property.
Hopefully this is clear and you'll definitely see that with, for example, email.
And we want to go here with handle change, like I said.
And then remember, we don't want to invoke it right away, but we do want to get the event target value.
So when I go here with my oral function and line, I'll pass in my set and name function and here let's
pass in around that target.
And then we're looking for the value.
Now I definitely want to grab here the Iran and what is going to happen in our setup.
As we start typing out the form filled well, the value will be updated.
Now let me right away set up the last name and then I'll talk about the form text.
So let me grab here this form one more here, and let's set up same thing for the last name right away,
and then we'll take a look at it in the browser.
Now what is going to be the type that will be taxed?
Now what is going to be the name?
We're going to go here with the last name, correct?
Why?
Well, because that is my state, right?
We're going to do the same thing over here.
Let's say last name.
And when it comes to a handle change, set of set name will go with set last name.
Now, once we save and once I navigate to the bigger browser window, I mean, all of this looks nice,
but don't you think it would be better?
If, for example, we would nicely this last name, because at the moment, notice our label.
And why is that happening?
Well, because if we take a look at our components and then more specifically form Rome, which you'll
notice that I have the name that I'm passing in, and if there is no label text, then I'm using the
name.
And again, if you have a different functionality, as far as if you're not using this approach, then
it is important that the name matches to your state value.
So this will be a name for your state value and this will be a value for your state.
And yes, technically in this case, you can make an argument that we're actually not using this name.
But since this is not the only approach that you can do like, we're doing that over here.
That's why I set it up right away correctly here.
Everything as far as the name is concerned and where I'm going with this.
Remember, we have this label text so we can simply go with a label text.
What do we want to pass in?
Well, what I want in the label, I think we're going to go with this one last name.
So once I serve, now notice how everything is correct.
And again, this is coming from our global state, from our user object, and all the properties are
located over that.
So then let's do the same thing for email and location.
And I think I'm going to go with email first.
So type in this case will be email.
There's no label text because it's going to be pretty much the same.
So instead of name, I'm going to go with email here and and the value will be also email.
And now I just want to change here the function.
It's not going to be a last name.
It's going to be equal to an email.
And then lastly, let's do the same thing with location.
So type will be equal to what it will be equal to a text.
That name will be equal to creation.
And then lastly, the state now also is going to be here equal to location, and the function that I
want to invoke is also going to be set location, then still inside of the form center.
Do I want to set up my submit button?
And here we will be looking for the class names of beaten and then beaten block.
And then let's add a type of submit.
Type of cement, and then let's disable it if we are in the middle of the request.
Now when is that going to be?
Well, when we're making the request back to our server, so let's say you're disabled and not will
be set equal to you, is loading.
So if the loading is true, then of course the button will be disabled.
And yes, the functionality is still coming up.
So if is loading is true, then what text do I want to display?
In this case, I'm going to go with please and then wait, and I'm or not.
And if we're not loading, then we'll just say save and changes, and we're almost almost done.
We just want to set up the basic functionality where if one of these powers is missing when we display
the alert, if not, then we initialize our issue Typekit request, which at the moment is not in our
update user.
So let's scroll up.
We're looking for the handle.
Submit correct?
Prevent default.
Yep.
All of that is nice.
Now we're just want to go with if and then basically if one of the values is missing, if there's no
name, if there is no email, if there is no last name or.
And then last name.
And if there is no location, so no location, if any of them are missing, then basically we want to
go and display an alert and that's the function we don't pass anything in.
So this is going to be the case where again, we just display that hardcoded one, please provide on
values and all that.
And right after we call display alert.
I also want to go with the return because I don't want to run my update user correct.
And then right on top, I'm going to set up a comment remove while testing, which essentially just
means that outcome.
And this one out, while we're setting everything up again, the goal here is following that.
While we're working on a functionality, there's going to be some instances where I want to showcase
the errors that we're getting back from the server, and I cannot display those errors if I'm already
checking, for example, these values on a frontend.
Yes, eventually we'll do that in both places, but not at the moment.
So let's go here, update and then user and then I want to set up my object where I'm going to go with
name that email last name and I also want to pass in the location.
So I pass all of them in and I'll just take a look so we can navigate to my browser.
No, with Inspect and then if everything is correct, I should see that in a console.
But if I'm going to exclude the last name, you'll notice that will have.
Please provide all values, which means that our functionality works as expected and once everything's
in place, I want to swing back to the profile and temporarily comment this one out.
And once we have all of this in place now, we can start setting up the update user functionality.