1 00:00:00,790 --> 00:00:05,520 In this video we're going to start thinking about putting together the user Hetter component to be precise. 2 00:00:05,520 --> 00:00:07,730 We're not going to work on the component just yet. 3 00:00:07,830 --> 00:00:12,120 Instead we're going to focus on making sure that we have loaded up the data that we need to show the 4 00:00:12,120 --> 00:00:13,110 user header. 5 00:00:13,140 --> 00:00:14,480 Now that might sound confusing. 6 00:00:14,490 --> 00:00:18,420 So let me give you a quick reminder on how this API is structured. 7 00:00:18,450 --> 00:00:18,890 All right. 8 00:00:18,900 --> 00:00:21,220 Here's the documentation for the API we're using. 9 00:00:21,240 --> 00:00:24,750 Remember it's that Jaison placeholder Dom Type-I Cocom. 10 00:00:24,960 --> 00:00:27,010 I'm looking at the resources section. 11 00:00:27,330 --> 00:00:32,730 At present we are loading up this list of posts into our application so our app is currently showing 12 00:00:32,750 --> 00:00:35,300 a 100 different blog posts on the screen. 13 00:00:35,400 --> 00:00:42,260 We can open up that in point and we can see all the data that our application is currently retrieving. 14 00:00:42,270 --> 00:00:43,600 All right here we go. 15 00:00:43,740 --> 00:00:46,600 So we have this list of blog post we have a body. 16 00:00:46,620 --> 00:00:47,550 We have a title. 17 00:00:47,640 --> 00:00:49,580 We have the ID of each blog post. 18 00:00:49,740 --> 00:00:55,170 And then very important for what we are trying to do right now we have the ID of the user who made this 19 00:00:55,170 --> 00:00:56,550 blog post. 20 00:00:56,550 --> 00:01:01,170 So this post right here was made by the user with I-T one and the same thing at the next post and the 21 00:01:01,170 --> 00:01:02,530 next post and so on. 22 00:01:03,090 --> 00:01:06,660 Every ten posts inside of here has been made by a different user. 23 00:01:06,780 --> 00:01:14,020 So if I scroll down 10 posts I'll see that I now move onto the next user the user with ID number two. 24 00:01:14,310 --> 00:01:16,530 And then we can keep on going down down down down. 25 00:01:16,530 --> 00:01:19,590 Eventually we'll see that we get to user with I-T 10. 26 00:01:19,770 --> 00:01:26,480 So all of the blog posts that we have retrieved are made by user 1 2 3 4 5 6 7 8 9 or 10. 27 00:01:26,970 --> 00:01:33,660 So to figure out the details about each of those users we are going to have to make an additional API 28 00:01:33,690 --> 00:01:39,450 request if you go back over to this Resources section right here you'll see the users and point. 29 00:01:39,450 --> 00:01:44,840 So we can open up that request and you'll see that this endpoint has 10 different users. 30 00:01:44,910 --> 00:01:50,930 So user with 81 82 and all the way down to I-T 10 down here. 31 00:01:50,950 --> 00:01:57,560 So essentially if we want to show the actual name of the author of that post inside this user Hetter 32 00:01:57,580 --> 00:02:03,750 component for every blog post we are going to have to make a follow up request to the user's endpoint. 33 00:02:03,820 --> 00:02:09,870 Get that list of users and that will tell us essentially who made which blog post and Lookout's and 34 00:02:09,870 --> 00:02:11,510 other we understand the problem here. 35 00:02:11,540 --> 00:02:15,920 I want to tell you there is kind of an easy way to do this and there is a hard way to do it. 36 00:02:16,130 --> 00:02:20,840 So the first show you the easy way because unfortunately for us we're going to do it the hard way so 37 00:02:20,870 --> 00:02:22,420 easy way first. 38 00:02:22,420 --> 00:02:24,460 All right so a quick diagram. 39 00:02:24,740 --> 00:02:28,850 I put this diagram together here just to make sure it's really clear how the list of posts related to 40 00:02:29,060 --> 00:02:33,450 each user but I think you probably understand that relationship so we'll just get that diagram. 41 00:02:33,710 --> 00:02:39,560 OK so we know that we have the entire list of posts and we know that that users endpoint will return 42 00:02:39,560 --> 00:02:44,880 us every user that exists inside of this kind of little mini application. 43 00:02:44,900 --> 00:02:49,880 In other words if we make a request to posts and a second request to the user's endpoint we're going 44 00:02:49,880 --> 00:02:55,850 to have without a doubt all of the application or all seem to all the data that our application needs. 45 00:02:55,850 --> 00:02:58,720 Now here's the problem that's like way too easy. 46 00:02:58,730 --> 00:03:02,160 This is a little sample application to help you learn things. 47 00:03:02,250 --> 00:03:07,330 Nonetheless just getting that entire list of users from the get go is just entirely too easy. 48 00:03:07,340 --> 00:03:09,380 Let me tell you why that's too easy. 49 00:03:09,410 --> 00:03:14,750 I want you to think about a real blogging application like say medium dotcom if you've ever been over 50 00:03:14,750 --> 00:03:18,570 there medium Dotcom has like millions of blog posts. 51 00:03:18,680 --> 00:03:25,170 Millions of users if they want to show a list of blog posts along with their authors to the user or 52 00:03:25,170 --> 00:03:30,780 to a user as we are doing right now the medium people you know the engineers are not going to send your 53 00:03:30,780 --> 00:03:34,920 browser a list of like a million blog posts and a million users. 54 00:03:35,040 --> 00:03:39,330 Instead they're going to send you like 10 blog posts to show on the screen or something like that. 55 00:03:39,480 --> 00:03:44,210 And then you'll have to make a follow up request for each of those individual users. 56 00:03:44,220 --> 00:03:49,560 So if we just made the request for all the users that we would ever need it's just too easy and it's 57 00:03:49,560 --> 00:03:50,690 not realistic. 58 00:03:50,760 --> 00:03:54,480 That is not how you're going to see things done in a real application. 59 00:03:54,480 --> 00:03:57,530 So instead we're going to do things kind of like a hard way. 60 00:03:57,540 --> 00:03:57,780 All right. 61 00:03:57,780 --> 00:03:59,150 Just a little bit more challenging. 62 00:04:00,080 --> 00:04:05,360 If you go back over to the documentation over here under the resources section you can see there is 63 00:04:05,420 --> 00:04:06,840 routes right here. 64 00:04:07,310 --> 00:04:09,220 So take a look at the second route. 65 00:04:09,230 --> 00:04:14,780 What this is essentially telling us is that we can make requests to get one individual record at a time 66 00:04:15,260 --> 00:04:19,380 as opposed to these big gigantic lists of records that we've been taking a look at. 67 00:04:19,580 --> 00:04:26,150 So for example if I wanted to only get the user with I.T. one I could change the you are you are l appear 68 00:04:26,150 --> 00:04:30,060 from slash users to users slash 1. 69 00:04:30,110 --> 00:04:34,160 So that means as you might guess give me the user with the ID of one. 70 00:04:34,290 --> 00:04:40,640 And so when I go there I see just the first user on the screen and I can do user at 32 and so on all 71 00:04:40,640 --> 00:04:44,630 the way up to user ID 10 like so. 72 00:04:44,640 --> 00:04:47,650 So with that in mind here's the flow that you and I are going to go through. 73 00:04:48,510 --> 00:04:49,500 All right. 74 00:04:49,560 --> 00:04:54,230 So inside of application everything is going to start off with us fetching that list appose. 75 00:04:54,360 --> 00:04:56,340 So we're going to make an API request. 76 00:04:56,340 --> 00:05:01,190 And then after some period of time indicated by this little arrow right here we're going to get a response. 77 00:05:01,230 --> 00:05:03,360 We're going to return that data from producer. 78 00:05:03,360 --> 00:05:08,340 All that stuff and then eventually we're going to show our lists opposed to the user inside that post 79 00:05:08,340 --> 00:05:09,870 list component. 80 00:05:09,870 --> 00:05:15,810 Now inside of that render list method that we have inside there we're going to create a separate instance 81 00:05:16,020 --> 00:05:20,280 of the user header component for every individual post. 82 00:05:20,280 --> 00:05:25,110 In other words if we go back over to the render list method right here this map function right here 83 00:05:25,170 --> 00:05:29,580 or the inner function I should say is going to be executed a hundred times because we have a hundred 84 00:05:29,580 --> 00:05:30,830 different posts. 85 00:05:30,900 --> 00:05:37,510 So somewhere inside if you're like let's say right here we're going to place our user Hetter component 86 00:05:37,980 --> 00:05:43,110 and we're going to give it a prop of something like user ID and inside of you will put whatever this 87 00:05:43,110 --> 00:05:49,470 particular user's ideas for this particular blog post be it like one or two or three or four or ten 88 00:05:49,470 --> 00:05:50,480 whatever it is. 89 00:05:50,650 --> 00:05:55,530 And so we're going to create a bunch of instances of the user header component and each one is going 90 00:05:55,530 --> 00:06:00,100 to know exactly what Id user ID needs to show on the screen. 91 00:06:00,120 --> 00:06:03,070 Now I'm going to clean this code up I just want to give you a quick example. 92 00:06:04,890 --> 00:06:11,400 So then inside of the user header component we're going to add a call to a new action creator that's 93 00:06:11,400 --> 00:06:17,620 going to attempt to fetch just the individual user that that instance of the user header needs. 94 00:06:17,850 --> 00:06:22,330 So we're going to end up with a bunch of separate requests for each individual user. 95 00:06:22,350 --> 00:06:25,960 So this would be like fetch a user id one. 96 00:06:25,980 --> 00:06:31,890 This would be like ID too and ID 3 and so on and so we're going to make 10 separate requests. 97 00:06:31,890 --> 00:06:38,160 In theory one for each user will get each user return it back to our application somehow process that 98 00:06:38,170 --> 00:06:45,660 through a reducer and somehow get each relevant user into each instance of the user Hetter component. 99 00:06:45,670 --> 00:06:46,040 All right. 100 00:06:46,080 --> 00:06:51,630 So thats the idea essentially the idea here just to sum up is that if we just fetch the entire list 101 00:06:51,630 --> 00:06:57,540 of users that is too easy and the real world does not work like that youre not going to get this like 102 00:06:57,840 --> 00:07:02,690 nice and point this is going to give you a list of every record that you need in the real world instead. 103 00:07:02,700 --> 00:07:08,100 Its way more common to do some initial request to get like a list of records and then you have to make 104 00:07:08,190 --> 00:07:14,130 a bunch of individual follow up requests to get more information about each of the original records. 105 00:07:14,160 --> 00:07:16,720 And so that's that's is exactly what we want to do. 106 00:07:16,830 --> 00:07:21,600 We want to get the big list and then make some smaller requests to follow up on it and get just the 107 00:07:21,600 --> 00:07:22,770 information we need. 108 00:07:23,950 --> 00:07:24,180 Okay. 109 00:07:24,200 --> 00:07:27,490 So along the way we're going to see a lot of fun. 110 00:07:27,490 --> 00:07:32,450 We're going to encounter one or two kind of catastrophic problems but hey that's where the learning 111 00:07:32,480 --> 00:07:33,280 actually kicks in. 112 00:07:33,290 --> 00:07:37,460 So anyway let's take a quick pause right here and we're going to start putting all the solutions together 113 00:07:37,700 --> 00:07:38,450 in the next video.