1
00:00:00,690 --> 00:00:02,580
Are modal component is looking pretty good.

2
00:00:02,580 --> 00:00:04,430
There's just one little issue with it.

3
00:00:04,500 --> 00:00:07,020
If we open up the modal again here's the modal.

4
00:00:07,020 --> 00:00:10,600
You'll notice that we've got the hard coded text inside of year of delete stream.

5
00:00:10,620 --> 00:00:15,420
We also have some hard coded content and some hard coded buttons inside of the div with the class of

6
00:00:15,450 --> 00:00:16,520
actions.

7
00:00:16,560 --> 00:00:21,270
In addition any time that the user clicks outside of the modal we always redirect the user back to the

8
00:00:21,270 --> 00:00:23,150
root route of our application.

9
00:00:23,160 --> 00:00:27,960
Now it's incredibly likely that we might eventually want to reuse this Modal component at some point

10
00:00:27,990 --> 00:00:28,900
in the future.

11
00:00:29,120 --> 00:00:32,800
It would be really hard to use because we've got all this hard coded text.

12
00:00:32,880 --> 00:00:36,870
So in this video I want to make sure that we don't have any hard coded text inside of your.

13
00:00:37,000 --> 00:00:40,600
We don't have any hard coded actions when user clicks outside of the modem.

14
00:00:40,710 --> 00:00:45,690
Instead we should configure the modal based upon some props that get passed into it from the parent

15
00:00:45,690 --> 00:00:46,550
component.

16
00:00:46,920 --> 00:00:51,870
So that would make our motile much more reusable if we ever want to use it again in the future.

17
00:00:51,870 --> 00:00:55,600
So to get started I'm going to flip on over to my stream delete component.

18
00:00:55,800 --> 00:00:58,070
Here's where we create an instance of the modal.

19
00:00:58,350 --> 00:01:03,840
So to this thing I'm going to pass in a couple of props that will be used to customize how the modal

20
00:01:03,840 --> 00:01:05,600
looks and behaves.

21
00:01:05,610 --> 00:01:12,700
First off I'm going to pass in a prop of title and I'll give it some text like delete stream.

22
00:01:12,760 --> 00:01:18,820
So now inside of our modal jazz file rather than have having some hard coded title right here or Hetter

23
00:01:18,840 --> 00:01:24,530
for it we can instead reference props title like so.

24
00:01:24,530 --> 00:01:29,070
So we're going to take the title property of the proper subject and show it inside of the header.

25
00:01:29,070 --> 00:01:33,120
Now let's say both these files really quickly flip back over to the browser and we'll see.

26
00:01:33,240 --> 00:01:36,600
Yep we can now customize it from the parent component.

27
00:01:36,600 --> 00:01:41,100
Let's now repeat that process for the content and the actions down here as well.

28
00:01:42,160 --> 00:01:47,670
All right so in addition to the title on the motile I'm also going to pass in some content.

29
00:01:47,710 --> 00:01:48,610
I'll make this a string.

30
00:01:48,610 --> 00:01:53,320
I'll say something like Are you sure you want to delete this stream.

31
00:01:55,050 --> 00:01:57,780
We can also do some actions as well.

32
00:01:57,780 --> 00:02:03,150
So the actions right here needs to be some buttons that will appear inside of the actions div..

33
00:02:03,150 --> 00:02:06,690
Now this one's going to be a little bit more challenging in the case of title and content.

34
00:02:06,720 --> 00:02:12,480
We were able to just pass in some strings but this time we actually want to pass in some GSX elements

35
00:02:12,480 --> 00:02:15,060
like the two buttons that you see right here.

36
00:02:15,180 --> 00:02:20,070
So up above stream delete or see the return statement inside of stream delete.

37
00:02:20,070 --> 00:02:22,560
I'm going to make a new variable called actions.

38
00:02:23,090 --> 00:02:27,570
I'm going to place a set of parentheses and then inside there I'm going to place a little bit of GSX

39
00:02:27,690 --> 00:02:30,190
to render those two buttons that I want to show.

40
00:02:30,540 --> 00:02:41,390
So right now I'll do a div that contains a button with the class name of UI button negative we're going

41
00:02:41,390 --> 00:02:46,050
to change up the class names here just a little bit compared to what we had before the negative right.

42
00:02:46,050 --> 00:02:49,700
We're just going to get the button to appear as read and make it really clear that this is kind of like

43
00:02:49,700 --> 00:02:56,880
a dangerous changing action kind of thing going on they'll give that button the text delete and then

44
00:02:56,880 --> 00:03:01,880
after that I'll put another button with you button as a class name.

45
00:03:02,790 --> 00:03:05,560
And again I'll give you that the text cancel.

46
00:03:05,820 --> 00:03:11,490
So now we've got this little fragment so to speak of GSX right here we can pass that fragment of GSX

47
00:03:11,570 --> 00:03:13,710
as a prop down on actions.

48
00:03:13,710 --> 00:03:17,000
So say actions equals curly braces actions.

49
00:03:19,150 --> 00:03:24,700
All right so now we can save this we can flip back over to our motile and now we can refactor our content

50
00:03:24,700 --> 00:03:25,570
right here.

51
00:03:25,600 --> 00:03:33,220
So instead of having that hard coded text we can reference prop's dot content and inside the actions

52
00:03:33,220 --> 00:03:39,970
div rather than having the hardcoded buttons inside of your I can reference props dot actions as well.

53
00:03:41,150 --> 00:03:47,310
Now let's save this and we'll flip back over to the browser and see how it looks.

54
00:03:47,570 --> 00:03:47,870
All right.

55
00:03:47,870 --> 00:03:51,010
So pretty similar to what we had before just one issue here.

56
00:03:51,020 --> 00:03:56,000
Notice how the buttons are a little bit placed against the bottom of the motile that really does not

57
00:03:56,000 --> 00:03:57,120
look good at all.

58
00:03:57,170 --> 00:03:58,850
So why are we seeing that.

59
00:03:59,090 --> 00:04:01,380
Well let me show you something really quickly here.

60
00:04:01,430 --> 00:04:04,510
I'm going to make a little bit of a change to my stream delete component.

61
00:04:04,520 --> 00:04:06,440
I encourage you to not make this change.

62
00:04:06,440 --> 00:04:11,580
Just take a look at what I'm going to do rather than returning a div that contains the two buttons.

63
00:04:11,600 --> 00:04:17,240
I'm going to return just one button by itself so I'm going to sleep rather than commenting that stuff

64
00:04:17,240 --> 00:04:21,710
out him's going to delete those other GSX elements really quickly.

65
00:04:21,710 --> 00:04:24,740
All right so now actions has a single button element.

66
00:04:24,800 --> 00:04:26,210
I'm not going to save this.

67
00:04:26,210 --> 00:04:30,800
Flip back over and you'll see that the button appears correctly and it's not sandwiched up against the

68
00:04:30,800 --> 00:04:34,170
bottom of the motile So this is kind of an interesting problem.

69
00:04:34,340 --> 00:04:41,240
When we have that extra div inside of our class of actions right here inside of motile when we have

70
00:04:41,240 --> 00:04:46,540
an extra div inside their semantic UI does not quite style the model correctly.

71
00:04:46,820 --> 00:04:54,080
However we always have to have a div or some element wrapping these multiple elements if we want to

72
00:04:54,140 --> 00:04:55,790
get them to show up correctly.

73
00:04:55,820 --> 00:05:01,460
In other words we can't just take like these two GSX elements and tried to assign them like so to the

74
00:05:01,460 --> 00:05:02,810
actions variable.

75
00:05:02,810 --> 00:05:05,090
In this case these are two separate function calls.

76
00:05:05,090 --> 00:05:10,280
Remember what happens when you're GSX gets transpired by Babel so we can't just take two function calls

77
00:05:10,280 --> 00:05:14,780
inside of a set of prints and pass them off to actions or assign them to actions.

78
00:05:14,780 --> 00:05:20,030
That's not valid javascript syntax and that's why we had the div inside there so that we only assigned

79
00:05:20,090 --> 00:05:23,340
one root element to the actions variable.

80
00:05:23,540 --> 00:05:26,270
But as we just saw when we do so would we have this div right here.

81
00:05:26,280 --> 00:05:29,660
Our styling gets thrown off so as a little work around.

82
00:05:29,690 --> 00:05:33,230
Let's take a quick pause and the next video will talk about how we're going to use a little work around

83
00:05:33,230 --> 00:05:35,420
to avoid running into this styling issue.

84
00:05:35,420 --> 00:05:37,350
We're inserting this extra day right here.

85
00:05:37,430 --> 00:05:41,090
Throws off our styling so quick Pozen I'll see you in just a minute.