1 00:00:01,200 --> 00:00:05,190 The next thing we're going to work on is to create a new component that we're going to call our action 2 00:00:05,190 --> 00:00:11,220 bar, this action bar is going to show these little up arrow down arrow and X to move sales up, down 3 00:00:11,220 --> 00:00:11,910 or delete it. 4 00:00:12,480 --> 00:00:16,590 As you guess, as we put the action bar component together, we're going to eventually wired this up 5 00:00:16,590 --> 00:00:21,300 to the move cell action creator and the delete cell action creators. 6 00:00:22,070 --> 00:00:25,260 Let's go back over to our Ed. We'll start working on Action Bar right away. 7 00:00:26,440 --> 00:00:31,300 All right, we're going to find my SIRC component's directory inside there, I'll make a new file called 8 00:00:31,480 --> 00:00:34,290 Action Bar DOT TSX. 9 00:00:35,650 --> 00:00:39,370 Then inside of here right away, let's go ahead and create our component. 10 00:00:43,090 --> 00:00:44,530 Well, then export it at the bottom. 11 00:00:47,580 --> 00:00:51,510 I'm going to annotate Action Bar as React FC. 12 00:00:52,360 --> 00:00:54,820 And then right now, I'll put in a live. 13 00:00:56,850 --> 00:00:59,310 And we'll give this thing red button elements. 14 00:01:00,550 --> 00:01:05,650 We're going to eventually replace these buttons, possibly with something with a little bit better styling, 15 00:01:05,650 --> 00:01:06,820 but these will work right now. 16 00:01:07,850 --> 00:01:13,670 On the first one, I'm just going to give it some text of up, then down, then delete. 17 00:01:14,720 --> 00:01:18,530 So, as you guess, we definitely need to wire up clicks on these different buttons to some different 18 00:01:18,530 --> 00:01:24,020 action creators to remember all these different action creators around moving a cell or deleting a cell 19 00:01:24,200 --> 00:01:25,640 requires some different arguments. 20 00:01:26,040 --> 00:01:31,220 So, for example, if we go over to our action creators index sites file, if we want to delete a cell, 21 00:01:31,370 --> 00:01:33,620 we must know the idea, the cell we want to delete. 22 00:01:34,130 --> 00:01:35,840 And same thing for Mousel as well. 23 00:01:35,840 --> 00:01:38,390 If we want to move a cell, we need to know the idea of the cell. 24 00:01:39,330 --> 00:01:43,650 So without a doubt, we're probably going to provide the I.D. of the cell that we're going to try to 25 00:01:43,830 --> 00:01:45,610 move up, down or delete. 26 00:01:45,990 --> 00:01:49,590 So let's assume that we're going to provide that as a prop to this component. 27 00:01:50,780 --> 00:01:52,970 I'm going to say that I expect to be given. 28 00:01:54,150 --> 00:02:00,880 Inside of a action are props interface, just the idea of the cell that we're working with here. 29 00:02:00,930 --> 00:02:02,490 We don't really need the whole cell in this case. 30 00:02:02,490 --> 00:02:04,590 We just need to know the ID of the cell. 31 00:02:05,250 --> 00:02:09,449 This will save us from an additional import and having to import the entire cell interface. 32 00:02:10,199 --> 00:02:12,660 So we're going to say that we're going to be given the idea, the cell. 33 00:02:14,750 --> 00:02:19,370 So I'll make sure I put on my type imitation of action bar props. 34 00:02:20,410 --> 00:02:21,970 I'll then receive that Eid. 35 00:02:24,640 --> 00:02:30,460 OK, so then after that, let's import our action, Grieder Hook or the EU's actions hook, and we'll 36 00:02:30,460 --> 00:02:33,820 wire that thing up to our three different buttons at the top of the file. 37 00:02:34,480 --> 00:02:39,190 I will import use actions from up on directory. 38 00:02:39,580 --> 00:02:42,040 Folks use actions. 39 00:02:43,560 --> 00:02:44,790 Then inside of our components. 40 00:02:45,800 --> 00:02:50,360 We can get our move cell and delete cell action creators. 41 00:02:57,530 --> 00:02:59,210 Well, this is coming along rather quickly. 42 00:02:59,780 --> 00:03:04,220 I think the last big thing we have to do is to make sure that these buttons have an unclick handler 43 00:03:04,250 --> 00:03:05,060 attached to them. 44 00:03:05,480 --> 00:03:10,370 Whenever user clicks each one, we will invoke either Mousel or delete cell with the appropriate arguments. 45 00:03:10,760 --> 00:03:12,320 Let's take care of up first. 46 00:03:12,920 --> 00:03:14,480 I'm going to put in an unclick function. 47 00:03:18,320 --> 00:03:20,960 Inside of here, I'm going to call Move Cell. 48 00:03:21,990 --> 00:03:25,020 With a slide and in this case, you want to move it up. 49 00:03:26,640 --> 00:03:29,670 Well, then do something very similar for down, so put in unclick. 50 00:03:31,340 --> 00:03:34,160 Move, sell, ID and down. 51 00:03:36,020 --> 00:03:36,740 And then finally. 52 00:03:38,510 --> 00:03:43,880 For our delete button, you guessed it, we'll call delete cell and provide the idea, the cell. 53 00:03:45,050 --> 00:03:47,240 Well, that came together rather quickly. 54 00:03:48,840 --> 00:03:52,860 Now, all we really have to do is, of course, apply some styling to this and show it on the screen 55 00:03:52,860 --> 00:03:53,670 at some point in time. 56 00:03:54,120 --> 00:03:55,770 Let's first just try to show it on the screen. 57 00:03:56,670 --> 00:04:00,240 So we probably want to show this thing as a part of our existing. 58 00:04:01,330 --> 00:04:06,400 So list item component that will make sure that we can show one of these actions are things directly 59 00:04:06,400 --> 00:04:09,400 on top of either Archerd cell or the text editor. 60 00:04:10,060 --> 00:04:13,480 Let's go over to our cell list item component and show this action bar. 61 00:04:16,370 --> 00:04:18,589 We'll go back over to my cell list item. 62 00:04:20,300 --> 00:04:22,790 At the very top, I will import. 63 00:04:24,210 --> 00:04:24,990 Action bar. 64 00:04:27,410 --> 00:04:28,670 From Aschenbach. 65 00:04:31,550 --> 00:04:35,270 Up this autocomplete is giving me a little bit of trouble here, action. 66 00:04:36,510 --> 00:04:39,230 OK, it's going to type it out, no autocomplete for me. 67 00:04:41,580 --> 00:04:47,690 We can then go down to our d'Hiv right here, so that child is going to be the actual text or code cell, 68 00:04:47,700 --> 00:04:51,420 of course we're going to say that right above that we want to show. 69 00:04:53,090 --> 00:04:58,120 Our action bar component, and when we do so, of course, we need to provide the ID of the cell. 70 00:04:58,460 --> 00:05:01,790 We'll give it an ID and provide cell ID. 71 00:05:03,420 --> 00:05:04,670 All right, well, that should be it. 72 00:05:04,710 --> 00:05:07,890 So let's save this, we'll go back to the browser and do a quick test. 73 00:05:09,770 --> 00:05:13,610 Now, I see all these buttons, of course, like I mentioned, we do have to apply a little bit of styling. 74 00:05:13,990 --> 00:05:16,850 Let's try to just click them and move these cells around a little bit. 75 00:05:17,310 --> 00:05:20,360 So I'm going to try to move the tech cell right here up on the screen. 76 00:05:20,360 --> 00:05:22,850 So I click up a it actually worked. 77 00:05:23,540 --> 00:05:28,160 If I click up again, remember, we had written into our action creator some logic to guard against 78 00:05:28,160 --> 00:05:30,740 attempting to move the top cell up any further. 79 00:05:31,070 --> 00:05:33,950 So I should be able to now click up some more and not see anything. 80 00:05:33,950 --> 00:05:34,290 Break. 81 00:05:34,870 --> 00:05:35,360 Looks good. 82 00:05:36,410 --> 00:05:41,910 I should also be able to click down and move that cell down so I can go up and down, up and down. 83 00:05:41,930 --> 00:05:42,470 Very good. 84 00:05:43,020 --> 00:05:45,440 I'm going to go down to the very bottom with this cell. 85 00:05:47,640 --> 00:05:52,620 And then down and once for the very last cell right there, if I keep on clicking down, nothing goes 86 00:05:52,620 --> 00:05:52,920 wrong. 87 00:05:53,990 --> 00:05:57,050 We should also be able to add in some text into these text cells. 88 00:05:58,420 --> 00:06:02,170 And then make sure that as we move this thing around, it maintains the same text. 89 00:06:02,690 --> 00:06:03,660 So if I move it up. 90 00:06:03,670 --> 00:06:04,840 Yep, same text. 91 00:06:05,110 --> 00:06:05,770 Same text. 92 00:06:06,790 --> 00:06:10,930 Same thing for the code editor, I put in some code in there, I should be able to move it up. 93 00:06:11,470 --> 00:06:12,280 Yep, looks good. 94 00:06:12,580 --> 00:06:13,140 Move it down. 95 00:06:13,150 --> 00:06:13,720 Looks good. 96 00:06:14,170 --> 00:06:17,050 And then finally, last big test and I delete this. 97 00:06:17,560 --> 00:06:20,150 So I click on delete d the cell disappear. 98 00:06:20,290 --> 00:06:22,090 Delete, delete, delete. 99 00:06:22,950 --> 00:06:23,440 Awesome. 100 00:06:24,030 --> 00:06:28,920 Well, I got to be honest with you, this is probably the easiest component we've put together out of 101 00:06:28,920 --> 00:06:30,600 all the components we've had to work on. 102 00:06:30,600 --> 00:06:32,440 So the actions are really not that bad. 103 00:06:32,760 --> 00:06:36,240 All we had to do is wear those buttons and then wire up the different action creators. 104 00:06:36,780 --> 00:06:40,050 So I'm actually just pleasantly surprised that everything came together so nicely. 105 00:06:40,230 --> 00:06:42,740 But of course, we do have to out in just a little bit of styling. 106 00:06:43,020 --> 00:06:44,070 So let's come back to the next video. 107 00:06:44,070 --> 00:06:48,000 We're going to add in a couple of class names here and there and then write out a little bit of custom 108 00:06:48,000 --> 00:06:49,040 counts as well.