Okay, so what we've done in the previous video is we add extra two buttons there, and then we have
our movie form here display.
What we want to do is we need to fix it now.
At the moment it's it kind of doesn't really fit our design.
So what I will try to do is whatever we click in here, then we'll display the edit and or the information
about here.
If we click on this one this should be displayed there.
So we need to kind of toggle in between one and another.
How can we do that.
There's a few ways to do it.
And let's go back to our application and see what's happening here.
So we can actually trigger that here.
So we have two different variables.
One is the edited and underneath is selected.
So we can based on whatever we have here.
Then we can toggle one or the other.
But the thing is with our current design is that we actually can click on this one from from the movie
list, we can click on this one and click on this one, and both of them will be selected.
So what we can do is we can implement more options there.
But I will show you one way how we can enable.
So at the moment, if in the movie list we have two functions movie and edit.
And based on what we click but we select the same movie.
So it doesn't matter when when we click on the movie, we select send it there.
So what we can do is instead of having this edit movie, I will remove it for now and I will use one
function that will pass two things.
So we can go here.
You see, at the moment what I'm doing is when we click on that heading I'm passing movie.
And then what I can do is I can pass false.
And I will explain you that in a second what I'm doing.
But from here edit movie I will use the same function movie click and I will pass it.
True.
So basically this function will always take the movie and for this one it will be false and this one
will be true.
So what will be that boolean that will be sending.
And we can have that.
So this will be trigger.
We can have that logic here.
So instead of having two as I had it before, what I will do is I will come back to this option here
because we want to have more control.
What we are sending now is we are sending movie and is added.
So this will be a boolean here.
Movie clicked.
We can do that and then we can do two things.
So basically we kind of change it for movie clicked to trigger that function and we will send it movie
always.
And then we'll do a is added.
We can change our logic based on this flag because from here one click will send false and one true.
So is added false is added true.
So if I will go here, I will set it both both of the variables here at the moment for a movie.
So basically we kind of get back to what we had before.
So if I will refresh my applications here, if I would click it here, you see this is there.
If I would click it here it is also there.
So both of them are kind of set up with the movie that I clicked, which is okay for now.
But what we want to do is based on that, I can say if it's edit.
Else we can do something different.
So if I will take this out and I put it here and here, basically we can toggle different things.
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.
No.
So basically I will just toggle in between them based on the flag that I'm sending over.
So if I will save it now and I will come back to my application and let's refresh it, I will click
on this one.
I see only this one because the flag was added false.
So I enabled this and I set null added one.
If I go here I see this one display here but not the other one.
So you can see here I can toggle in between them.
At the moment it's still not right.
So so now what we have is when we click on this one is rendered here and it's supposed to be here.
So that means if we go to our application here we have movie details and then movie form.
And this is actually a grid.
So this will put an diff always there.
Every new element here will be a new grid.
So the first one will be this one.
The second one.
And we have only have two.
One will be this one if available.
And then the second one will be this one.
So what we can actually do is if we have that movie details, if I will go to movie details here, this
is actually render this all the time.
So no matter if we have that movie or not the movie, the details will be there.
This diff will be there, but what I can do is I could use a react.
So we have react imported here.
What I can do is I can use react fragment.
React fragment is similar to element to div but it's not going to be render.
So it's not going to create extra element there.
It's just a placeholder for one element because we need to return just one element.
But it's not going to be part of the Dom.
So if I will save it now and if I will go here, you see this is automatically goes here because the
details is not rendered there.
So I can go here and here and you can see I have it there.
So what I could do is I could do exactly the same as I've done it here.
So I will copy that and I can go to movie form and we have that diff here.
So what I could do is if I have the movie that is passed here, then we'll display that.
Let's say Dave and I will need to close this one and I need to also close react fragment.
Like that.
So if I will save it now it will be much more clear cleaner.
Now I can go back here.
React is not defined.
And because what we need to do is we need to import react.
So import react from react.
And that will do.
So if I will go here I have my application running so I can save it or I can refresh it.
I can click on this one or I can click on this one and it's working fine.
Another thing that is still kind of off this list is not properly designed.
So what we can do is we can put it actually here on one line, and I will put this icon on the right
and this on the right as well.
So how can we do that.
We can of course use the tailwind.
So let's go back to movie list here.
And what we have here is we have a div with that a key.
What we can do here is we can add a class name and we can put it.
This is agreed.
And I would like to use grid template and grid columns.
And normally I could say like this is grid column three for example.
So I can say this will be three columns.
So it will be equally distributed.
But what I want to do is I want to give a title a little bit more power.
So it will have more space.
and those supposed to be on the right hand side.
So normally with a CSS we will do.
This will be one for which is free space and that will be auto and auto.
They will all take whatever it has been left.
So if I will go here we can also do that with a tailwind.
So tailwind has predefined styles like this.
But if you are not happy with the last bit what you can do is you can put the square brackets like this
and we can put it there at some value.
So I want to have one fr underscore auto underscore auto.
So basically I will have three columns a layout here.
And I will put the first one will be one fr.
The second will be auto.
And auto is see.
When I hover over it it will actually generate grid template columns.
And it will be like this style.
And that's what I am after.
So if I will go here and save it, you can see this is on the left hand side.
It will occupy all that space here.
And then we have this one and this one.
There.
So we still need to kind of working a little bit there for a while.
I will need to add maybe some padding.
I will do padding of three so it will push it away from each other.
And also what you can do into the grid.
We can add a gap.
So let's say we'll add a gap three.
So it will push the elements away.
So this padding will be for entire list item here for the div.
And this gap will be for the grid elements there.
So I can go here.
And you can see here it is much better now that we have that gap in between the elements.
We have a little bit spacing in between the elements here.
So I can click on this one and I can click on this one.
And now it's working actually fine.
So what we have now is we have a way to click edit or on the icon to display that.
All of what we had before is working fine, but now we will focus on this one.
So when we click on edit then we will have a form here to change our movie.