1
00:00:00,420 --> 00:00:02,830
In last video we got our model to appear on the screen.

2
00:00:02,840 --> 00:00:05,190
But of course it really does not look that good.

3
00:00:05,190 --> 00:00:09,630
So in this video we're going to focus on adding some better styling to this thing and also getting the

4
00:00:09,630 --> 00:00:15,960
ability to customize our model when it appears I want to first show you the semantic documentation around

5
00:00:15,960 --> 00:00:18,930
modals just to give you a better idea of what we're going to do.

6
00:00:18,930 --> 00:00:25,740
So in a new browser tab I'm going to go to a semantic dash UI dot com once every year all select menu

7
00:00:25,860 --> 00:00:31,940
and then I'll go down to the very bottom find the modules section and will find the modal right there.

8
00:00:32,040 --> 00:00:37,890
Now the default modal include include with semantic UI expects that we are using Jay query and we are

9
00:00:37,890 --> 00:00:41,370
of course not using Jake where we are using entirely react.

10
00:00:41,370 --> 00:00:46,590
So essentially we are kind of using the styling of modals from semantic UI but we're not making use

11
00:00:46,590 --> 00:00:52,200
of any of the built in functionality or the javascript side of modals as they are included in semantic

12
00:00:52,200 --> 00:00:53,010
UI.

13
00:00:53,520 --> 00:00:59,310
So on this page I can scroll down a little bit and I just want to show you this example right here for

14
00:00:59,370 --> 00:01:00,660
actions.

15
00:01:00,660 --> 00:01:07,110
So inside of a modal we can place a div with the class of Hetter a div with the class content and a

16
00:01:07,110 --> 00:01:08,890
div with class actions.

17
00:01:09,150 --> 00:01:13,650
Those three divs right there generally line up with this mockup right here.

18
00:01:13,800 --> 00:01:19,410
So at the very top is the div with Hetter whatever show is shown in the middle is the div with content.

19
00:01:19,410 --> 00:01:22,620
And then finally at the bottom is different class actions.

20
00:01:22,620 --> 00:01:24,850
That's going to be whatever show is on the bottom down here.

21
00:01:25,130 --> 00:01:30,140
Let's just try to write these divs in and get some better styling going on for right now.

22
00:01:30,180 --> 00:01:35,100
So back inside my editor I'm going to delete the jibberish I had inside there and then I will place

23
00:01:35,130 --> 00:01:42,180
a div with the class name of Hetter and I'll give it some text like let's say delete stream.

24
00:01:42,190 --> 00:01:43,230
That'll work.

25
00:01:45,270 --> 00:01:52,440
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

26
00:01:52,440 --> 00:01:59,510
want to delete the stream.

27
00:01:59,630 --> 00:02:05,600
And then finally a div with the class name of actions and that will be that to do the delete and the

28
00:02:05,600 --> 00:02:07,060
cancel button at the bottom.

29
00:02:07,070 --> 00:02:09,520
So class name of actions.

30
00:02:09,950 --> 00:02:11,960
Let's get a fix there.

31
00:02:11,960 --> 00:02:21,580
And inside that div I'll do a button with the class name of UI primary arsole let's drop off the primary

32
00:02:21,630 --> 00:02:28,140
just replace it with button like so that will give us a nice gray button for cancell and then for the

33
00:02:28,620 --> 00:02:38,590
delete button we can do a class name you my primary button and we'll give that one the text delete like

34
00:02:38,590 --> 00:02:38,990
so.

35
00:02:39,840 --> 00:02:42,030
Now let's save this and see how this looks now.

36
00:02:42,300 --> 00:02:47,610
So flip back over and that looks way better than it did before so I got the nice header on there.

37
00:02:47,610 --> 00:02:50,890
I've got the nice content and the delete text right there as well.

38
00:02:51,060 --> 00:02:55,650
So this definitely looks like a pretty good improvement but there's just one little issue here.

39
00:02:55,650 --> 00:02:58,230
There always is an issue right when is there never an issue.

40
00:02:58,560 --> 00:03:04,050
I want you to notice how right now if I click off of the modal like on the background over here the

41
00:03:04,050 --> 00:03:05,700
model just stays on the screen.

42
00:03:05,700 --> 00:03:09,930
Now typically whenever we have a modal window if the user clicks in the background we're going to want

43
00:03:09,930 --> 00:03:15,340
to dismiss the modal window entirely and just hide it or go do something else.

44
00:03:15,360 --> 00:03:19,800
Essentially we do not want to lock a user into having to click on these two buttons right here.

45
00:03:19,800 --> 00:03:25,710
I think you can agree with me that you probably feel like if you hit Baqir or on the background you

46
00:03:25,710 --> 00:03:28,040
want to see the modal go away.

47
00:03:28,070 --> 00:03:31,110
So let's figure out how he could do that.

48
00:03:31,140 --> 00:03:32,690
All right so I'm going to flip back over.

49
00:03:32,940 --> 00:03:36,490
Remember that right now we're only showing this motile on the screen.

50
00:03:36,660 --> 00:03:40,690
If the user is out the route streams slash delete.

51
00:03:40,770 --> 00:03:45,360
So a very easy way that we could get this motile to go away is to just navigate to a different route

52
00:03:45,360 --> 00:03:46,860
inside of our application.

53
00:03:46,860 --> 00:03:52,890
So essentially if a user clicks on the background div we want to navigate the user to some other location

54
00:03:52,920 --> 00:03:55,110
or path inside of our app.

55
00:03:55,380 --> 00:04:00,470
We can get a user to navigate programmatically by making use of that history object that we created

56
00:04:00,480 --> 00:04:01,660
a little bit ago.

57
00:04:02,040 --> 00:04:10,220
So inside my motile at the very top I'm going to import history from up one directory history.

58
00:04:10,410 --> 00:04:15,150
So this is remember that history that Jesus object or the history such as file where we created our

59
00:04:15,150 --> 00:04:24,920
history for re-act router then on my div with Diemer modals visible active I can add on a on click event

60
00:04:24,920 --> 00:04:33,740
handler So anytime that a user clicks on this thing we can call history dot push and we can go back

61
00:04:33,740 --> 00:04:35,950
to our route route like so.

62
00:04:35,960 --> 00:04:38,930
So notice how I wrapped this inside of a ero function.

63
00:04:38,930 --> 00:04:43,520
So anytime we click on that thing run that arrow function which is going to call history don't push

64
00:04:43,880 --> 00:04:49,130
it let's try saving this and give it a quick shot so I'll flip back over.

65
00:04:49,160 --> 00:04:51,600
And now when I click on that I see the window go away.

66
00:04:51,870 --> 00:04:55,250
Let's try that again one more time because it happened pretty darn quickly.

67
00:04:55,250 --> 00:04:59,900
I'm going to again go to localhost three thousand streams slash delete.

68
00:05:00,080 --> 00:05:05,010
And now if I click on say the background Yup I go back to my main stream window.

69
00:05:05,570 --> 00:05:10,290
But let's do this one more time and I want to show you some interesting behavior this time around.

70
00:05:10,310 --> 00:05:12,770
I'm going to click like just to the left of the delete button.

71
00:05:12,830 --> 00:05:17,090
Let's say that our user comes in here and they try to click that delete button but they accidentally

72
00:05:17,090 --> 00:05:19,320
clicked just off to the left side.

73
00:05:19,580 --> 00:05:26,750
So if I click just to the left hand side that still dismisses the entire model or it navigates us away.

74
00:05:26,990 --> 00:05:27,940
Well why is that.

75
00:05:28,190 --> 00:05:34,350
Well essentially this is very basic event handling this is event propagation.

76
00:05:34,350 --> 00:05:38,410
So remember this is default javascript behavior default HTL behavior.

77
00:05:38,420 --> 00:05:44,660
If we ever trigger an event on some child elements and that child element Element does not handle that

78
00:05:44,660 --> 00:05:50,390
event the event is going to essentially bubble up to some parent element on leave he gets caught with

79
00:05:50,390 --> 00:05:51,630
an event handler.

80
00:05:51,950 --> 00:05:58,070
So in this case if I click on any of the elements inside of any of these things that click event is

81
00:05:58,070 --> 00:06:00,840
going to bubble up to this device.

82
00:06:00,860 --> 00:06:06,120
It's going to run the on click event handler right here which is going to run history push.

83
00:06:06,140 --> 00:06:09,310
So that's definitely something that we probably don't want to have happen.

84
00:06:09,410 --> 00:06:15,080
So to make sure that doesn't occur we can at a click event handler to the window div for the content

85
00:06:15,080 --> 00:06:19,010
div right here the day with the class name of UI standard modal.

86
00:06:19,010 --> 00:06:21,690
So at in a click event handler to that as well.

87
00:06:24,090 --> 00:06:29,430
And then inside if you're going to get the event argument that this function will be called with remember

88
00:06:29,430 --> 00:06:35,240
whenever a event occurs we always get an event argument or event object as the argument.

89
00:06:35,400 --> 00:06:43,650
And on that event argument we can call e or event eed for short stop propagation like so.

90
00:06:43,890 --> 00:06:49,530
So stop propagation is going to make sure that that event does not continue to bubble up and go to this

91
00:06:49,530 --> 00:06:54,900
div right here thus causing our window to get dismissed by navigating to some other page.

92
00:06:55,080 --> 00:07:03,440
So I can save this and now we flip back over and again go manually to stream slash delete.

93
00:07:03,470 --> 00:07:09,470
Now I can click all over this inner content window and nothing gets dismissed until I click on the background

94
00:07:09,470 --> 00:07:10,380
behind it.

95
00:07:11,040 --> 00:07:13,610
All right so that's a little bit better now.

96
00:07:13,860 --> 00:07:18,570
Our model is coming along pretty well here but I want to point out a little bit of an issue at present

97
00:07:18,600 --> 00:07:24,240
it has some hard coded content inside of here like hard coded delete stream and hard coded text of.

98
00:07:24,240 --> 00:07:26,570
Are you sure you want to delete that stream.

99
00:07:26,570 --> 00:07:31,890
Usually anytime we create a modal we definitely want to make sure that it is re-usable in nature.

100
00:07:31,950 --> 00:07:36,900
So there might be many other locations inside of our application where we want to show a modal and in

101
00:07:36,900 --> 00:07:41,670
every one of those cases we probably are going to want to have a different header different content

102
00:07:41,700 --> 00:07:46,950
different buttons and we want different things to occur whenever a user clicks on those buttons.

103
00:07:46,950 --> 00:07:52,260
In addition if a user dismisses the modal by clicking on that background in some cases we might not

104
00:07:52,260 --> 00:07:54,600
want to navigate back to the root route.

105
00:07:54,600 --> 00:07:58,770
So I think that we need to figure out a way to make this component far more usable than it currently

106
00:07:58,770 --> 00:07:59,460
is.

107
00:07:59,460 --> 00:08:00,910
So let's take a quick pause right here.

108
00:08:00,990 --> 00:08:03,870
When we come back in the next section we'll do some refactoring to the modal.