1 00:00:00,150 --> 00:00:07,410 So in this lesson, we're going to continue to build out the user interface that can interact with API, 2 00:00:07,950 --> 00:00:09,930 so we're listing out all of the users. 3 00:00:09,930 --> 00:00:13,740 When you click one of the users, it's going to create a separate page for them. 4 00:00:13,950 --> 00:00:19,230 And then from here, you can select the user information and you can send an update. 5 00:00:21,470 --> 00:00:26,990 And that's tracking within the console when we send an update, it's getting that updated information, 6 00:00:27,180 --> 00:00:34,370 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 7 00:00:34,370 --> 00:00:36,980 the content on the server side. 8 00:00:37,460 --> 00:00:39,440 So it's going to be coming up in the next lesson. 9 00:00:39,590 --> 00:00:46,350 So this lesson, we're just creating the interface and the user interaction to prepare to send the post 10 00:00:46,400 --> 00:00:52,020 data also for that main click button that's just reloading back to the main page as well. 11 00:00:53,990 --> 00:01:01,310 We left the previous lesson by connecting to the API and being able to list out items in the API and 12 00:01:01,310 --> 00:01:06,200 then also having the different page up buttons so we can load the two different pages of content. 13 00:01:06,530 --> 00:01:12,440 Now, there's a number of different endpoints here that we can make a request to and another endpoint 14 00:01:12,440 --> 00:01:16,740 that we can request who is users and getting by the user ID? 15 00:01:17,090 --> 00:01:24,080 So this is a way that we can have the ability to click and be able to select the user and create a user 16 00:01:24,080 --> 00:01:24,550 page. 17 00:01:24,830 --> 00:01:31,460 So that's what we're going to do in this lesson where we're create a user page and this will be whatever 18 00:01:31,460 --> 00:01:32,960 the ID value is. 19 00:01:33,200 --> 00:01:37,350 So we're passing in the ID value into the user page. 20 00:01:37,730 --> 00:01:45,410 So let's add the ability to do that and for now will console log the ID value and then we can construct 21 00:01:45,410 --> 00:01:48,770 the path and make the fetch request afterwards. 22 00:01:49,130 --> 00:01:56,660 So first we're going to start out by logging out the ID whenever the item or whenever the user gets 23 00:01:56,660 --> 00:01:57,100 clicked. 24 00:01:57,380 --> 00:02:03,500 So we've got all of the users that are going to be contained as we're building out the page content. 25 00:02:04,310 --> 00:02:07,810 The user information is all contained within output one. 26 00:02:08,630 --> 00:02:11,000 So let's go ahead and add the event listener. 27 00:02:11,000 --> 00:02:18,110 So output one eyed event listener and of course that we're listening for is going to be a click and 28 00:02:18,110 --> 00:02:27,920 whenever it gets clicked, then we want to get whatever the ID value is of the current user and we have 29 00:02:27,920 --> 00:02:29,870 that contained within the user ID. 30 00:02:30,410 --> 00:02:36,480 So send that information over within the function. 31 00:02:37,430 --> 00:02:38,900 So let's see what happens. 32 00:02:38,930 --> 00:02:45,200 So now we can click, we're getting the ID values and that's the first step in building up and setting 33 00:02:45,200 --> 00:02:49,850 up our fetch request to load the user information. 34 00:02:50,210 --> 00:02:59,660 So going back to the guide that we have for generating, we need to select and within users we just 35 00:02:59,660 --> 00:03:02,000 pass in whatever the ID value is. 36 00:03:03,850 --> 00:03:12,610 So it's API users, and this is where the important part is just creating the correct path to return 37 00:03:12,610 --> 00:03:13,280 back the data. 38 00:03:14,110 --> 00:03:20,140 And for now, we're just going to console log the data that gets returned back. 39 00:03:20,320 --> 00:03:23,080 And it actually should just be the user information. 40 00:03:23,410 --> 00:03:25,210 So clear and click. 41 00:03:25,480 --> 00:03:30,270 And there's the data for the user so we can output that user information. 42 00:03:30,670 --> 00:03:35,170 And I know in this case there's nothing that's different than what we currently have. 43 00:03:35,650 --> 00:03:40,360 But in this case, we want to just generate a user page with this data. 44 00:03:40,370 --> 00:03:49,040 So create a page with the data and we don't need any of the support data. 45 00:03:49,050 --> 00:03:55,160 So we're just going to do data data and pass that object in to the create page function. 46 00:03:55,660 --> 00:04:01,240 And so next step, we create the create page function and we're getting data passed in. 47 00:04:01,540 --> 00:04:06,520 And then first thing you like to do is just log out the contents. 48 00:04:08,540 --> 00:04:16,280 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 49 00:04:16,280 --> 00:04:20,630 page, where we're clear out the page contents. 50 00:04:22,970 --> 00:04:31,820 And then add the user information to the page and we can do pretty much very similar to what we just 51 00:04:31,820 --> 00:04:43,550 did earlier, so copying this block of code and we can also even simplify this by user. 52 00:04:44,210 --> 00:04:49,790 And because output is global, we should be able to add all of this information. 53 00:04:50,090 --> 00:04:58,190 So as long as we've got the user information that we're passing in here, the rest should just get generated 54 00:04:58,880 --> 00:05:02,400 and then we can use the same function to create the other user. 55 00:05:02,600 --> 00:05:05,540 So it's clear that and just do an ADD user. 56 00:05:07,250 --> 00:05:10,100 So it adds the user information to the page. 57 00:05:10,460 --> 00:05:22,100 But we can also use the ADD user by passing in the user data or we do create a page and this is actually 58 00:05:22,100 --> 00:05:23,560 going to be different its data. 59 00:05:24,710 --> 00:05:25,820 So we don't call it user. 60 00:05:26,210 --> 00:05:30,350 So now when I click one of them, it should just build out that user information. 61 00:05:30,360 --> 00:05:32,360 And I do want to remove out the option. 62 00:05:32,360 --> 00:05:33,800 We're making it clickable. 63 00:05:34,010 --> 00:05:39,350 So let's make one minor adjustment where we're adding the event listener to output one and four add 64 00:05:39,350 --> 00:05:39,910 user. 65 00:05:39,920 --> 00:05:43,550 We're going to return back the parent, which is output one. 66 00:05:43,760 --> 00:05:49,970 And that way we can add the event listener to the parent where we're sending over the request to add 67 00:05:49,970 --> 00:05:50,530 the user. 68 00:05:50,990 --> 00:05:56,120 So within the user, this is going to be the main element. 69 00:05:56,870 --> 00:06:02,690 And then for the main elements, we can add the event listener and then we don't have to add it on the 70 00:06:02,690 --> 00:06:03,940 other option. 71 00:06:03,950 --> 00:06:12,840 So now that one is not clickable and that means that we can set the attribute of that element and I'll 72 00:06:12,860 --> 00:06:14,870 return it back as mean as well. 73 00:06:15,380 --> 00:06:26,450 And let's set the attribute of mean using such attribute and the attribute that we're setting is content 74 00:06:27,530 --> 00:06:31,650 editable and to set that to true. 75 00:06:32,270 --> 00:06:35,290 Now, of course, you could set up these as input fields as well. 76 00:06:35,990 --> 00:06:43,940 So what we can do now is we can edit the content and also let's append one more object. 77 00:06:47,040 --> 00:06:53,580 And this will be update button so we can send an update value to this. 78 00:06:57,570 --> 00:07:05,160 And using the same structure that we have before where we're making the node will add this button. 79 00:07:08,300 --> 00:07:14,660 And this button will have the tax content of update and we're going to spend it to the main object. 80 00:07:16,960 --> 00:07:21,930 So save click and now we have a button at the bottom there. 81 00:07:27,140 --> 00:07:30,440 And for the update button. 82 00:07:33,200 --> 00:07:36,590 Style and I set it to display 83 00:07:38,990 --> 00:07:41,870 block, so that way it will go all the way across. 84 00:07:46,280 --> 00:07:54,860 And then also we can apply to Central as well, it may be the easiest way is just to update a class. 85 00:07:56,790 --> 00:07:59,130 And create a class for update button. 86 00:08:00,770 --> 00:08:07,940 Display style is going to be block and width for this. 87 00:08:09,370 --> 00:08:19,000 Can be 50 percent and then let's set the margin to order, so it's center set and also the text aligned 88 00:08:19,570 --> 00:08:20,740 to center as well. 89 00:08:21,820 --> 00:08:27,420 And this way we can just add in all of the class information so we don't have to do it separately. 90 00:08:27,760 --> 00:08:32,880 So using class list ADD and other class update button. 91 00:08:33,340 --> 00:08:35,140 So let's check it out and see what that looks like. 92 00:08:35,320 --> 00:08:40,690 So now we've got the update button there at the bottom and we're able to edit the content. 93 00:08:41,050 --> 00:08:49,900 So when the button gets clicked, update button, add event, listener and event that we're listening 94 00:08:49,900 --> 00:08:51,550 for is a click on the button. 95 00:08:52,090 --> 00:08:57,540 So whenever the button gets clicked, we want to get all of the information from that parent element. 96 00:08:58,180 --> 00:09:01,850 So let's output the content into the console. 97 00:09:02,620 --> 00:09:06,750 So setting up a name or just call it user name. 98 00:09:07,120 --> 00:09:12,340 So we want to get the contents of that first element, that first div. 99 00:09:18,540 --> 00:09:27,540 So from Maine, we can do a query selector and if we do query selector all and just select the div elements. 100 00:09:30,110 --> 00:09:36,410 And then console log and actually this is going to be all of the div elements. 101 00:09:40,660 --> 00:09:48,310 And then that way we can get each individual div when we press the update and within the node list we've 102 00:09:48,310 --> 00:09:52,210 got the two diffs and I'm also going to separate out the idee. 103 00:09:52,810 --> 00:09:59,980 So we're we're adding the user, so separating out the ID into a separate div. 104 00:10:00,670 --> 00:10:03,340 So that way it's going to be easier to pick that up. 105 00:10:03,640 --> 00:10:09,250 And you might also want to create inputs and also create a separate screen. 106 00:10:09,820 --> 00:10:10,750 So that's up to you. 107 00:10:10,900 --> 00:10:14,020 I'm just trying to do a quick demonstration. 108 00:10:14,560 --> 00:10:18,910 So that's why I'm going to include everything and I'm going to pick up the information from the device. 109 00:10:19,820 --> 00:10:29,530 So let's set up each HTML three and this will just have the user ID information. 110 00:10:30,820 --> 00:10:37,660 So we'll have the email, we'll have the ID and then we'll also add this as a div to the page. 111 00:10:43,380 --> 00:10:49,170 And so it's all going to be editable and technically, you probably don't want to make the idee editable. 112 00:10:53,610 --> 00:11:00,870 So we could also hide the ID value as well, so we don't have to put it, we could hide it within the 113 00:11:00,870 --> 00:11:08,220 First d'Hiv, so within div one user ID and that we can set aside the user ID. 114 00:11:11,170 --> 00:11:22,810 So now that we're selecting the device from the page, let's consider log the Divx elements and select 115 00:11:22,810 --> 00:11:27,820 the first one and see if we've got a user I.D. there that we can pick up. 116 00:11:29,740 --> 00:11:36,210 And if we can get that information, then we can get the user name and also have it editable as well. 117 00:11:36,790 --> 00:11:37,510 So clear. 118 00:11:37,730 --> 00:11:42,250 And now when we hit update, we're getting the value of three. 119 00:11:42,310 --> 00:11:44,800 So this is returning back the third person. 120 00:11:44,920 --> 00:11:51,010 So the ID is three on this user and we're able to pick it up because we hit it in the background. 121 00:11:51,610 --> 00:11:57,340 So also for this one, this will be whatever the user name is. 122 00:11:57,520 --> 00:12:02,260 So whatever text content we have in this element. 123 00:12:06,050 --> 00:12:14,120 So it hit update, we get the name and also if we want the email address, we could get the text content 124 00:12:14,120 --> 00:12:15,560 of the second element. 125 00:12:16,250 --> 00:12:20,090 So that's going to give us all the parameters that we need to send over. 126 00:12:25,820 --> 00:12:33,680 And that way we can make a post or a put to the end point to send the request. 127 00:12:37,330 --> 00:12:47,410 So let's make that selection and put them into variables and I'll put it into an object user info. 128 00:12:50,320 --> 00:12:53,090 And I usually like to use objects for these. 129 00:12:53,890 --> 00:13:02,200 So this is going to be the name and whatever we've got here for the content that we were originally 130 00:13:02,200 --> 00:13:11,980 outputting and then comma, separate that and the next one is going to be the ID and that's coming back 131 00:13:11,980 --> 00:13:14,770 from this parameter. 132 00:13:15,830 --> 00:13:18,790 And then the last one is the email. 133 00:13:20,530 --> 00:13:26,170 And that information is going to be contained within the text content of the second div. 134 00:13:30,270 --> 00:13:37,790 So save that and will console log the user info to make sure that we've got it properly. 135 00:13:40,240 --> 00:13:47,200 So we click it, we can clear the console, and as soon as we hit update, we're creating the user information, 136 00:13:47,200 --> 00:13:50,820 so we're ready to post that information on the update. 137 00:13:51,400 --> 00:13:53,130 So that's coming up in the next lesson. 138 00:13:53,350 --> 00:14:01,180 So this lesson continue to build out the application, make the users clickable and then also get the 139 00:14:01,180 --> 00:14:02,400 user information. 140 00:14:02,800 --> 00:14:06,440 So the other option as well is to do it differently than I did it. 141 00:14:06,850 --> 00:14:12,820 So in this case, I just want it to have some updatable fields and I'm able to update that. 142 00:14:12,820 --> 00:14:19,800 And then that information I can then send over to the server side with the post and the request. 143 00:14:20,470 --> 00:14:22,900 You can also add this as input fields. 144 00:14:23,170 --> 00:14:27,610 And again, depending on what the parameters are for the data that you're updating, you might want 145 00:14:27,610 --> 00:14:31,420 to make some adjustments to the way that you're presenting the content for the user. 146 00:14:34,420 --> 00:14:39,790 In this lesson, we're going to continue to build out the application and interact with the front end 147 00:14:39,790 --> 00:14:47,380 API, so loading the users, creating a separate page for the users, and then also creating an update 148 00:14:47,380 --> 00:14:54,610 button on that page and allowing the user to update the content that's being presented on the page in 149 00:14:54,610 --> 00:15:01,690 preparation for being able to send an update request to the endpoint for the user object.