So in this lesson, we're going to continue to build out the user interface that can interact with API,
so we're listing out all of the users.
When you click one of the users, it's going to create a separate page for them.
And then from here, you can select the user information and you can send an update.
And that's tracking within the console when we send an update, it's getting that updated information,
it's got the user ID and the name, so it's ready to make the put request to the API in order to update
the content on the server side.
So it's going to be coming up in the next lesson.
So this lesson, we're just creating the interface and the user interaction to prepare to send the post
data also for that main click button that's just reloading back to the main page as well.
We left the previous lesson by connecting to the API and being able to list out items in the API and
then also having the different page up buttons so we can load the two different pages of content.
Now, there's a number of different endpoints here that we can make a request to and another endpoint
that we can request who is users and getting by the user ID?
So this is a way that we can have the ability to click and be able to select the user and create a user
page.
So that's what we're going to do in this lesson where we're create a user page and this will be whatever
the ID value is.
So we're passing in the ID value into the user page.
So let's add the ability to do that and for now will console log the ID value and then we can construct
the path and make the fetch request afterwards.
So first we're going to start out by logging out the ID whenever the item or whenever the user gets
clicked.
So we've got all of the users that are going to be contained as we're building out the page content.
The user information is all contained within output one.
So let's go ahead and add the event listener.
So output one eyed event listener and of course that we're listening for is going to be a click and
whenever it gets clicked, then we want to get whatever the ID value is of the current user and we have
that contained within the user ID.
So send that information over within the function.
So let's see what happens.
So now we can click, we're getting the ID values and that's the first step in building up and setting
up our fetch request to load the user information.
So going back to the guide that we have for generating, we need to select and within users we just
pass in whatever the ID value is.
So it's API users, and this is where the important part is just creating the correct path to return
back the data.
And for now, we're just going to console log the data that gets returned back.
And it actually should just be the user information.
So clear and click.
And there's the data for the user so we can output that user information.
And I know in this case there's nothing that's different than what we currently have.
But in this case, we want to just generate a user page with this data.
So create a page with the data and we don't need any of the support data.
So we're just going to do data data and pass that object in to the create page function.
And so next step, we create the create page function and we're getting data passed in.
And then first thing you like to do is just log out the contents.
So that I know I have what I have to work with and let's do the same thing that we did for the main
page, where we're clear out the page contents.
And then add the user information to the page and we can do pretty much very similar to what we just
did earlier, so copying this block of code and we can also even simplify this by user.
And because output is global, we should be able to add all of this information.
So as long as we've got the user information that we're passing in here, the rest should just get generated
and then we can use the same function to create the other user.
So it's clear that and just do an ADD user.
So it adds the user information to the page.
But we can also use the ADD user by passing in the user data or we do create a page and this is actually
going to be different its data.
So we don't call it user.
So now when I click one of them, it should just build out that user information.
And I do want to remove out the option.
We're making it clickable.
So let's make one minor adjustment where we're adding the event listener to output one and four add
user.
We're going to return back the parent, which is output one.
And that way we can add the event listener to the parent where we're sending over the request to add
the user.
So within the user, this is going to be the main element.
And then for the main elements, we can add the event listener and then we don't have to add it on the
other option.
So now that one is not clickable and that means that we can set the attribute of that element and I'll
return it back as mean as well.
And let's set the attribute of mean using such attribute and the attribute that we're setting is content
editable and to set that to true.
Now, of course, you could set up these as input fields as well.
So what we can do now is we can edit the content and also let's append one more object.
And this will be update button so we can send an update value to this.
And using the same structure that we have before where we're making the node will add this button.
And this button will have the tax content of update and we're going to spend it to the main object.
So save click and now we have a button at the bottom there.
And for the update button.
Style and I set it to display
block, so that way it will go all the way across.
And then also we can apply to Central as well, it may be the easiest way is just to update a class.
And create a class for update button.
Display style is going to be block and width for this.
Can be 50 percent and then let's set the margin to order, so it's center set and also the text aligned
to center as well.
And this way we can just add in all of the class information so we don't have to do it separately.
So using class list ADD and other class update button.
So let's check it out and see what that looks like.
So now we've got the update button there at the bottom and we're able to edit the content.
So when the button gets clicked, update button, add event, listener and event that we're listening
for is a click on the button.
So whenever the button gets clicked, we want to get all of the information from that parent element.
So let's output the content into the console.
So setting up a name or just call it user name.
So we want to get the contents of that first element, that first div.
So from Maine, we can do a query selector and if we do query selector all and just select the div elements.
And then console log and actually this is going to be all of the div elements.
And then that way we can get each individual div when we press the update and within the node list we've
got the two diffs and I'm also going to separate out the idee.
So we're we're adding the user, so separating out the ID into a separate div.
So that way it's going to be easier to pick that up.
And you might also want to create inputs and also create a separate screen.
So that's up to you.
I'm just trying to do a quick demonstration.
So that's why I'm going to include everything and I'm going to pick up the information from the device.
So let's set up each HTML three and this will just have the user ID information.
So we'll have the email, we'll have the ID and then we'll also add this as a div to the page.
And so it's all going to be editable and technically, you probably don't want to make the idee editable.
So we could also hide the ID value as well, so we don't have to put it, we could hide it within the
First d'Hiv, so within div one user ID and that we can set aside the user ID.
So now that we're selecting the device from the page, let's consider log the Divx elements and select
the first one and see if we've got a user I.D. there that we can pick up.
And if we can get that information, then we can get the user name and also have it editable as well.
So clear.
And now when we hit update, we're getting the value of three.
So this is returning back the third person.
So the ID is three on this user and we're able to pick it up because we hit it in the background.
So also for this one, this will be whatever the user name is.
So whatever text content we have in this element.
So it hit update, we get the name and also if we want the email address, we could get the text content
of the second element.
So that's going to give us all the parameters that we need to send over.
And that way we can make a post or a put to the end point to send the request.
So let's make that selection and put them into variables and I'll put it into an object user info.
And I usually like to use objects for these.
So this is going to be the name and whatever we've got here for the content that we were originally
outputting and then comma, separate that and the next one is going to be the ID and that's coming back
from this parameter.
And then the last one is the email.
And that information is going to be contained within the text content of the second div.
So save that and will console log the user info to make sure that we've got it properly.
So we click it, we can clear the console, and as soon as we hit update, we're creating the user information,
so we're ready to post that information on the update.
So that's coming up in the next lesson.
So this lesson continue to build out the application, make the users clickable and then also get the
user information.
So the other option as well is to do it differently than I did it.
So in this case, I just want it to have some updatable fields and I'm able to update that.
And then that information I can then send over to the server side with the post and the request.
You can also add this as input fields.
And again, depending on what the parameters are for the data that you're updating, you might want
to make some adjustments to the way that you're presenting the content for the user.
In this lesson, we're going to continue to build out the application and interact with the front end
API, so loading the users, creating a separate page for the users, and then also creating an update
button on that page and allowing the user to update the content that's being presented on the page in
preparation for being able to send an update request to the endpoint for the user object.