1 00:00:00,260 --> 00:00:08,160 Beautiful, and once we're familiar with the up, of course, now we just want to grab my data and display 2 00:00:08,160 --> 00:00:08,940 my whole list. 3 00:00:09,300 --> 00:00:15,330 So that's going to be the starting point where instead of setting up the pages or something along those 4 00:00:15,330 --> 00:00:20,490 lines, I would just want to display the whole list of something, of course, we have done. 5 00:00:20,640 --> 00:00:24,060 I don't know, 20 or 30 times already in the course. 6 00:00:24,330 --> 00:00:31,650 So I think we should be fairly comfortable when we're looking for are the loading and data from my use 7 00:00:32,130 --> 00:00:32,850 custom hook. 8 00:00:33,090 --> 00:00:40,360 So I'll structure it right away, loading and then data that is coming from my use custom. 9 00:00:40,890 --> 00:00:41,220 Awesome. 10 00:00:41,610 --> 00:00:49,230 And then if you want to double check, just go log and then data and you should see andred items. 11 00:00:49,470 --> 00:00:54,750 So I'm going to go with localhost my pagination starrer because I didn't change anything in the UI but 12 00:00:54,750 --> 00:00:59,610 in the console in the beginning I have zero because of course we're still loading and then eventually 13 00:00:59,790 --> 00:01:02,400 we'll have the array of hundred items. 14 00:01:02,400 --> 00:01:02,820 Awesome. 15 00:01:03,270 --> 00:01:10,710 And once that is in play then of course I'm going to go with my return and then instead of the heading 16 00:01:10,710 --> 00:01:16,290 to I'm going to go with Maytag's and I'll start with my sexual title. 17 00:01:16,560 --> 00:01:19,290 So therefore the class of section title. 18 00:01:19,650 --> 00:01:26,070 And as far as the loading, I wanted to spice things up and we're not going to have to returns like 19 00:01:26,070 --> 00:01:27,570 we normally had. 20 00:01:27,570 --> 00:01:31,200 And I'm just going to go with loading inside of the heading one. 21 00:01:31,410 --> 00:01:35,130 So there's going to be adding one inside of my section title. 22 00:01:35,310 --> 00:01:37,590 And then in here I'm just going to check for loading. 23 00:01:37,890 --> 00:01:41,340 If we're loading, then I'll display loading up. 24 00:01:41,370 --> 00:01:42,720 So that's going to be my text. 25 00:01:42,720 --> 00:01:48,270 So loading Dardanup and then if we're not loading, then we're just going to go with pagination. 26 00:01:48,570 --> 00:01:51,060 So whatever title you would want. 27 00:01:51,270 --> 00:01:58,830 And then since I'm obsessed with my underlines, I'm going to go with underline and I should say that 28 00:01:58,830 --> 00:02:02,190 we're loading and then eventually we have the pagination. 29 00:02:02,520 --> 00:02:05,610 And of course, I would want to display those followers. 30 00:02:05,910 --> 00:02:10,650 So we're going to go here with a section and then the class will be all the worse. 31 00:02:10,650 --> 00:02:12,420 No surprises over here. 32 00:02:12,750 --> 00:02:17,340 And then once I have my section, then, of course, I would want to have a container. 33 00:02:17,550 --> 00:02:21,420 So there was a class of container and we have our followers. 34 00:02:22,140 --> 00:02:25,550 And at the moment, of course, I don't have that state of value. 35 00:02:25,830 --> 00:02:27,890 So eventually there's going to be followers. 36 00:02:27,900 --> 00:02:29,400 That's why I started typing that. 37 00:02:29,400 --> 00:02:37,110 But for the time being, let's just go with data and then map and then for every follower, I would 38 00:02:37,110 --> 00:02:39,240 want to return my follower component. 39 00:02:39,600 --> 00:02:46,660 So I'm going to go here with my parameter follower and then I would want to return a follower component. 40 00:02:46,980 --> 00:02:48,570 Now we need to have the key. 41 00:02:48,870 --> 00:02:54,990 And if you check out the object that you're getting from the data and you can actually see it here in 42 00:02:54,990 --> 00:02:59,720 the browser right away, they have already the ID property with some kind of value. 43 00:03:00,000 --> 00:03:01,950 So that's what I'm passing here in the key. 44 00:03:02,260 --> 00:03:07,950 I'm just going to say follower and then ID and then remember the spirit operator DOT and then we just 45 00:03:07,950 --> 00:03:11,370 pass in the data that is in the follower. 46 00:03:11,680 --> 00:03:19,470 I'll close my follower component and then of course for the time being we'll just have all these adventures 47 00:03:19,770 --> 00:03:23,160 because that's what I have in the follower jass. 48 00:03:23,370 --> 00:03:26,010 So let me navigate there to follow Hejaz. 49 00:03:26,310 --> 00:03:27,900 And as far as the structuring. 50 00:03:28,840 --> 00:03:35,940 What properties am I looking for, I would want to show the Avatar, Yoro, so that is the image also. 51 00:03:36,010 --> 00:03:37,280 I would want to get the email. 52 00:03:37,330 --> 00:03:44,360 You are so link that points back to that specific GitHub user and also login. 53 00:03:44,650 --> 00:03:49,030 So that is going to be the nickname or user name however you would want to call it. 54 00:03:49,450 --> 00:03:55,510 So to navigate back within the structure that you're going to say Avatar and then underscore your URL, 55 00:03:55,840 --> 00:04:00,880 then I'm going to go with HDMI, underscore you all, and eventually also a login. 56 00:04:01,240 --> 00:04:07,000 And once we the structure of these three things, I'm going to go with my article and of course, we'll 57 00:04:07,000 --> 00:04:15,970 make this pretty sure I'm going to add a class of card that is coming from my CNS and in here, let's 58 00:04:15,970 --> 00:04:16,840 go with image. 59 00:04:17,110 --> 00:04:23,650 And as far as the source, let's pass in the avatar underscore you are all that is the property that 60 00:04:23,650 --> 00:04:25,180 is responsible for the image. 61 00:04:25,500 --> 00:04:33,100 Then I also would want to display the login look so vandi heading for and I'm going to go with a login 62 00:04:33,100 --> 00:04:36,060 over here so let's go here with a login. 63 00:04:36,220 --> 00:04:36,690 OK, so. 64 00:04:36,880 --> 00:04:39,010 So we should have already cards. 65 00:04:39,370 --> 00:04:45,910 We had some kind of name and then eventually our want to display a link that points back to the user. 66 00:04:46,210 --> 00:04:53,320 So we go with this is going to be of course the HDMI underscore you are all online just because I would 67 00:04:53,320 --> 00:04:59,410 want to add a little bit of this as we're going to go with class name and then beaten and has a value 68 00:04:59,710 --> 00:05:04,120 as a text value, how we're going to go with you online profile. 69 00:05:04,900 --> 00:05:11,590 We say if we can navigate to a bigger screen and then, of course, we have the list of the followers, 70 00:05:11,740 --> 00:05:16,570 again, whether that is 30, whether or not it's five thousand, whether that is thirty thousand. 71 00:05:16,870 --> 00:05:18,940 We have our whole list. 72 00:05:19,420 --> 00:05:25,180 Now, of course, we'll have to make things a bit more interesting and generate our data.