In last video we got our model to appear on the screen.
But of course it really does not look that good.
So in this video we're going to focus on adding some better styling to this thing and also getting the
ability to customize our model when it appears I want to first show you the semantic documentation around
modals just to give you a better idea of what we're going to do.
So in a new browser tab I'm going to go to a semantic dash UI dot com once every year all select menu
and then I'll go down to the very bottom find the modules section and will find the modal right there.
Now the default modal include include with semantic UI expects that we are using Jay query and we are
of course not using Jake where we are using entirely react.
So essentially we are kind of using the styling of modals from semantic UI but we're not making use
of any of the built in functionality or the javascript side of modals as they are included in semantic
UI.
So on this page I can scroll down a little bit and I just want to show you this example right here for
actions.
So inside of a modal we can place a div with the class of Hetter a div with the class content and a
div with class actions.
Those three divs right there generally line up with this mockup right here.
So at the very top is the div with Hetter whatever show is shown in the middle is the div with content.
And then finally at the bottom is different class actions.
That's going to be whatever show is on the bottom down here.
Let's just try to write these divs in and get some better styling going on for right now.
So back inside my editor I'm going to delete the jibberish I had inside there and then I will place
a div with the class name of Hetter and I'll give it some text like let's say delete stream.
That'll work.
I'll put a div in here with the class name of content and I'll give it some text like Are you sure you
want to delete the stream.
And then finally a div with the class name of actions and that will be that to do the delete and the
cancel button at the bottom.
So class name of actions.
Let's get a fix there.
And inside that div I'll do a button with the class name of UI primary arsole let's drop off the primary
just replace it with button like so that will give us a nice gray button for cancell and then for the
delete button we can do a class name you my primary button and we'll give that one the text delete like
so.
Now let's save this and see how this looks now.
So flip back over and that looks way better than it did before so I got the nice header on there.
I've got the nice content and the delete text right there as well.
So this definitely looks like a pretty good improvement but there's just one little issue here.
There always is an issue right when is there never an issue.
I want you to notice how right now if I click off of the modal like on the background over here the
model just stays on the screen.
Now typically whenever we have a modal window if the user clicks in the background we're going to want
to dismiss the modal window entirely and just hide it or go do something else.
Essentially we do not want to lock a user into having to click on these two buttons right here.
I think you can agree with me that you probably feel like if you hit Baqir or on the background you
want to see the modal go away.
So let's figure out how he could do that.
All right so I'm going to flip back over.
Remember that right now we're only showing this motile on the screen.
If the user is out the route streams slash delete.
So a very easy way that we could get this motile to go away is to just navigate to a different route
inside of our application.
So essentially if a user clicks on the background div we want to navigate the user to some other location
or path inside of our app.
We can get a user to navigate programmatically by making use of that history object that we created
a little bit ago.
So inside my motile at the very top I'm going to import history from up one directory history.
So this is remember that history that Jesus object or the history such as file where we created our
history for re-act router then on my div with Diemer modals visible active I can add on a on click event
handler So anytime that a user clicks on this thing we can call history dot push and we can go back
to our route route like so.
So notice how I wrapped this inside of a ero function.
So anytime we click on that thing run that arrow function which is going to call history don't push
it let's try saving this and give it a quick shot so I'll flip back over.
And now when I click on that I see the window go away.
Let's try that again one more time because it happened pretty darn quickly.
I'm going to again go to localhost three thousand streams slash delete.
And now if I click on say the background Yup I go back to my main stream window.
But let's do this one more time and I want to show you some interesting behavior this time around.
I'm going to click like just to the left of the delete button.
Let's say that our user comes in here and they try to click that delete button but they accidentally
clicked just off to the left side.
So if I click just to the left hand side that still dismisses the entire model or it navigates us away.
Well why is that.
Well essentially this is very basic event handling this is event propagation.
So remember this is default javascript behavior default HTL behavior.
If we ever trigger an event on some child elements and that child element Element does not handle that
event the event is going to essentially bubble up to some parent element on leave he gets caught with
an event handler.
So in this case if I click on any of the elements inside of any of these things that click event is
going to bubble up to this device.
It's going to run the on click event handler right here which is going to run history push.
So that's definitely something that we probably don't want to have happen.
So to make sure that doesn't occur we can at a click event handler to the window div for the content
div right here the day with the class name of UI standard modal.
So at in a click event handler to that as well.
And then inside if you're going to get the event argument that this function will be called with remember
whenever a event occurs we always get an event argument or event object as the argument.
And on that event argument we can call e or event eed for short stop propagation like so.
So stop propagation is going to make sure that that event does not continue to bubble up and go to this
div right here thus causing our window to get dismissed by navigating to some other page.
So I can save this and now we flip back over and again go manually to stream slash delete.
Now I can click all over this inner content window and nothing gets dismissed until I click on the background
behind it.
All right so that's a little bit better now.
Our model is coming along pretty well here but I want to point out a little bit of an issue at present
it has some hard coded content inside of here like hard coded delete stream and hard coded text of.
Are you sure you want to delete that stream.
Usually anytime we create a modal we definitely want to make sure that it is re-usable in nature.
So there might be many other locations inside of our application where we want to show a modal and in
every one of those cases we probably are going to want to have a different header different content
different buttons and we want different things to occur whenever a user clicks on those buttons.
In addition if a user dismisses the modal by clicking on that background in some cases we might not
want to navigate back to the root route.
So I think that we need to figure out a way to make this component far more usable than it currently
is.
So let's take a quick pause right here.
When we come back in the next section we'll do some refactoring to the modal.