There's just one last thing I want to do to our modal component to make it more usable.
You'll notice that the right here has our on click function that's going to attempt to always navigate
the user to the route route of our application.
Now it's entirely possible if we use a model somewhere else that we will not want to take the user to
the route route if they attempt to dismiss this thing.
In addition we might not want to navigate the user at all.
So it's not just the path right here.
We might not even want to call history push.
We might want to do some other behavior maybe try to dismiss the motile by some other means or something
like that.
So I think that this entire on click function right here should be provided by the parent component.
So I'm going to remove that entire aero function and instead anytime that a user clicks on this device.
I think we should call prop's dot on dismiss.
So we've not introduced this Propp before.
This is going to be a new prop that we need to add in from the parent component So let's now save this.
I'm going to flip back over to my stream delete.
I'm going to find the motile and I'm going to pass in a new prop year called on dismiss.
So this will be essentially what we want to have happen any time that the user attempts to click outside
or dismiss that modal.
All right.
So I think that we should probably import the history object into stream delete and then attempt to
navigate back to the route just as we were doing before.
Remember that is what we want to have happen in this case.
But the idea here was to just make our model more customizable in the future.
So first off inside of my motile file I'm going to delete that history at the top because we do not
need that anymore.
I'll then go back over to stream delete at the top I will import history from up one directory history.
Now we'll do the same thing we were doing before and cited this on dismissed Propp.
I'm going to add in a aero function and inside of your we will call history.
Push and we'll go back to our route route like so.
So now we are completely configuring the model in terms of the title content actions and what happens
when it gets dismissed from the parent component of string delete.
So I'll save this I'm going to flip back over and I think I've got a bad import statement right there.
We need to have going up to directories.
My mistake.
So we want to go up to components and then out to the sarcy directory and get the header files so dot
dot dot dot slash.
All right so I'll make that change I'll save this flip back over much better.
So now I should be able to still click outside the motile and it goes away and I see the route route
appear again.
Perfect.
OK.
That's pretty much it.
For some the basics around our modal component.
Now the only issue at this point is that although we see this model and we have these buttons here when
we click on the buttons nothing actually happens.
So we need to make sure that we actually eventually attempt to hide the motile or delete the stream
or whatever it is.
But now that we've got the modal working in a very generalized and reasonable fashion we can start to
focus on those tasks and the next video.
So let's take a quick pause and make sure that we start to delete our stream in the next video.