WEBVTT 00:01.730 --> 00:06.920 Okay, so what we've done in the previous video is we add extra two buttons there, and then we have 00:06.920 --> 00:08.990 our movie form here display. 00:08.990 --> 00:11.990 What we want to do is we need to fix it now. 00:12.020 --> 00:15.770 At the moment it's it kind of doesn't really fit our design. 00:15.770 --> 00:23.570 So what I will try to do is whatever we click in here, then we'll display the edit and or the information 00:23.570 --> 00:24.110 about here. 00:24.320 --> 00:27.230 If we click on this one this should be displayed there. 00:27.230 --> 00:29.780 So we need to kind of toggle in between one and another. 00:29.780 --> 00:30.980 How can we do that. 00:30.980 --> 00:32.600 There's a few ways to do it. 00:32.600 --> 00:36.260 And let's go back to our application and see what's happening here. 00:36.260 --> 00:40.190 So we can actually trigger that here. 00:40.190 --> 00:43.670 So we have two different variables. 00:43.670 --> 00:46.340 One is the edited and underneath is selected. 00:46.340 --> 00:49.340 So we can based on whatever we have here. 00:49.370 --> 00:52.280 Then we can toggle one or the other. 00:52.280 --> 00:58.310 But the thing is with our current design is that we actually can click on this one from from the movie 00:58.310 --> 01:01.960 list, we can click on this one and click on this one, and both of them will be selected. 01:02.110 --> 01:06.310 So what we can do is we can implement more options there. 01:06.310 --> 01:09.730 But I will show you one way how we can enable. 01:09.730 --> 01:15.310 So at the moment, if in the movie list we have two functions movie and edit. 01:15.310 --> 01:18.610 And based on what we click but we select the same movie. 01:18.610 --> 01:23.020 So it doesn't matter when when we click on the movie, we select send it there. 01:23.050 --> 01:30.670 So what we can do is instead of having this edit movie, I will remove it for now and I will use one 01:30.670 --> 01:32.590 function that will pass two things. 01:32.590 --> 01:34.720 So we can go here. 01:34.720 --> 01:41.170 You see, at the moment what I'm doing is when we click on that heading I'm passing movie. 01:41.170 --> 01:44.290 And then what I can do is I can pass false. 01:44.650 --> 01:47.920 And I will explain you that in a second what I'm doing. 01:47.920 --> 01:53.860 But from here edit movie I will use the same function movie click and I will pass it. 01:53.860 --> 01:54.400 True. 01:54.430 --> 02:02.160 So basically this function will always take the movie and for this one it will be false and this one 02:02.160 --> 02:02.700 will be true. 02:02.700 --> 02:05.760 So what will be that boolean that will be sending. 02:05.760 --> 02:07.140 And we can have that. 02:07.470 --> 02:08.640 So this will be trigger. 02:08.640 --> 02:10.500 We can have that logic here. 02:10.530 --> 02:20.190 So instead of having two as I had it before, what I will do is I will come back to this option here 02:20.190 --> 02:22.200 because we want to have more control. 02:22.200 --> 02:30.090 What we are sending now is we are sending movie and is added. 02:30.090 --> 02:32.250 So this will be a boolean here. 02:32.520 --> 02:33.840 Movie clicked. 02:34.620 --> 02:39.270 We can do that and then we can do two things. 02:39.270 --> 02:45.330 So basically we kind of change it for movie clicked to trigger that function and we will send it movie 02:45.330 --> 02:45.870 always. 02:45.870 --> 02:48.180 And then we'll do a is added. 02:48.570 --> 02:58.590 We can change our logic based on this flag because from here one click will send false and one true. 02:58.590 --> 03:00.990 So is added false is added true. 03:01.030 --> 03:09.760 So if I will go here, I will set it both both of the variables here at the moment for a movie. 03:10.810 --> 03:14.290 So basically we kind of get back to what we had before. 03:14.320 --> 03:19.660 So if I will refresh my applications here, if I would click it here, you see this is there. 03:19.660 --> 03:22.210 If I would click it here it is also there. 03:22.240 --> 03:28.060 So both of them are kind of set up with the movie that I clicked, which is okay for now. 03:28.060 --> 03:35.410 But what we want to do is based on that, I can say if it's edit. 03:37.570 --> 03:41.140 Else we can do something different. 03:41.170 --> 03:48.820 So if I will take this out and I put it here and here, basically we can toggle different things. 03:48.820 --> 04:01.240 So if it's edit then select movie I will do null and if it's not edit I will do this one as null. 04:01.240 --> 04:01.250 No. 04:01.280 --> 04:07.040 So basically I will just toggle in between them based on the flag that I'm sending over. 04:07.040 --> 04:12.560 So if I will save it now and I will come back to my application and let's refresh it, I will click 04:12.560 --> 04:13.220 on this one. 04:13.220 --> 04:16.160 I see only this one because the flag was added false. 04:16.160 --> 04:19.640 So I enabled this and I set null added one. 04:19.640 --> 04:24.290 If I go here I see this one display here but not the other one. 04:24.290 --> 04:27.200 So you can see here I can toggle in between them. 04:27.230 --> 04:29.510 At the moment it's still not right. 04:29.510 --> 04:37.640 So so now what we have is when we click on this one is rendered here and it's supposed to be here. 04:37.670 --> 04:45.470 So that means if we go to our application here we have movie details and then movie form. 04:45.470 --> 04:46.790 And this is actually a grid. 04:46.790 --> 04:49.940 So this will put an diff always there. 04:49.970 --> 04:53.660 Every new element here will be a new grid. 04:53.660 --> 04:55.400 So the first one will be this one. 04:55.400 --> 04:56.150 The second one. 04:56.150 --> 04:57.410 And we have only have two. 04:57.410 --> 04:59.900 One will be this one if available. 04:59.900 --> 05:02.180 And then the second one will be this one. 05:02.210 --> 05:10.490 So what we can actually do is if we have that movie details, if I will go to movie details here, this 05:10.490 --> 05:13.490 is actually render this all the time. 05:13.490 --> 05:18.980 So no matter if we have that movie or not the movie, the details will be there. 05:19.670 --> 05:25.100 This diff will be there, but what I can do is I could use a react. 05:25.130 --> 05:28.880 So we have react imported here. 05:28.880 --> 05:33.950 What I can do is I can use react fragment. 05:33.980 --> 05:38.810 React fragment is similar to element to div but it's not going to be render. 05:38.810 --> 05:41.300 So it's not going to create extra element there. 05:41.300 --> 05:45.800 It's just a placeholder for one element because we need to return just one element. 05:45.800 --> 05:47.870 But it's not going to be part of the Dom. 05:47.900 --> 05:54.020 So if I will save it now and if I will go here, you see this is automatically goes here because the 05:54.020 --> 05:55.850 details is not rendered there. 05:55.850 --> 05:59.780 So I can go here and here and you can see I have it there. 05:59.780 --> 06:03.990 So what I could do is I could do exactly the same as I've done it here. 06:03.990 --> 06:09.420 So I will copy that and I can go to movie form and we have that diff here. 06:09.420 --> 06:14.970 So what I could do is if I have the movie that is passed here, then we'll display that. 06:16.140 --> 06:24.420 Let's say Dave and I will need to close this one and I need to also close react fragment. 06:28.470 --> 06:29.430 Like that. 06:29.700 --> 06:34.800 So if I will save it now it will be much more clear cleaner. 06:34.830 --> 06:38.760 Now I can go back here. 06:39.540 --> 06:41.040 React is not defined. 06:41.040 --> 06:44.550 And because what we need to do is we need to import react. 06:44.550 --> 06:52.080 So import react from react. 06:55.470 --> 06:56.610 And that will do. 06:56.640 --> 07:02.470 So if I will go here I have my application running so I can save it or I can refresh it. 07:02.470 --> 07:06.190 I can click on this one or I can click on this one and it's working fine. 07:06.220 --> 07:11.830 Another thing that is still kind of off this list is not properly designed. 07:11.830 --> 07:18.160 So what we can do is we can put it actually here on one line, and I will put this icon on the right 07:18.160 --> 07:20.380 and this on the right as well. 07:20.410 --> 07:21.550 So how can we do that. 07:21.550 --> 07:23.260 We can of course use the tailwind. 07:23.260 --> 07:25.840 So let's go back to movie list here. 07:25.960 --> 07:29.740 And what we have here is we have a div with that a key. 07:29.980 --> 07:36.400 What we can do here is we can add a class name and we can put it. 07:36.670 --> 07:37.960 This is agreed. 07:37.960 --> 07:44.860 And I would like to use grid template and grid columns. 07:45.580 --> 07:49.840 And normally I could say like this is grid column three for example. 07:49.840 --> 07:53.140 So I can say this will be three columns. 07:53.140 --> 07:54.850 So it will be equally distributed. 07:54.850 --> 07:59.290 But what I want to do is I want to give a title a little bit more power. 07:59.290 --> 08:01.270 So it will have more space. 08:01.280 --> 08:04.130 and those supposed to be on the right hand side. 08:04.160 --> 08:06.800 So normally with a CSS we will do. 08:06.830 --> 08:11.420 This will be one for which is free space and that will be auto and auto. 08:11.450 --> 08:14.390 They will all take whatever it has been left. 08:14.420 --> 08:18.710 So if I will go here we can also do that with a tailwind. 08:18.710 --> 08:21.020 So tailwind has predefined styles like this. 08:21.020 --> 08:25.970 But if you are not happy with the last bit what you can do is you can put the square brackets like this 08:25.970 --> 08:28.040 and we can put it there at some value. 08:28.040 --> 08:35.540 So I want to have one fr underscore auto underscore auto. 08:35.690 --> 08:38.810 So basically I will have three columns a layout here. 08:38.810 --> 08:41.270 And I will put the first one will be one fr. 08:41.300 --> 08:42.410 The second will be auto. 08:42.410 --> 08:43.490 And auto is see. 08:43.520 --> 08:47.390 When I hover over it it will actually generate grid template columns. 08:47.390 --> 08:48.980 And it will be like this style. 08:48.980 --> 08:50.210 And that's what I am after. 08:50.210 --> 08:55.850 So if I will go here and save it, you can see this is on the left hand side. 08:55.880 --> 08:57.770 It will occupy all that space here. 08:57.770 --> 08:59.780 And then we have this one and this one. 08:59.810 --> 09:00.260 There. 09:00.260 --> 09:04.940 So we still need to kind of working a little bit there for a while. 09:04.940 --> 09:07.280 I will need to add maybe some padding. 09:07.280 --> 09:12.830 I will do padding of three so it will push it away from each other. 09:12.830 --> 09:15.440 And also what you can do into the grid. 09:15.440 --> 09:16.940 We can add a gap. 09:16.940 --> 09:19.250 So let's say we'll add a gap three. 09:19.250 --> 09:21.620 So it will push the elements away. 09:21.620 --> 09:27.560 So this padding will be for entire list item here for the div. 09:27.560 --> 09:30.860 And this gap will be for the grid elements there. 09:30.860 --> 09:32.390 So I can go here. 09:32.390 --> 09:37.190 And you can see here it is much better now that we have that gap in between the elements. 09:37.190 --> 09:39.800 We have a little bit spacing in between the elements here. 09:39.800 --> 09:42.350 So I can click on this one and I can click on this one. 09:42.350 --> 09:45.110 And now it's working actually fine. 09:45.110 --> 09:52.400 So what we have now is we have a way to click edit or on the icon to display that. 09:52.400 --> 09:56.780 All of what we had before is working fine, but now we will focus on this one. 09:56.780 --> 10:01.670 So when we click on edit then we will have a form here to change our movie.