1 00:00:00,680 --> 00:00:02,190 Are applications looking pretty good. 2 00:00:02,210 --> 00:00:03,800 But there's one last little change. 3 00:00:03,810 --> 00:00:05,630 They want to make this application. 4 00:00:05,660 --> 00:00:10,620 The goal of making this change is to introduce you to one last big topic in the world of props. 5 00:00:10,670 --> 00:00:12,640 So let's get to it. 6 00:00:12,650 --> 00:00:14,100 All right so here's what I want to do. 7 00:00:14,150 --> 00:00:18,830 I want to take each of those different comments that we just put together and wrap them in a sort of 8 00:00:18,890 --> 00:00:23,790 approval card where we show the comment and then approve or reject button. 9 00:00:23,810 --> 00:00:28,910 Right underneath it you might have never really seen some interface like this before but it's actually 10 00:00:28,910 --> 00:00:31,680 incredibly common for blog platforms. 11 00:00:31,760 --> 00:00:37,040 You see if you've ever read comments on a blog or forums or whatever it might be you might sometimes 12 00:00:37,040 --> 00:00:39,530 notice that there are a lot of spam posts. 13 00:00:39,680 --> 00:00:46,220 So several blog blog platforms out there will actually give blog authors the ability to approve or reject 14 00:00:46,220 --> 00:00:49,120 comments before they get added to an actual blog. 15 00:00:49,460 --> 00:00:53,570 And so this would suit this interface with here with suit that purpose perfectly. 16 00:00:53,810 --> 00:00:58,550 We might take all the comments that people have added to a particular blog and present them to the blog 17 00:00:58,550 --> 00:01:03,770 writer so that they can kind of audit them and approve them for posting or reject them before they actually 18 00:01:03,770 --> 00:01:05,680 get added to the blog itself. 19 00:01:06,490 --> 00:01:06,760 All right. 20 00:01:06,760 --> 00:01:12,280 So we are going to do some thinking about the best way to wrap each of our comments with some additional 21 00:01:12,280 --> 00:01:14,940 little card and two buttons right underneath it. 22 00:01:14,940 --> 00:01:16,870 And there's definitely a very easy way to do this. 23 00:01:16,870 --> 00:01:22,960 Without a doubt we could absolutely open up that comment detail component right here and add a little 24 00:01:22,960 --> 00:01:28,300 bit more GSX to this thing to show that kind of outline for this card looking thing or that kind of 25 00:01:28,320 --> 00:01:29,740 a rectangle around it. 26 00:01:29,740 --> 00:01:32,410 And then also put two buttons underneath this as well. 27 00:01:32,440 --> 00:01:37,140 Without a doubt that is an option but we're going to do things a little bit differently. 28 00:01:37,210 --> 00:01:37,690 OK. 29 00:01:37,750 --> 00:01:43,840 Remember the ultimate goal here is to introduce you to one last big idea in the props rolled. 30 00:01:43,850 --> 00:01:45,630 So here's what we're going to do. 31 00:01:45,650 --> 00:01:50,150 We're going to leave our current common detail component as it is right now. 32 00:01:50,180 --> 00:01:53,120 We're not going to make a single change to it. 33 00:01:53,120 --> 00:01:58,990 Instead we're going to create a brand new component a second component called approval card disapproval 34 00:01:59,150 --> 00:02:02,480 card is going to show this kind of white outline around it. 35 00:02:02,480 --> 00:02:08,030 And then also the approve and reject buttons and then we will have the option with the approval card 36 00:02:08,150 --> 00:02:11,260 to stick some custom content in right here. 37 00:02:11,270 --> 00:02:16,490 Now when we make the approval card we are not going to hardcoded to always show an instance of comment 38 00:02:16,490 --> 00:02:17,170 detail. 39 00:02:17,270 --> 00:02:18,610 And let me tell you why. 40 00:02:18,950 --> 00:02:23,290 If we were building an application that had this type of interface right here of like a comment with 41 00:02:23,290 --> 00:02:30,080 a proven reject it's entirely possible that we might want to reuse this approval card component and 42 00:02:30,080 --> 00:02:35,450 just have like a white box with a proven reject buttons underneath it but have completely different 43 00:02:35,450 --> 00:02:36,770 content inside of it. 44 00:02:36,770 --> 00:02:41,630 Besides the comment detail as a quick example of that you know here's something we might want to build 45 00:02:41,640 --> 00:02:46,880 using the approval card we might want to show the same white card show the same a proven reject buttons 46 00:02:47,060 --> 00:02:50,390 but have completely different content in there. 47 00:02:50,560 --> 00:02:55,390 So we're going to put the approval card together as a separate component and we want to make sure that 48 00:02:55,390 --> 00:03:01,420 we can somehow show the comment detail inside of it but we don't want to always 100 percent show the 49 00:03:01,420 --> 00:03:03,710 common detail every single time we use this thing. 50 00:03:03,790 --> 00:03:07,990 We want to have the ability to swap out some different content in there. 51 00:03:07,990 --> 00:03:08,910 All right so that's the goal. 52 00:03:08,920 --> 00:03:10,290 That's what we're going to try to do. 53 00:03:10,540 --> 00:03:12,090 So let's take a quick pause right here. 54 00:03:12,160 --> 00:03:16,120 When we come back the next section we're going to start putting together the approval card and we'll 55 00:03:16,120 --> 00:03:20,740 talk about the feature around the Propp system that we're going to use to you all to easily say about 56 00:03:20,740 --> 00:03:22,690 the main content on the card itself. 57 00:03:22,750 --> 00:03:24,770 So quick pause and I'll see you in just a minute.