So of course our goal is not to just lock that idea.
Instead I want to extract de project ideas here in the log and the drop handler.
And with that the goal is to really move the project not where change to project status to be precise.
Now how can we do that.
Well in our state I would say in our project state where we currently have at Project method we all
need a move project method and the goal of this method will be to basically switch the status of a project
of course you could also the for name it switch project status or whatever you want.
But since we're doing drag and drop I'm calling it move project.
So in move project the goal is to move a project from the list that's currently in to a new list.
Now this doesn't always mean that we just have to flip the project status from active to finished and
the other way around.
After all a user could be doing this drag and drop in the same box.
So if we then always trigger a method that switches to status we would have an unexpected effect we're
dropping in the same box stills which is to project to the average box.
So instead and move project we really have to know which project to move and which box the new boxes
so which statist and youth status is.
So I expect to get the project ideas here which should be a string and then use status and the new status
here of course can be of type project status and then inside of move project I want to find a project
with that idea in my array of projects.
So here this array of projects and then flip it's status.
So for that we can reach out to this projects find a project in there and the find method is perfect
for that.
It runs on every element and is array gives us access to every element and then we have to return true
if it's the element we're looking for.
And I want to return true if the I.D. of the Element recurred to looking at is equal to the project
IDM getting as an argument here then we have to element which should change and they are on this element.
We just have to change the status to the new status.
Now this might be null so here all called is project stored is now a concept called Project and check
if project exists and if it exists then I want to set the status equal to the new status here.
Simple as that.
This will already changed the object India array and we're basically done with it of course however
we're not entirely done.
We now need to let everyone know all our listeners that something changed about our projects and that
they should re render.
So we have to go for all listeners again.
And since we would repeat code here I will outsource design a new private method update listeners could
be a viable name and endeavor.
I'll have these for loop where we go through all listeners and and do something and then we'll call
this update listeners both from the ad project and also from the move project method here.
Only if we did change something.
So now all listeners will be triggered.
And if you remember a listener in our app you're basically leads to the list to re render its items.
So that will work exactly as it should or it should work exactly as it should.
So now we have that move project method down there in a drop handler.
We can now use this.
There we can now use to project state call move project and pass on the project idea.
And now the new project status and the new project status the pens on the list on which we drop this.
So I want to auto bind my drop handler so that this keyword in the drop handler refers to the surrounding
class and this surrounding class as a project list which if you remember will have a type property here
we're storing it here.
We're having a type property and that is active or finished.
So now we just have to translate active or finished to our enum values.
So here I pass in this Start type and I check if it's equal to active in which case we pass in Project
Status dot active ask the new status of the project because that is the status of the list we move to
Project 2.
Otherwise we pass and project status start finished and let me reformat that to make it easier to read.
With that let's give it a try.
Let's save all and add a new project here and now drag it to finished projects and it switches and the
same if I move it back.
If a let go here an act of projects nothing changes.
Now you will see if you inspect the dam that technically it re renders which might not be ideal.
So we could think about coming up with some solution which checks whether the state is actually did
change it if it didn't we don't update.
That's something we can do.
But from a UI perspective it updates just as it should.
Now let's also add a second project and see if Dad destroys something if everything still works.
And I would say that looks decent.
That looks pretty good to me.
Everything seems to work exactly the way it should.
So dragging and dropping works just fine here but there is this one improvement I mentioned back in
the project state in move project when I called this update listeners.
We can actually check if we did really change the status.
So here we can check if project.
So if we did find one and if then project status is different from the new status and only then we changed
the status and update to listeners if the status is to say we don't do this and we are widened the unnecessary
rebrand or cycle.
So now with that if we save that and we quickly add a new project you will see if I inspect the elements
here and you watch yellow I and check whether this flashes which means it would re render it does not
flash here only probable flash as de CLOs which is added but the El eye does not flash if I drop in
the same box it only flashes if I move move it to a different box and it should flashed and because
then we really did move it.
So now we optimized does a bit and now we have working drag and drop here all built and powered with
and by typescript.