1 00:00:01,160 --> 00:00:05,360 All right, my friends, let's kick off this refactor, so we're going to go through our entire project, 2 00:00:05,370 --> 00:00:07,939 we're going to first start off inside the site of our project. 3 00:00:08,210 --> 00:00:13,340 We're going to find any reference to insert cell before we're going to change it into insert cell after. 4 00:00:13,550 --> 00:00:17,750 And then we're going to eventually go into a reducer and update the actual logic inside there as well. 5 00:00:18,230 --> 00:00:20,330 So in this video, just the right side of things. 6 00:00:21,070 --> 00:00:22,670 OK, I'm going to go back over to my editor. 7 00:00:23,920 --> 00:00:28,450 I'm going to first begin incited by state action types in the states file. 8 00:00:29,440 --> 00:00:33,940 We're going to first update our action typewrite here, I'm going to update the string itself to insert 9 00:00:33,940 --> 00:00:34,910 cell after. 10 00:00:35,650 --> 00:00:38,770 Now, one thing you might be a little tempted to do here is right. 11 00:00:38,770 --> 00:00:43,990 Click on Insert Cell before and then you might have inside of your code editor the functionality to 12 00:00:43,990 --> 00:00:48,190 automatically rename this type for you intelligently across the entire project. 13 00:00:48,850 --> 00:00:50,530 If you want to do that, that is fine. 14 00:00:50,530 --> 00:00:53,800 But I really recommend you not try this out inside this course. 15 00:00:54,160 --> 00:00:58,990 And the only reason for this is that depending upon your editor, this renaming logic might be done 16 00:00:58,990 --> 00:00:59,890 slightly differently. 17 00:01:00,130 --> 00:01:03,880 And I just want to make sure that you and I have the exact same code inside of our editors. 18 00:01:04,269 --> 00:01:08,500 So I recommend that you go through this refactor with me manually rather than trying to use any kind 19 00:01:08,500 --> 00:01:10,720 of automatic refactoring inside of your editor. 20 00:01:11,910 --> 00:01:16,830 OK, so with that in mind, let's do this manually, I'm going to change our action type to insert cell 21 00:01:16,830 --> 00:01:17,340 after. 22 00:01:19,720 --> 00:01:24,100 All right, so next up, I'm going to go into my action creator's index dots file. 23 00:01:25,400 --> 00:01:26,960 At the very bottom of this file. 24 00:01:28,170 --> 00:01:31,350 We've got insert cell before I'm going to change the name of that to. 25 00:01:32,720 --> 00:01:33,920 Insert cell after. 26 00:01:34,850 --> 00:01:37,100 I'm going to change the action type to. 27 00:01:37,980 --> 00:01:39,150 Insert cell after. 28 00:01:43,060 --> 00:01:44,110 I'm going to change. 29 00:01:45,180 --> 00:01:47,820 The action return type invitation. 30 00:01:48,840 --> 00:01:51,240 To insert cell after. 31 00:01:55,440 --> 00:01:59,310 Will immediately get an air from that totally fine, let's go up to the top of the file. 32 00:02:00,820 --> 00:02:05,980 I'm going to find insert cell before action right here or change it to insert cell after action. 33 00:02:08,610 --> 00:02:11,820 We'll go into our actions directory, find index dots. 34 00:02:14,360 --> 00:02:21,800 Inside of here, we've got insert cell before action, we will rename that to insert cell after change 35 00:02:21,800 --> 00:02:23,540 the action, type two after. 36 00:02:24,720 --> 00:02:29,610 And then finally, at the very bottom, when we export our action type, we will rename. 37 00:02:30,570 --> 00:02:31,950 Do after aswell. 38 00:02:34,570 --> 00:02:39,850 OK, so now if we go into our action Graeter's index dots file, we should have no errors if we go into 39 00:02:39,850 --> 00:02:46,570 action types, no errors and if we go into actions, index dots, no errors inside of here as well. 40 00:02:47,510 --> 00:02:50,150 So everything around our action craters is looking good. 41 00:02:50,660 --> 00:02:54,170 Let's now go into our reducers, I'm going to find cels reducer. 42 00:02:55,250 --> 00:03:01,460 And inside of here, we need to import or fix up some of our switch statements inside of here, so I'm 43 00:03:01,460 --> 00:03:04,400 going to scroll down a little bit and eventually find insert cell before. 44 00:03:05,650 --> 00:03:08,680 Of course, we're going to change this to insert cell after. 45 00:03:10,270 --> 00:03:13,880 And then we just need to update a little bit of the logic inside of here. 46 00:03:14,740 --> 00:03:17,980 Let's first get a very quick reminder on the logic that we currently have inside of Iraq. 47 00:03:18,850 --> 00:03:20,910 We first begin by creating a brand new cell. 48 00:03:21,340 --> 00:03:23,200 We add in that cell to our data object. 49 00:03:23,410 --> 00:03:28,600 And then everything else inside of here is all about inserting the idea that cell into our order array. 50 00:03:29,140 --> 00:03:32,620 You might recall that when we were writing out all this logic, I showed you a diagram that looked like 51 00:03:32,620 --> 00:03:33,250 this right here. 52 00:03:34,390 --> 00:03:40,000 So inside of our action payload that we have access to, there is an ID property and this ID property 53 00:03:40,030 --> 00:03:42,460 is pointing at the ID of the cell. 54 00:03:42,520 --> 00:03:48,700 So in this case, maybe D.F. where we want to insert the new cells ID right before that one. 55 00:03:49,090 --> 00:03:54,880 So if our action payload says ID f we want to take this new ID that we have generated and put it right 56 00:03:54,880 --> 00:03:55,160 there. 57 00:03:55,990 --> 00:03:58,350 So we're now saying that we want to flip that behavior. 58 00:03:58,600 --> 00:04:03,520 We want to still find the index of the cell that is provided inside of that ID property. 59 00:04:03,880 --> 00:04:06,880 But now we want to add in this new ID immediately after. 60 00:04:07,840 --> 00:04:12,490 In addition, there's one other case we need to think about in some cases, we are not able to find 61 00:04:12,490 --> 00:04:18,529 the index of any idea inside of here because the ID or the payload ID property is null. 62 00:04:18,940 --> 00:04:24,190 So previously in that scenario, we had assumed that meant that we wanted to add in this new ID to the 63 00:04:24,190 --> 00:04:24,820 very end. 64 00:04:25,240 --> 00:04:26,560 So we're now going to flip that logic. 65 00:04:26,620 --> 00:04:28,210 We're going to say that we want to add in. 66 00:04:29,430 --> 00:04:31,590 That new idea to the very start instead. 67 00:04:32,790 --> 00:04:38,040 OK, so those two scenarios, crystal clear, hopefully maybe not, no problem, we're going to go back 68 00:04:38,040 --> 00:04:39,710 over, we're going to find our statement right here. 69 00:04:40,020 --> 00:04:45,870 Remember, if found index is less than zero, that means that we were not able to find any ID inside 70 00:04:45,870 --> 00:04:48,530 of our order array matching the one inside of our payload. 71 00:04:48,960 --> 00:04:53,790 So that was a case in which we would normally add in this new cell ID to the very end of the order array. 72 00:04:54,300 --> 00:04:55,530 So, again, we want to flip that. 73 00:04:55,530 --> 00:04:57,510 We want to instead out into the very start. 74 00:04:57,990 --> 00:05:03,510 So instead of doing a push, we'll do an unseen shift, which will add in to the very start of the array. 75 00:05:05,770 --> 00:05:13,210 Then for Splice, we are currently providing found index, which will take found index, add in this 76 00:05:13,210 --> 00:05:14,540 new ID right before it. 77 00:05:15,010 --> 00:05:21,040 So we're now going to take found index, add one to it, and that will cause us to insert this new thing 78 00:05:21,040 --> 00:05:22,420 immediately after instead. 79 00:05:24,210 --> 00:05:28,170 So for found index right here, we're going to found index plus one. 80 00:05:30,190 --> 00:05:31,000 And that should be it. 81 00:05:32,450 --> 00:05:36,420 OK, so let's save this, that should be it for the redock side of this refactor. 82 00:05:36,710 --> 00:05:40,550 We'll take a quick pause right here, come back to the next video, picks up the back side of things, 83 00:05:40,550 --> 00:05:42,380 and then, of course, do a nice, good test.