WEBVTT 00:02.040 --> 00:06.420 Okay, let's work a little bit on the edit component here. 00:06.420 --> 00:12.120 We already have an information from the movie, so what we'll need to do is we'll need to create some 00:12.120 --> 00:18.660 kind of a form here that will fit in the movie details inside and we'll be able to edit the title and 00:18.660 --> 00:19.630 description. 00:19.650 --> 00:24.510 So what we have so far is we have a simple text, as you can see here. 00:24.510 --> 00:29.130 What we would like to have basically is we would like to have a text input. 00:29.130 --> 00:34.980 So I will do text input here and also so text input. 00:34.980 --> 00:39.540 And this is already imported from no, sorry, not from the gesture handler. 00:39.550 --> 00:45.750 And I would like to import that from the React native component here. 00:45.750 --> 00:49.680 So it was imported automatically but from a wrong place. 00:49.680 --> 00:55.410 So what we have is we have a text input here and then we can have in the text input. 00:55.410 --> 00:59.490 I will self-close it first and then we can have a few few things here. 00:59.490 --> 01:06.620 So first thing first, what I can do is I can do a style and because, uh, the basic style, it's nothing. 01:06.700 --> 01:09.010 It doesn't even look like a text field. 01:09.010 --> 01:12.280 So we need to kind of style it in the, um, proper way. 01:12.280 --> 01:19.030 So I will do styles and then I can do input and I will create a placeholder for now. 01:19.120 --> 01:23.920 So that's going to be input and we'll come back to to this in a second. 01:24.910 --> 01:27.940 And so this is the first thing we need to do. 01:27.970 --> 01:34.000 Another thing is we can have a placeholder, so placeholder can be anything you like. 01:34.000 --> 01:40.120 I will name it title and this is only appear when you don't have any anything inside. 01:40.120 --> 01:46.600 So whatever you click edit, you should have the title of the current movie there so the placeholder 01:46.600 --> 01:48.190 won't be visible at this point. 01:48.220 --> 01:50.980 What we can do is we can do on change text. 01:52.620 --> 01:54.000 And that's going to be a function. 01:54.000 --> 01:56.310 And then we can use the arrow function. 01:56.310 --> 02:02.730 So the text coming from this will be something that we don't have it yet. 02:02.730 --> 02:08.510 So before we'll finish this text input, what we'll need to do is we'll need to use a state. 02:08.520 --> 02:14.730 So for each of the of the fields we'll have will have a new state. 02:14.730 --> 02:16.800 So we'll store it in a in a state. 02:16.800 --> 02:18.870 And we've done that before many times. 02:18.870 --> 02:22.680 So I will have one for title and then we'll have a set title. 02:26.600 --> 02:29.470 And then I will use use state. 02:29.480 --> 02:34.130 And basically what we can do here is we can provide a default. 02:34.130 --> 02:36.560 So default will be movie title. 02:36.560 --> 02:42.170 So movie is already there, so we can use the movie title there and the title is here. 02:42.170 --> 02:49.070 So what we can do is we can do set title here and pass a text. 02:49.070 --> 02:51.140 So that's going to be on change text. 02:51.170 --> 02:55.550 It will store it in in this variable here in a state. 02:55.550 --> 02:58.100 Also, we'll provide a value there. 02:58.430 --> 03:04.340 So our initial value will be title this, this variable here. 03:04.340 --> 03:10.610 So whatever we open, this component will have a value title there and that's coming from the state 03:10.610 --> 03:14.840 and that will be default set to movie title from the param and then set title. 03:14.840 --> 03:15.170 Whatever. 03:15.170 --> 03:17.510 We change it, we fill it back to this variable. 03:17.510 --> 03:19.490 So I will save it now. 03:19.760 --> 03:22.160 And let me edit this. 03:22.160 --> 03:29.100 And you can see here it's a black Titanic here, so it is working, but it doesn't even look like a 03:29.100 --> 03:29.640 input. 03:29.640 --> 03:35.640 So what we will do is we'll go back here in the input and we can style it a little bit. 03:35.640 --> 03:39.060 So font size, I'll make it nice and big. 03:39.060 --> 03:46.080 So 24 and then I can do background color, background color, and then I can do white. 03:46.950 --> 03:50.730 So f or white doesn't really matter. 03:51.180 --> 03:52.770 It's whatever you prefer. 03:52.770 --> 03:59.850 And then I will add some padding of ten and then I can do some margin as well to push it away. 03:59.880 --> 04:04.260 Ten So if we save it now, add it. 04:04.260 --> 04:06.540 You can see Avatar two is here. 04:06.540 --> 04:09.180 That's a nice big input. 04:09.390 --> 04:14.320 What I can also do is I can create this, this text. 04:14.350 --> 04:26.370 I will make it as a label and then we can have just a simple label title like this. 04:26.370 --> 04:30.060 And then I will create a label. 04:31.110 --> 04:35.400 Here because this is not a description, so I've changed it for the label. 04:35.400 --> 04:38.160 I can have it 24 here. 04:38.250 --> 04:41.910 I will do a white, which is fine and then I can leave it ten. 04:41.910 --> 04:46.680 So I haven't changed much, but at least it's consistent with whatever we see here. 04:46.680 --> 04:52.290 So we have a title and then we have the name of the of the movie that we are passing. 04:52.290 --> 04:54.240 So we have the Titanic here. 04:54.240 --> 04:57.690 So what do we need to do is we need to do the same for description. 04:57.690 --> 05:08.970 So I will do this description and then I can do set description like this. 05:08.970 --> 05:11.190 I will fill it on default description. 05:11.190 --> 05:14.790 And what we need to do is I will just take this. 05:14.820 --> 05:16.260 I will duplicate it. 05:16.710 --> 05:23.700 Uh, we don't need another container, so we'll have another label and that's going to be description 05:24.150 --> 05:27.570 with the same style and then we will have another one. 05:27.570 --> 05:30.060 So I will do description here. 05:30.210 --> 05:32.110 It's basically the same thing. 05:32.110 --> 05:34.420 So set description. 05:34.420 --> 05:35.770 I'm just pasting the description. 05:35.770 --> 05:39.070 It is faster and then it will be description like this. 05:39.070 --> 05:41.830 So if I will save it now, I should have. 05:42.970 --> 05:46.120 You can see this, the title and the description here. 05:46.120 --> 05:51.490 If I will pick another one here, I should have a new one. 05:51.490 --> 05:53.410 So we already have that. 05:53.440 --> 06:00.190 The last thing what we can add to this view is the button and then I can do on press. 06:03.570 --> 06:06.750 Our function here, we don't need to pass. 06:06.750 --> 06:11.750 And then I can do save movie like this. 06:11.760 --> 06:21.900 And then what I can do is I can also pass a title here, and the title will be Save so I can save close 06:21.900 --> 06:28.340 it here and then I will need to create this save movie function. 06:28.350 --> 06:31.710 So I will do constant because we are in the functional component. 06:31.710 --> 06:35.940 So save movie here and then I can do another arrow function. 06:37.630 --> 06:43.780 Up arrow function and then I can do props. 06:45.040 --> 06:53.500 We have the props here passed and then I can do a navigation and then I can use a method to go back, 06:53.530 --> 06:56.290 go back like this. 06:56.290 --> 07:00.310 So at the moment we don't do much with with this. 07:00.340 --> 07:03.310 It's just whatever we click it, we go back to the previous page. 07:03.310 --> 07:09.880 So I will save it now and then come back here and then add it and then you can find variable button 07:10.120 --> 07:12.010 we forgot to import. 07:12.010 --> 07:20.290 So I have a button here I need to import from React native and it should be okay now. 07:20.290 --> 07:23.410 So we have the button here and then we have a save it. 07:23.410 --> 07:27.700 So if I click it save I'm back to this page here. 07:27.700 --> 07:30.220 I don't do anything now. 07:30.220 --> 07:31.720 It's just I'm coming back here. 07:31.720 --> 07:35.410 But my layout for the edit is ready at this point. 07:35.410 --> 07:36.980 So this is everything. 07:36.980 --> 07:39.800 Prepared to edit our first video?