1 00:00:00,180 --> 00:00:07,430 So let's navigate to the people we're looking for Project 18 and then, of course, the set up. 2 00:00:08,190 --> 00:00:13,620 So we're going to go with KDDI, then I'm going to grab my set of folder and then we're going to go 3 00:00:13,620 --> 00:00:23,040 with NPM, install and start as well once we navigate to the subfolder more specifically, so we can 4 00:00:23,040 --> 00:00:27,720 see that we have an address where we'll set up most of our logic. 5 00:00:28,080 --> 00:00:29,490 Again, let me emphasize this. 6 00:00:29,490 --> 00:00:36,960 Most of our logic and also I'm going to have the follower where I'm going to play that one follower. 7 00:00:37,230 --> 00:00:43,860 So now is the card that just shows the image, the name, as well as link back to the profile. 8 00:00:44,310 --> 00:00:45,770 That is going to be another component. 9 00:00:45,780 --> 00:00:48,990 Of course, we already have all the access for us. 10 00:00:49,020 --> 00:00:57,990 So that is in the index us then to speed it up a little bit, I went with use Futch, not please. 11 00:00:57,990 --> 00:01:04,170 If you need to go back to the aureole where I covered how we can set up the custom hook, please do 12 00:01:04,170 --> 00:01:10,950 so because since we need to set up the request, I just thought that we can speed this up by using the 13 00:01:10,950 --> 00:01:14,040 custom hook that we already created before. 14 00:01:14,280 --> 00:01:16,100 Now I will go over to Kodo. 15 00:01:16,320 --> 00:01:21,500 So essentially we have loading and unloading and then we have used that and by default that is true. 16 00:01:21,780 --> 00:01:26,880 And then I have data and then set data and I know that eventually it's going to be an array. 17 00:01:27,060 --> 00:01:33,060 But for the time being I just have the empty array, but I have my function get products and that is 18 00:01:33,060 --> 00:01:33,630 async. 19 00:01:33,930 --> 00:01:41,240 So I set up my async away syntax where of course we're using Futch API and then I pass in the URL. 20 00:01:41,520 --> 00:01:43,920 So what is the you representing? 21 00:01:43,950 --> 00:01:50,790 Well, if you just grab the string and then copy and paste, you'll notice that essentially this is 22 00:01:50,790 --> 00:01:55,800 coming from GitHub API and then you can pass in whichever user you want. 23 00:01:56,040 --> 00:02:02,540 Now I would suggest user that has at least 100 followers because of course our logic depends on that. 24 00:02:02,910 --> 00:02:04,410 So that's why I went with mine. 25 00:02:04,410 --> 00:02:07,260 But of course you can pass in whichever user you would want. 26 00:02:07,470 --> 00:02:10,850 And then more specifically, we're looking for followers. 27 00:02:11,160 --> 00:02:16,890 And then I added the URL parameter one hundred per page, because, of course I would want to get as 28 00:02:16,890 --> 00:02:23,010 many followers as possible since it's just going to make our functionality more interesting. 29 00:02:23,280 --> 00:02:27,090 So I requested and then I right away go with some data. 30 00:02:27,360 --> 00:02:33,420 So I add that array as my new value and I set loading topos. 31 00:02:33,660 --> 00:02:37,290 So I invoke it with usufruct when the app renders. 32 00:02:37,470 --> 00:02:42,610 And then since that is my custom hook, I just go with a loading and there. 33 00:02:42,840 --> 00:02:47,100 So those are two things that I return from this customer. 34 00:02:47,400 --> 00:02:53,100 Now there's also utils jayesh where we'll set up our pagination function. 35 00:02:53,340 --> 00:02:59,370 And then if you check out the objets, we have one import or more specifically, to import. 36 00:02:59,410 --> 00:03:05,010 I guess we have uSwitch, which is going to get the loading and our data. 37 00:03:05,220 --> 00:03:14,010 So our users and also we have this Followill component, which is responsible for rendering that one 38 00:03:14,160 --> 00:03:17,200 specific follower that should be the setup. 39 00:03:17,490 --> 00:03:20,280 So now, of course, we can start typing our code.