1 00:00:01,020 --> 00:00:04,820 There's just one last thing I want to do to our modal component to make it more usable. 2 00:00:04,830 --> 00:00:09,450 You'll notice that the right here has our on click function that's going to attempt to always navigate 3 00:00:09,450 --> 00:00:12,150 the user to the route route of our application. 4 00:00:12,150 --> 00:00:16,620 Now it's entirely possible if we use a model somewhere else that we will not want to take the user to 5 00:00:16,620 --> 00:00:19,530 the route route if they attempt to dismiss this thing. 6 00:00:19,530 --> 00:00:22,590 In addition we might not want to navigate the user at all. 7 00:00:22,620 --> 00:00:24,430 So it's not just the path right here. 8 00:00:24,450 --> 00:00:26,820 We might not even want to call history push. 9 00:00:26,970 --> 00:00:32,820 We might want to do some other behavior maybe try to dismiss the motile by some other means or something 10 00:00:32,820 --> 00:00:33,800 like that. 11 00:00:33,810 --> 00:00:39,450 So I think that this entire on click function right here should be provided by the parent component. 12 00:00:39,600 --> 00:00:46,380 So I'm going to remove that entire aero function and instead anytime that a user clicks on this device. 13 00:00:46,620 --> 00:00:50,520 I think we should call prop's dot on dismiss. 14 00:00:50,520 --> 00:00:52,850 So we've not introduced this Propp before. 15 00:00:52,890 --> 00:00:58,920 This is going to be a new prop that we need to add in from the parent component So let's now save this. 16 00:00:59,380 --> 00:01:02,200 I'm going to flip back over to my stream delete. 17 00:01:02,200 --> 00:01:07,830 I'm going to find the motile and I'm going to pass in a new prop year called on dismiss. 18 00:01:07,980 --> 00:01:13,230 So this will be essentially what we want to have happen any time that the user attempts to click outside 19 00:01:13,440 --> 00:01:16,380 or dismiss that modal. 20 00:01:16,410 --> 00:01:17,190 All right. 21 00:01:17,190 --> 00:01:22,650 So I think that we should probably import the history object into stream delete and then attempt to 22 00:01:22,650 --> 00:01:25,710 navigate back to the route just as we were doing before. 23 00:01:25,710 --> 00:01:28,340 Remember that is what we want to have happen in this case. 24 00:01:28,380 --> 00:01:32,680 But the idea here was to just make our model more customizable in the future. 25 00:01:33,150 --> 00:01:37,590 So first off inside of my motile file I'm going to delete that history at the top because we do not 26 00:01:37,590 --> 00:01:38,830 need that anymore. 27 00:01:39,700 --> 00:01:49,160 I'll then go back over to stream delete at the top I will import history from up one directory history. 28 00:01:49,210 --> 00:01:53,140 Now we'll do the same thing we were doing before and cited this on dismissed Propp. 29 00:01:53,230 --> 00:01:57,510 I'm going to add in a aero function and inside of your we will call history. 30 00:01:57,550 --> 00:02:02,510 Push and we'll go back to our route route like so. 31 00:02:02,970 --> 00:02:08,670 So now we are completely configuring the model in terms of the title content actions and what happens 32 00:02:08,670 --> 00:02:12,340 when it gets dismissed from the parent component of string delete. 33 00:02:12,380 --> 00:02:18,800 So I'll save this I'm going to flip back over and I think I've got a bad import statement right there. 34 00:02:18,870 --> 00:02:21,150 We need to have going up to directories. 35 00:02:21,150 --> 00:02:22,350 My mistake. 36 00:02:22,350 --> 00:02:27,480 So we want to go up to components and then out to the sarcy directory and get the header files so dot 37 00:02:27,480 --> 00:02:30,020 dot dot dot slash. 38 00:02:30,040 --> 00:02:33,310 All right so I'll make that change I'll save this flip back over much better. 39 00:02:33,510 --> 00:02:38,170 So now I should be able to still click outside the motile and it goes away and I see the route route 40 00:02:38,240 --> 00:02:39,210 appear again. 41 00:02:39,300 --> 00:02:40,470 Perfect. 42 00:02:40,560 --> 00:02:40,850 OK. 43 00:02:40,870 --> 00:02:41,960 That's pretty much it. 44 00:02:41,960 --> 00:02:45,190 For some the basics around our modal component. 45 00:02:45,300 --> 00:02:49,680 Now the only issue at this point is that although we see this model and we have these buttons here when 46 00:02:49,680 --> 00:02:51,960 we click on the buttons nothing actually happens. 47 00:02:52,050 --> 00:02:57,090 So we need to make sure that we actually eventually attempt to hide the motile or delete the stream 48 00:02:57,090 --> 00:02:58,660 or whatever it is. 49 00:02:58,710 --> 00:03:02,850 But now that we've got the modal working in a very generalized and reasonable fashion we can start to 50 00:03:03,210 --> 00:03:05,440 focus on those tasks and the next video. 51 00:03:05,450 --> 00:03:09,430 So let's take a quick pause and make sure that we start to delete our stream in the next video.