WEBVTT 00:00.890 --> 00:07.460 Okay, so we have our movie list here component ready, but we haven't done much yet. 00:07.460 --> 00:13.760 This is a simple text that is displayed on the screen, but we will replace it with our list. 00:13.760 --> 00:17.780 So first what we need to do is we will need to prepare some data. 00:17.780 --> 00:22.880 So we are here in a functional component so we can use hooks. 00:22.880 --> 00:30.470 So what I can do is I can create a constant and we will store movies. 00:30.470 --> 00:31.910 So that will be movies. 00:31.910 --> 00:40.490 And then I can do set movies and that is typical hooks, two variables that I can access. 00:40.490 --> 00:47.090 So movies will be reference to all the movies and set movies will be a method how to update the state 00:47.090 --> 00:48.560 so we can do. 00:48.570 --> 00:50.900 We'll also need to import it. 00:51.410 --> 01:01.100 So curly braces use state and also I will use effects later on. 01:01.100 --> 01:02.750 So we'll import it now. 01:02.750 --> 01:05.810 So use state use state. 01:07.940 --> 01:09.000 Is a method. 01:09.000 --> 01:11.970 And then what I can do is I can provide a default. 01:11.970 --> 01:19.980 So by default, I can provide an array and let's say I will create one object inside and I will do title, 01:20.100 --> 01:24.810 and then I can say Rambo. 01:25.920 --> 01:27.930 Okay, so I have this. 01:27.930 --> 01:35.160 And then basically what is what that gives me is a movies that are already accessible. 01:35.160 --> 01:43.350 So if I will go here and I will replace this text, I can replace it with a flat list also. 01:43.890 --> 01:52.620 So I will need to import that from I can remove the actually I will use the text before later. 01:52.620 --> 01:53.760 So I'll just add it here. 01:53.760 --> 02:00.510 So flat list for now and then I can close it and then we'll need to add few things. 02:00.510 --> 02:08.040 So first data and my data will be movies. 02:08.040 --> 02:11.340 Also I need to add render item. 02:11.340 --> 02:14.520 So that's going to be my function. 02:16.620 --> 02:21.480 And then inside I will go item and that's our function. 02:21.480 --> 02:24.810 And then we can display something here. 02:24.810 --> 02:34.680 So I can do text and inside the text I can item dot title. 02:36.570 --> 02:38.340 So we have that. 02:38.340 --> 02:41.370 And let me take a look how it looks like now. 02:43.500 --> 02:46.740 And I don't see anything here. 02:48.990 --> 02:56.310 We might need to do some styling because it might be off the screen and I will double check if I have 02:56.310 --> 02:58.350 anything but in the terminal. 02:58.620 --> 03:00.690 So we will missing keys. 03:00.810 --> 03:07.290 We will take care of that later on and I will show you what is the problem actually here and how to 03:07.290 --> 03:07.920 solve it. 03:07.950 --> 03:10.350 So apart from that, there is nothing here. 03:13.500 --> 03:17.280 I'll just make it a little bit smaller like this. 03:18.980 --> 03:21.200 And actually, I made a mistake here. 03:21.200 --> 03:23.510 That's supposed to be like that. 03:23.810 --> 03:26.800 So parentheses, not a curly bracket. 03:26.810 --> 03:37.040 So if I will save it, I can see here something is printed there, so I can't really see it because 03:37.040 --> 03:38.860 it's on on the top bar there. 03:38.870 --> 03:42.260 So basically, if I will add another item here. 03:43.700 --> 03:46.670 So let me add something to the mockup data. 03:50.220 --> 03:53.190 That's like classic from 80s or 90s. 03:53.460 --> 03:55.830 And you can see here I have two of them. 03:55.830 --> 04:03.570 So basically I have a flat list with the movies and at the moment I'm using stage to initiate the kind 04:03.570 --> 04:04.680 of mock up data. 04:04.680 --> 04:10.910 So what we need to do now is we need to work to get the data from our server. 04:10.920 --> 04:12.600 So how can we do it? 04:12.600 --> 04:17.130 I will use as we are doing functional component here. 04:17.130 --> 04:24.240 So normally if with a class based component what you do is componentdidmount method, but this time 04:24.240 --> 04:31.260 we can use useeffect and then we insight, we can do arrow function. 04:33.760 --> 04:34.390 Like that. 04:34.390 --> 04:38.050 And that will we will use a method here. 04:38.050 --> 04:43.960 So what we need to do, we can do the same method as we've used with the web, which is fetch. 04:43.960 --> 04:51.100 So basically the fetch will be the method to get our movies and I can go here and I can grab it the 04:51.100 --> 04:52.780 same way as we've done it before. 04:52.780 --> 04:54.370 I can grab this URL. 04:56.400 --> 05:03.000 And then the first argument is the URL, and then we need to go API and then slash movies. 05:03.150 --> 05:05.490 So this is the first argument. 05:05.490 --> 05:07.880 The second argument can be an object. 05:07.890 --> 05:10.680 So we can put a few things here. 05:10.680 --> 05:18.630 So method will be get and then we'll need to also do headers. 05:21.270 --> 05:25.080 And in headers the same way as we've done it before. 05:29.540 --> 05:30.770 Authorization. 05:30.770 --> 05:33.590 And then we need to provide a token. 05:33.590 --> 05:35.060 So I will do backtick here. 05:35.060 --> 05:39.950 That means then I will be able to inject the token inside. 05:40.100 --> 05:45.500 So we'll do token token space and then I will need to do a token here. 05:45.680 --> 05:53.390 So what I will need to do now at the moment I don't have a login yet so I have no way to get that token. 05:53.390 --> 06:04.910 So what I can do is I can go here and open this in a browser and then I can go admin to the tokens and 06:04.910 --> 06:07.160 I will copy this token. 06:07.520 --> 06:13.940 And for now I will use a static token like this and then I will replace with something dynamic. 06:13.940 --> 06:19.820 So I have that we have some errors because I save it and it's supposed to be here, it shouldn't be 06:19.820 --> 06:20.390 here. 06:20.390 --> 06:29.940 And then we can use then and we'll have a response that I will do press bones. 06:31.410 --> 06:32.450 To Jason. 06:32.460 --> 06:35.040 So I will convert it to Json. 06:35.250 --> 06:39.290 The first one, and then we can chain it and then we can have another. 06:39.300 --> 06:44.130 Then this one will be Json response already. 06:45.750 --> 06:50.400 And then what I can do is I can set movies. 06:51.360 --> 06:54.390 I'm trying to do everything here and then set movies. 06:54.390 --> 06:55.200 This one. 06:55.740 --> 06:57.960 So basically I'm chaining here. 06:57.960 --> 07:01.830 So whatever is coming back from the fetch, this is not a Json. 07:01.830 --> 07:07.950 So this one I will convert it so I can put it in a new line here and this one on a new line. 07:07.950 --> 07:13.890 So first I will convert it to Json and then once I have a Json, I can chain and do another then. 07:13.890 --> 07:19.920 And then in the promise here I will have a Json response and I will put it whatever it's in the Json 07:19.920 --> 07:21.150 as a movies here. 07:21.150 --> 07:24.180 So we will be using this method from state. 07:24.180 --> 07:26.400 So I have that already. 07:26.880 --> 07:30.600 Unfortunately, sometimes when you have a error like this, it's kind of free. 07:30.600 --> 07:37.850 So what you need to do is you do controls, you go to terminal control C and then arrow up start and 07:37.860 --> 07:39.030 we will start again. 07:39.600 --> 07:46.020 So sometimes it just lock itself and you can know how to watch and start it from there. 07:46.020 --> 07:51.690 So what I will do is I will open the simulator again. 07:59.530 --> 08:06.580 And you can see it complains about the semicolon here that I forgot to remove or add it by accident. 08:06.730 --> 08:09.730 So actually, I need to kill the application. 08:11.600 --> 08:13.190 And run it again. 08:17.130 --> 08:23.100 And we have, uh, two messages here, and then we still have the original one there. 08:23.580 --> 08:26.850 So let me come back there and quickly fix it. 08:27.370 --> 08:31.270 First thing it complains about not handling the error. 08:31.320 --> 08:35.640 So what I will do is I will do catch. 08:36.580 --> 08:39.100 And then we can catch an error. 08:39.340 --> 08:42.640 And then for now, I will just console.log. 08:43.360 --> 08:46.120 Console.log that error. 08:48.590 --> 08:49.130 Arrow there. 08:49.130 --> 08:51.080 So it's not going to complain about that. 08:51.080 --> 08:53.150 I'm not doing anything with the arrow. 08:53.150 --> 08:54.200 So that's it. 08:54.200 --> 09:00.440 And actually, I made a mistake here that's supposed to not to Json, but the method is Json here. 09:00.560 --> 09:03.080 So if I will save it now. 09:03.710 --> 09:03.920 Uh. 09:07.160 --> 09:08.960 And it froze again. 09:08.960 --> 09:13.190 So what I need to do is I will stop it. 09:15.950 --> 09:18.230 Actually, I can run it meanwhile. 09:32.020 --> 09:38.650 Okay, so now I guess we have some data because it complains about this index. 09:38.650 --> 09:41.470 So trying to get the frame out of the range index. 09:41.470 --> 09:46.120 And so I guess we have the data because we put it set movies here. 09:46.120 --> 09:48.070 So the, our movies is here. 09:48.190 --> 09:51.610 What I can do is I can remove the initial data. 09:51.610 --> 10:00.760 So we'll start with an empty array and then we need to go back to the flat list here. 10:00.790 --> 10:04.060 We'll need to add a key here. 10:04.750 --> 10:09.820 So basically, whatever we do, at least we need to tell React that we are using a key. 10:09.820 --> 10:14.890 So I will do item ID for now and then I will save it. 10:22.210 --> 10:23.620 And we still have a problem. 10:23.620 --> 10:24.700 So let me take a look. 10:24.700 --> 10:25.900 What's the error? 10:25.930 --> 10:28.900 Can perform a React state update on an unmounted component. 10:28.900 --> 10:33.730 This is on nobody syndicate the memory leak in your application to fix. 10:33.820 --> 10:41.860 So what is happening here is I've created a so I'll close it for now. 10:41.980 --> 10:46.120 And what I'm doing here is I'm using useeffect here. 10:46.120 --> 10:52.810 So basically useeffect will trigger whatever we actually have any rerender. 10:52.810 --> 10:59.830 So it will just go in a loop and uh, forever because this is not a componentdidmount. 10:59.830 --> 11:06.730 So in order to have it only once, what I can do is as a second argument, I can put an empty array. 11:06.760 --> 11:09.730 That means I will trigger useeffect, whatever. 11:09.730 --> 11:10.930 It's something change here. 11:10.930 --> 11:13.990 But if it's empty, it will be triggered only once. 11:14.020 --> 11:17.500 So we'll save it now and then I can come back here. 11:20.120 --> 11:21.710 And I still have that problem. 11:22.070 --> 11:23.390 Actually, I can. 11:23.560 --> 11:27.890 I spot a problem here because that's supposed to be movies like that. 11:35.380 --> 11:37.600 And I have my list here. 11:37.600 --> 11:44.080 And you can see here Terminator and Avatar here, too, despite the fact this is empty at the beginning. 11:44.080 --> 11:50.380 So the data is successfully flowing to our application and we use fetch. 11:50.380 --> 11:53.500 So we had a little bit of problems to set it up. 11:53.500 --> 11:58.750 And but we finally have our data alive displayed on our application. 11:58.750 --> 12:02.260 And as you can see, the method itself is very easy. 12:02.260 --> 12:07.480 So we use exactly the same as we use it in our React application. 12:07.480 --> 12:13.750 So whatever you know, in React, you can easily migrate it from there to react native.