1 00:00:00,180 --> 00:00:08,480 OK, so if you would like to see how I would refactor this application to a used futch custom hook, 2 00:00:08,880 --> 00:00:10,270 here it goes. 3 00:00:10,660 --> 00:00:13,350 So course, first our need to create a file. 4 00:00:13,890 --> 00:00:21,360 And of course, I'm going to call unless you switch gears, then I'm going to set up my component, 5 00:00:21,720 --> 00:00:23,670 which essentially is not going to be component. 6 00:00:24,060 --> 00:00:25,470 But let's just live with that. 7 00:00:25,800 --> 00:00:28,660 So we're going to have our use for custom hook. 8 00:00:29,100 --> 00:00:32,020 And now, of course, I would want to navigate to context. 9 00:00:32,050 --> 00:00:32,390 Yes. 10 00:00:32,730 --> 00:00:39,600 And I just need to think about the setup that I would want to grab from this context. 11 00:00:40,350 --> 00:00:47,100 And I would pretty much want everything apart from this query, so query is going to be the one that 12 00:00:47,250 --> 00:00:54,670 stays in the context, however, of the remainder of the state values, as well as much more functions. 13 00:00:55,020 --> 00:01:02,310 Of course, I would want to set up in my usufruct and I'm going to have to start by importing, of course. 14 00:01:03,270 --> 00:01:10,110 The U.S. state and the fact so I just think that it is going to be quicker if I do it from the context 15 00:01:10,130 --> 00:01:16,770 one, so not only I would want to react, I also would want to grab the U.S. state as well as use the 16 00:01:16,790 --> 00:01:17,030 fact. 17 00:01:17,280 --> 00:01:18,510 Now, I don't need the context. 18 00:01:18,840 --> 00:01:21,600 So I want of course, I can remember now. 19 00:01:21,600 --> 00:01:24,480 I also will use this one, the end point. 20 00:01:24,960 --> 00:01:32,420 That's why in here I'm going to say that I would like to grab this value now, again, in my case, 21 00:01:32,430 --> 00:01:33,440 I'm just going to copy them. 22 00:01:33,450 --> 00:01:39,270 But normally, course, you would remove them from the context as well, since there's going to be no 23 00:01:39,270 --> 00:01:41,520 need when we copy and paste. 24 00:01:41,520 --> 00:01:42,830 Of course, there it is. 25 00:01:42,840 --> 00:01:50,430 Now we have our end point and there we have currently our Cambourne, which, of course, eventually 26 00:01:50,680 --> 00:01:54,510 is going to be our custom use. 27 00:01:54,750 --> 00:02:02,490 But now, of course, keep in mind that the name here is important because otherwise you won't be able 28 00:02:02,820 --> 00:02:04,620 to invoke your. 29 00:02:05,340 --> 00:02:07,800 So in this case, I'm going to remove that export part. 30 00:02:08,810 --> 00:02:15,170 And I honestly also don't need it here, so that should be our start and then we go with export and 31 00:02:15,170 --> 00:02:18,200 then default and then let's call this use. 32 00:02:18,200 --> 00:02:23,090 And then like I said, there's plenty of things that I would want from here. 33 00:02:23,570 --> 00:02:26,210 So I'll just cut it out right now. 34 00:02:26,510 --> 00:02:31,910 My state values like so so we're going to copy and paste since we name this years. 35 00:02:32,160 --> 00:02:37,070 Now, of course, I can use these vouchers and I know I've said this before, but that is very, very 36 00:02:37,070 --> 00:02:37,580 important. 37 00:02:38,030 --> 00:02:44,570 Then as far as the return, what's not really going to be a dif we'll have to decide on the state values 38 00:02:44,720 --> 00:02:45,820 that we're returning. 39 00:02:46,130 --> 00:02:47,510 So we go back to the context. 40 00:02:47,750 --> 00:02:55,660 And of course, I would want to also grab this one so the French as well as the function here. 41 00:02:55,850 --> 00:03:01,070 So I take all of this content out and we navigate back to use French. 42 00:03:01,490 --> 00:03:06,980 And of course, we're going to copy and paste and eventually we will return a object. 43 00:03:07,490 --> 00:03:09,050 So now I have my usufruct. 44 00:03:09,440 --> 00:03:16,610 I'm watching for movies, I have my end point and I'm also going to be passing in the library. 45 00:03:16,820 --> 00:03:18,440 And this looks somewhat good. 46 00:03:19,070 --> 00:03:24,890 But of course, we need to keep in mind that we'll have to set this up dynamically where at the moment, 47 00:03:24,900 --> 00:03:31,690 yeah, we have tutorials, we have one for search and then one for the idea. 48 00:03:32,390 --> 00:03:40,640 Or I would want to construct this use, which has in a way that I can use it in both places. 49 00:03:40,990 --> 00:03:44,230 That's why I'll say here you are all primes. 50 00:03:44,510 --> 00:03:46,160 So that's something that will pass. 51 00:03:46,280 --> 00:03:50,750 And, um, instead of the query, I'll also change this one around. 52 00:03:50,750 --> 00:03:51,830 You are all problems. 53 00:03:52,190 --> 00:03:59,960 So think of it as parameters that will pass in here in the U.S. But now here I'm still using the YORO, 54 00:04:00,440 --> 00:04:01,430 so I won't change. 55 00:04:01,790 --> 00:04:05,270 So of course I'm passing this here where I have the API endpoint. 56 00:04:05,630 --> 00:04:13,640 And the second thing that I would want to pass in is, of course, the euro and then primes and of course 57 00:04:13,820 --> 00:04:15,470 now have to construct those. 58 00:04:15,740 --> 00:04:22,310 You are operands where we invoke our use, Futch, and then we need to take a look at our state values. 59 00:04:22,670 --> 00:04:23,930 So we have is loading. 60 00:04:24,440 --> 00:04:26,300 We have set this loading hankered. 61 00:04:26,510 --> 00:04:28,220 We have error set error. 62 00:04:28,550 --> 00:04:29,360 OK, awesome. 63 00:04:29,600 --> 00:04:32,330 And the movies and set numbers. 64 00:04:32,720 --> 00:04:34,370 So what values are we looking for? 65 00:04:34,400 --> 00:04:39,410 Well, I would want to return his loading error as well as the movies. 66 00:04:39,770 --> 00:04:43,820 So I'll scroll down here and we'll say that we're returning an object. 67 00:04:43,820 --> 00:04:45,740 Of course, in the object. 68 00:04:45,740 --> 00:04:47,950 We would want to check whether we're alone. 69 00:04:48,410 --> 00:04:51,560 Then we also would want to pass in the era, of course. 70 00:04:51,950 --> 00:04:59,600 And then eventually I also would want to grab my movies now for the movies, though I wouldn't want 71 00:04:59,600 --> 00:05:04,940 to change this around a little bit and call this data, because we need to understand that, yes, in 72 00:05:04,940 --> 00:05:08,390 the beginning we're going to have the movies as an array. 73 00:05:08,390 --> 00:05:12,110 But when we talk about that, one movie, of course, is going to be an object. 74 00:05:12,500 --> 00:05:15,380 So instead, I'm just going to call this data. 75 00:05:15,740 --> 00:05:19,880 So I have a name that is a bit more universal. 76 00:05:20,280 --> 00:05:25,420 We'll go with data and then sit there and notice where I have the set movies. 77 00:05:25,700 --> 00:05:32,880 Now, of course, I'm going to go with data and then I'm going to pass in the search now. 78 00:05:32,920 --> 00:05:38,990 Yes, there's still one Gocha over there, but for the time being, well, just going to go with this 79 00:05:38,990 --> 00:05:43,340 setup where I go with some data and then I pass in data. 80 00:05:43,400 --> 00:05:46,100 So whatever, I'm getting back and the search. 81 00:05:46,990 --> 00:05:54,160 So now, of course, I'm returning all of these things and of course, I need to also return the data 82 00:05:54,490 --> 00:06:00,740 as well, and then we navigate back to the context we would want to import our use for. 83 00:06:01,390 --> 00:06:05,350 So we go here with years, which and that is coming from. 84 00:06:05,380 --> 00:06:09,670 And of course, we're looking for our use fetch function. 85 00:06:10,060 --> 00:06:13,930 And where we have these two hours, we leave the query. 86 00:06:14,350 --> 00:06:16,860 So that stays exactly the same. 87 00:06:17,200 --> 00:06:22,090 But of course, now below that I would want to invoke might use fetch. 88 00:06:22,390 --> 00:06:29,110 So I'm going to go with my years FUTCH and this is where I would want to pass in that you are Uprima 89 00:06:29,320 --> 00:06:31,400 because remember in the U.S. 90 00:06:31,900 --> 00:06:33,010 I'm looking for those. 91 00:06:33,250 --> 00:06:34,450 You are upper arms. 92 00:06:34,780 --> 00:06:36,640 And how do we set this up again? 93 00:06:36,650 --> 00:06:37,550 We're going to go with them. 94 00:06:37,570 --> 00:06:39,370 Let's try and learn. 95 00:06:39,430 --> 00:06:40,280 What was the value. 96 00:06:40,630 --> 00:06:44,060 Well, we needed to set up, of course, our. 97 00:06:44,110 --> 00:06:44,590 And. 98 00:06:45,480 --> 00:06:49,440 Because that was required by the API and then would go with us. 99 00:06:49,770 --> 00:06:55,820 And then, of course, I'm looking for my query like so query here. 100 00:06:56,290 --> 00:07:03,050 And then, of course, what is going to happen is that I'm going to be getting back from the use fetch 101 00:07:03,210 --> 00:07:03,720 the values. 102 00:07:03,750 --> 00:07:04,110 Correct. 103 00:07:04,470 --> 00:07:10,860 So I'll still get these loading, I'll still get the error and I'm going to get data that I'm going 104 00:07:10,860 --> 00:07:16,440 to call some data and then that one is equal to the more. 105 00:07:16,950 --> 00:07:18,990 So we save the moment. 106 00:07:18,990 --> 00:07:25,470 I have the complaint that important body of module reorder to the top and the error, of course, is 107 00:07:25,470 --> 00:07:27,960 there because I placed it below the variable. 108 00:07:28,350 --> 00:07:34,180 But then once I save and I navigate back to the movies, everything should work. 109 00:07:34,740 --> 00:07:42,360 So here, let's go back to the movies and we should display all the movies so that functionality still 110 00:07:42,480 --> 00:07:43,460 should work. 111 00:07:43,860 --> 00:07:49,280 So we're going to navigate to the bigger screen I invoke that shouldn't change. 112 00:07:49,590 --> 00:07:55,440 So I still get is loading, I still get error and I still get data on this case. 113 00:07:55,710 --> 00:07:59,270 I call this movie and I just pass in my query. 114 00:07:59,490 --> 00:08:04,950 So now of course, I would just want to test it out whether when I'm typing, everything works and as 115 00:08:04,950 --> 00:08:07,650 you can see, I can still get the movies. 116 00:08:08,200 --> 00:08:15,300 Now, the key here is to do the same thing in a single movie because again, our main goal was following 117 00:08:15,780 --> 00:08:18,870 where I only want to set up one fetch. 118 00:08:19,200 --> 00:08:23,170 There's really no need for me to repeat the same functionality. 119 00:08:23,490 --> 00:08:27,210 So we're going to navigate to the single movie course here. 120 00:08:27,210 --> 00:08:31,410 We have the idea and I'm going to have movie set movie and then fetch more. 121 00:08:31,770 --> 00:08:39,120 So instead, what I would want to do is go with import and not use fetch and not use fact. 122 00:08:39,190 --> 00:08:42,450 Sorry, use fetch from online. 123 00:08:42,510 --> 00:08:48,870 Of course we have use for each file and I'll still keep the idea so that won't change. 124 00:08:48,870 --> 00:08:51,110 But all of this I can nicely replace. 125 00:08:51,630 --> 00:08:54,980 So I'm going to remove the usufruct as well. 126 00:08:55,530 --> 00:08:58,440 And again I would want to invoke uSwitch. 127 00:08:58,620 --> 00:09:04,800 So in this case I'm going to go online all the structure from my object that I'm getting back used for 128 00:09:04,950 --> 00:09:09,910 and remember in the use fetch we needed to pass in those euro parameters. 129 00:09:10,260 --> 00:09:13,650 So in this case, I'm looking for I am unequals. 130 00:09:13,920 --> 00:09:17,490 And then, of course, I'm looking for the correct. 131 00:09:17,700 --> 00:09:21,260 So whatever is the profit entity, use fetch. 132 00:09:21,570 --> 00:09:25,580 And then again, what I'm getting back from the use is loading. 133 00:09:26,070 --> 00:09:35,400 Then I also want to get the error and I also want to get data that our name is movie Y or because value 134 00:09:35,400 --> 00:09:36,170 is going to be different. 135 00:09:36,480 --> 00:09:37,830 Now there is a gotcha. 136 00:09:38,250 --> 00:09:43,620 And don't get me wrong, they're still gocher because at the moment I'm just checking if the response 137 00:09:43,620 --> 00:09:44,100 is true. 138 00:09:44,790 --> 00:09:46,860 And of course I'm checking for a search. 139 00:09:47,310 --> 00:09:54,090 But when I'm going to be getting the single movie and of course it is not just going to be data search, 140 00:09:54,390 --> 00:09:56,100 it is just going to be an object. 141 00:09:56,460 --> 00:09:59,400 So for the time being, why don't we do this? 142 00:09:59,860 --> 00:10:07,350 Why don't we just comment about this data search answer and let's just cancel log what we have or not. 143 00:10:07,420 --> 00:10:08,520 Now, let's do it this way. 144 00:10:08,770 --> 00:10:09,990 We'll leave the data search. 145 00:10:09,990 --> 00:10:13,050 But let's just log what we have in a data. 146 00:10:13,200 --> 00:10:15,600 So, of course, we'll have to set up one more. 147 00:10:15,610 --> 00:10:23,770 If so, let's go here with data and then we'll pass in data that search into the moreish. 148 00:10:23,790 --> 00:10:27,030 So setting up our memories with the values that we're getting here. 149 00:10:27,270 --> 00:10:32,280 But I also would want to console log that there, because we need to keep in mind that even though our 150 00:10:32,280 --> 00:10:38,820 functionality here is going to work beautifully, well, there's going to be one error once we go to 151 00:10:38,820 --> 00:10:43,620 the second one and then he notices this invalid API key. 152 00:10:44,100 --> 00:10:44,430 Hmm. 153 00:10:44,700 --> 00:10:49,290 OK, so let's not forget to the bigger screen and let's see. 154 00:10:49,740 --> 00:10:51,000 So we have our console. 155 00:10:51,210 --> 00:10:52,200 OK, that is good. 156 00:10:52,400 --> 00:10:59,030 I'm getting back the object and in here initially I get back on all of these are bad memories and all 157 00:10:59,040 --> 00:10:59,340 that. 158 00:10:59,610 --> 00:11:05,340 But then once I navigate here, notice that I have the complaint that this doesn't make sense. 159 00:11:05,460 --> 00:11:08,670 OK, so the error is actually not the one that I was expecting. 160 00:11:08,970 --> 00:11:12,420 It is because I didn't set up the API properly nourished. 161 00:11:12,660 --> 00:11:20,250 I have API key and then I did not the and so right away had I to get the idea and that's why I have 162 00:11:20,250 --> 00:11:20,640 the error. 163 00:11:20,940 --> 00:11:27,300 So I've navigate to the single movie and in here let's add and, and we shouldn't get this error anymore. 164 00:11:27,300 --> 00:11:31,920 However, there's going to be a different error and that's why we're allowing the data as well. 165 00:11:32,160 --> 00:11:39,810 And now I can see that kind of the structure property of poster of movie as it is undefined right here. 166 00:11:40,140 --> 00:11:41,320 So why is that happening? 167 00:11:41,640 --> 00:11:42,690 Well, let's check. 168 00:11:43,140 --> 00:11:44,440 What is the value of. 169 00:11:44,540 --> 00:11:45,580 That we're getting back. 170 00:11:45,650 --> 00:11:51,960 So let me refresh here and notice how I have the search, so that is my right. 171 00:11:52,370 --> 00:11:56,030 But what I should be getting back is, of course, of this movie. 172 00:11:56,420 --> 00:12:02,930 And here I just simply need to change this around where if there is a search, yes, I would want to 173 00:12:02,930 --> 00:12:05,600 pass in the property value, which is going to be my. 174 00:12:05,930 --> 00:12:12,650 However, if I'm looking for a single movie, I know that that search won't be on the object. 175 00:12:12,650 --> 00:12:13,070 Correct. 176 00:12:13,430 --> 00:12:17,330 Because I can clearly see that I'm right away getting back the object. 177 00:12:17,610 --> 00:12:19,280 That is what I'm canceling. 178 00:12:19,760 --> 00:12:23,600 So I'm going to say if their search property exists, awesome. 179 00:12:24,410 --> 00:12:31,430 And if not, just get me the data, which just means that I'm going to be in a single movie page. 180 00:12:31,790 --> 00:12:37,790 So now, of course, our functionality works and we only need to remove those council logs. 181 00:12:38,180 --> 00:12:42,380 So I'm going to go to the movies and remember where I was looking for the poster. 182 00:12:42,770 --> 00:12:43,970 I'm going to remove that. 183 00:12:44,210 --> 00:12:51,450 And successfully we set up all our functionality when it comes to fetch in one place. 184 00:12:51,470 --> 00:12:53,870 Yes, we had to jump through some hoops. 185 00:12:54,170 --> 00:12:55,190 We needed to add. 186 00:12:55,190 --> 00:12:56,600 Here you are, Oppenheim's. 187 00:12:56,900 --> 00:13:03,560 We needed to set a little bit differently as far as when we're invoking the French and what we're returning. 188 00:13:03,860 --> 00:13:09,830 And also we need to check whether we are searching for the movies or we're just getting a single movie. 189 00:13:10,040 --> 00:13:12,310 But now check it out in the context. 190 00:13:12,470 --> 00:13:17,920 We only have query and I'm just using my uSwitch and the same in a single movie. 191 00:13:18,230 --> 00:13:24,890 Now, I don't have this repeating functionality and let me just don't check that everything works. 192 00:13:24,890 --> 00:13:25,730 We have Batman. 193 00:13:26,060 --> 00:13:28,160 I keep on removing that. 194 00:13:28,160 --> 00:13:28,940 I have the error. 195 00:13:29,210 --> 00:13:33,650 If I remove back to the empty input, of course I do have the error. 196 00:13:34,070 --> 00:13:41,480 Then if I go here with Superman, of course I have the movies and then if I click, I get the specific 197 00:13:41,480 --> 00:13:41,870 movie. 198 00:13:42,410 --> 00:13:43,240 That's our project. 199 00:13:43,260 --> 00:13:46,910 Hopefully everyone enjoyed it and I hope to see the next one.