1 00:00:00,630 --> 00:00:06,650 Our application is actually complete, but I'm fully aware of that. 2 00:00:06,790 --> 00:00:13,620 There's definitely some people who are very, very upset about the fact that they're somewhat repeating 3 00:00:13,620 --> 00:00:14,330 functionality. 4 00:00:14,760 --> 00:00:19,840 So now I would like to refactor it and set it up as one function. 5 00:00:19,860 --> 00:00:26,310 Again, if you're not interested in that, just move on to the next video and also if you'd like to 6 00:00:26,310 --> 00:00:27,300 set it up yourself. 7 00:00:27,630 --> 00:00:30,740 So if you would want to have a challenge, definitely do so. 8 00:00:31,140 --> 00:00:34,920 In my case, I will refactor this into one function. 9 00:00:35,130 --> 00:00:39,430 So if you want to stop the video, try to do it yourself and then reserve it. 10 00:00:39,870 --> 00:00:43,650 That is definitely a good, good option. 11 00:00:43,890 --> 00:00:47,700 Now I've got two functions and then I would want to set up as one. 12 00:00:48,090 --> 00:00:53,910 So first, I guess I would need to go to the context and I would need to come up with a function here 13 00:00:53,910 --> 00:00:54,240 first. 14 00:00:54,720 --> 00:00:58,530 And I'm going to do that after first data since. 15 00:00:58,570 --> 00:01:05,850 Again, that is something that we're doing as an extra and I'm going to say const toggle and amount. 16 00:01:06,150 --> 00:01:09,850 So that is how I'm going to call my function now in this function. 17 00:01:09,870 --> 00:01:11,430 I'm going to be looking for two parameters. 18 00:01:11,790 --> 00:01:17,740 I'm going to be looking for the entity and then I'm going to be looking at, well, what am I doing? 19 00:01:18,120 --> 00:01:21,480 Am I increasing or am I decreasing? 20 00:01:21,930 --> 00:01:24,090 And then I'm going to say here type. 21 00:01:25,070 --> 00:01:26,720 So those are my two parameters. 22 00:01:27,000 --> 00:01:30,620 And now, of course, I would want to set up my register. 23 00:01:30,930 --> 00:01:35,160 So say here, dispatch, and we're going to go with type. 24 00:01:35,460 --> 00:01:37,750 I will call this toggle as well. 25 00:01:38,220 --> 00:01:41,850 So essentially it's going to be toggle and then underscore amount. 26 00:01:42,180 --> 00:01:45,850 And now, of course, in the payload, I'll need two things. 27 00:01:46,290 --> 00:01:52,100 So instead of setting up two separate properties, I'm going to go with Kharma and the object. 28 00:01:52,470 --> 00:01:54,420 So that is my payload object. 29 00:01:54,720 --> 00:01:56,910 So I'll set it equal, of course, to my payload. 30 00:01:57,420 --> 00:01:58,920 So so that is my object. 31 00:01:59,100 --> 00:02:04,560 And then in here I'll pass and these two things apart in the area and then type. 32 00:02:04,830 --> 00:02:07,670 So whether I would want to increase or decrease. 33 00:02:08,010 --> 00:02:14,410 So once I've got this in place, then of course I need to navigate here and then we'll say toggle AMOLED, 34 00:02:14,790 --> 00:02:21,270 not the function we're passing on, but of course we navigate to the current item line and here we need 35 00:02:21,280 --> 00:02:22,330 to structure it first. 36 00:02:22,350 --> 00:02:28,440 So toggle and amount and of course where we have the increase and decrease. 37 00:02:28,710 --> 00:02:30,540 Now I would want to change this around. 38 00:02:31,580 --> 00:02:38,210 So I have my two cursors are old enough, both of them, and I'll say Tomago an amount. 39 00:02:38,420 --> 00:02:41,740 And now remember, the function is looking for two things. 40 00:02:42,170 --> 00:02:45,500 It is looking for the very first and then the type. 41 00:02:45,800 --> 00:02:48,710 Now, the idea I'm already passing is first. 42 00:02:48,890 --> 00:02:54,440 And then, of course, for the increase, I'll just say ink and learn for decrease. 43 00:02:54,680 --> 00:02:56,960 I want to say the easy. 44 00:02:57,350 --> 00:02:58,370 OK, beautiful. 45 00:02:58,730 --> 00:03:02,290 And then now we need to navigate to the register. 46 00:03:02,690 --> 00:03:09,140 And then again I'll do that right after display items because it is an extra in my opinion. 47 00:03:09,410 --> 00:03:19,010 And I'll say if action that type is equal to Torgau and underscore amount, I'll double check so I don't 48 00:03:19,010 --> 00:03:20,560 get some weird marks. 49 00:03:20,570 --> 00:03:20,890 Yep. 50 00:03:21,170 --> 00:03:22,070 Targo amount. 51 00:03:22,370 --> 00:03:27,050 Then of course I would want to handle that and I'll start by setting up again. 52 00:03:27,050 --> 00:03:34,070 A new variable will say a lot and then stamp cart that will be equal to my empty array for the time 53 00:03:34,070 --> 00:03:34,340 being. 54 00:03:34,670 --> 00:03:36,300 And then of course I would want to return. 55 00:03:36,530 --> 00:03:42,350 So we're going to go with the return to that state and then we'll change the cart around where it's 56 00:03:42,350 --> 00:03:44,010 going to be equal to my temper. 57 00:03:44,480 --> 00:03:46,850 Now, as far as the functionality for timecard. 58 00:03:47,880 --> 00:03:54,330 I will set up the map, however, in this case, I'll check whether we're increasing or decreasing, 59 00:03:54,550 --> 00:03:58,410 and if that is the case, then of course, I'll also change the values. 60 00:03:58,680 --> 00:04:02,040 So we're going to go with state then part of the map. 61 00:04:02,280 --> 00:04:07,680 So we're mapping over and I'll still call this court item as item. 62 00:04:08,190 --> 00:04:13,470 And that in here, I'll say first, if the I.D. matches, then I would want to do something. 63 00:04:13,830 --> 00:04:22,800 So say court item, Heidi, if it matches action, then dot and then payload and then ID, well, then 64 00:04:22,800 --> 00:04:27,000 I would want to return essentially new item if it doesn't match. 65 00:04:27,360 --> 00:04:31,280 And of course we're doing the same thing where we just return the crime. 66 00:04:31,580 --> 00:04:36,800 And as far as the changes we would want to do, we would need to set up two more if statements. 67 00:04:37,170 --> 00:04:43,710 So this is the first case where the ID matches the action payload and then since payload is an object 68 00:04:43,860 --> 00:04:49,110 and then I'm looking for that property, if that is the case, well, then I would want to check what 69 00:04:49,110 --> 00:04:49,710 is the type. 70 00:04:49,920 --> 00:04:53,340 So I go with action, then payload and then type. 71 00:04:53,580 --> 00:04:58,560 And I say if it is increasing, then I would want to increase amount by one. 72 00:04:58,890 --> 00:05:04,470 So I'll say I can't say or if it is decreasing then I would want to return something else. 73 00:05:04,710 --> 00:05:10,140 So I'm going to say again if action and then dot and of course I'm looking for payload and then type 74 00:05:10,440 --> 00:05:17,580 is equal to a decreasing one, then of course worked on something else in the first case will return 75 00:05:17,730 --> 00:05:24,390 everything that currently item has so that that dot and then I'll call this court item and you can probably 76 00:05:24,390 --> 00:05:32,370 already guess that we're just going to go cart item and that amount plus one, and that if we are decreasing 77 00:05:32,760 --> 00:05:39,970 then of course we'll have minus one like so and the last thing that I would want is where I setting 78 00:05:39,990 --> 00:05:41,810 up the time card. 79 00:05:42,030 --> 00:05:43,340 I also would want to filter it. 80 00:05:43,590 --> 00:05:48,960 Remember, this is something that we're doing when we're decreasing and in order to speed this up, 81 00:05:49,380 --> 00:05:52,890 just going to grab the filter, navigate down. 82 00:05:53,010 --> 00:05:58,050 I'm looking for my timecard, I'll pass it on the dot. 83 00:05:58,230 --> 00:06:04,770 And then every time the value will be below zero, of course, he is going to remove that item from 84 00:06:04,770 --> 00:06:05,090 the card. 85 00:06:05,370 --> 00:06:09,120 So now of course, I can increase and decrease my function. 86 00:06:09,130 --> 00:06:12,380 I and I can also remove the item from the card. 87 00:06:12,750 --> 00:06:20,460 And for those of you who are upset that we had two somewhat similar functionalities and of course we 88 00:06:20,460 --> 00:06:22,020 have only one. 89 00:06:22,230 --> 00:06:27,480 And I guess the last thing that I would want, instead of returning the state, I'm just going to throw 90 00:06:27,480 --> 00:06:31,770 the error if the action type does not match. 91 00:06:32,130 --> 00:06:41,370 And the way we do that, we simply say throw new error, throw you are and let's just say here, no 92 00:06:41,370 --> 00:06:44,390 matching action type. 93 00:06:44,790 --> 00:06:50,250 So if we'll try to dispatch some kind of action that doesn't exist, we're going to get there. 94 00:06:50,520 --> 00:06:54,330 Now, the fastest thing to check that notice where we're dispatching it totals. 95 00:06:54,630 --> 00:07:01,500 Let me dispatch something that I'm not handling some research type and I'm going to say, I don't know, 96 00:07:01,530 --> 00:07:04,380 random, random over here. 97 00:07:04,710 --> 00:07:11,100 So the moment I run this, of course, there's going to be an error that says no matching action type, 98 00:07:11,340 --> 00:07:13,870 OK, beautiful and remote. 99 00:07:14,130 --> 00:07:15,990 I was just for demonstration purposes. 100 00:07:16,290 --> 00:07:20,100 And if I navigate to the big screen, of course, our functionality works. 101 00:07:20,400 --> 00:07:22,230 That was our application. 102 00:07:22,470 --> 00:07:25,620 Hopefully everyone enjoy and I hope to see the next one.