1 00:00:00,240 --> 00:00:00,630 All right. 2 00:00:00,990 --> 00:00:06,760 And once we're done setting up a log in and register functionalities before we move on to the nested 3 00:00:06,780 --> 00:00:10,110 pages, let's address the elephant in the room. 4 00:00:10,920 --> 00:00:14,880 Since both functionalities are so similar on the frontend. 5 00:00:15,750 --> 00:00:19,440 Can we just refactor and get away with just one function? 6 00:00:20,130 --> 00:00:22,500 And the answer, of course, is yes, yes, we can. 7 00:00:23,010 --> 00:00:26,790 Now, before we begin with, just mention a few things first. 8 00:00:27,180 --> 00:00:28,440 This is totally optional. 9 00:00:28,800 --> 00:00:32,910 So if you are happy with the current setup, you can just move on to the next video. 10 00:00:33,480 --> 00:00:38,600 The only reason why I decided to do it is because I know I'm going to be getting comments about this, 11 00:00:38,610 --> 00:00:41,610 so I might as well show you my approach. 12 00:00:42,000 --> 00:00:49,290 Second, keep in mind that if you ever do decide to add something to our auth approach, for example 13 00:00:49,290 --> 00:00:52,920 verified email, it's easier if you have a current set up. 14 00:00:53,160 --> 00:00:54,240 So my point is yes. 15 00:00:54,420 --> 00:00:59,160 At the moment, there's quite a bit of repetition, but it's not always the case. 16 00:00:59,820 --> 00:01:05,910 And lastly, when it comes to refactoring, it's always my preference to do it at the very, very end. 17 00:01:06,270 --> 00:01:08,760 Basically, when I'm done building my entire app. 18 00:01:09,150 --> 00:01:12,840 Otherwise, you might find yourself constantly rewriting your code. 19 00:01:13,740 --> 00:01:21,810 As you're trying to add new features, and with that said, here's how I would refactor to one function. 20 00:01:22,260 --> 00:01:27,720 And essentially the goal is falling where instead of six actions, there's going to be only three. 21 00:01:28,070 --> 00:01:33,780 And instead of two functions registered user and logging user, there's going to be only one function. 22 00:01:34,170 --> 00:01:39,720 So let's start here in the actions where in between the video, our remove these suckers. 23 00:01:40,170 --> 00:01:43,650 But for now, I simply want to copy them. 24 00:01:44,160 --> 00:01:46,290 Let's say a logging one again doesn't really matter. 25 00:01:46,590 --> 00:01:49,140 I'm just going to rename it to a set up user. 26 00:01:49,860 --> 00:01:52,620 So again, let me go with my multiple cursor here. 27 00:01:53,820 --> 00:01:57,660 And then we're looking for setup and user. 28 00:01:58,080 --> 00:02:01,410 So those are going to be my actions, game success and error. 29 00:02:01,770 --> 00:02:04,490 Let's save this online. 30 00:02:04,700 --> 00:02:05,090 Hmm. 31 00:02:05,310 --> 00:02:11,009 I think I'm going to start here in the app context again in between the videos, our more registered 32 00:02:11,009 --> 00:02:11,460 user. 33 00:02:12,510 --> 00:02:14,970 When I simply want to do right now, scroll up. 34 00:02:15,900 --> 00:02:23,910 Also, the imports, as I say, not so set up user begin set up user success and set up user error. 35 00:02:24,300 --> 00:02:29,070 Now, once we have imported all of these three men just copy one of them. 36 00:02:29,820 --> 00:02:33,090 Let's say a logging one is a good one to copy. 37 00:02:33,270 --> 00:02:37,430 Let's copy and paste and this will be set up user. 38 00:02:38,170 --> 00:02:42,660 And now let's keep in mind that what is the difference between these two functions? 39 00:02:43,110 --> 00:02:44,730 Well, essentially it is too precious. 40 00:02:45,150 --> 00:02:47,730 First of all, the end point is different. 41 00:02:48,120 --> 00:02:49,290 So one has a logging. 42 00:02:49,710 --> 00:02:53,940 The other one has the register and second in the reducer. 43 00:02:54,270 --> 00:03:00,030 Remember when it comes to your success message in this case would go with logging successful. 44 00:03:00,390 --> 00:03:03,270 And in this case, we go with user created. 45 00:03:03,840 --> 00:03:05,190 So what is the approach? 46 00:03:05,220 --> 00:03:12,720 Well, I can just pass in more parameters, correct more arguments into my function, my setup user. 47 00:03:12,990 --> 00:03:14,340 Now again, this is my preference. 48 00:03:14,340 --> 00:03:21,060 But usually if I have multiple arguments, I rather set it up as an object, so if I don't have to worry 49 00:03:21,060 --> 00:03:23,610 about the order of the parameters. 50 00:03:23,740 --> 00:03:28,590 So in this case, the object and I'll add two more things first, the end point. 51 00:03:28,860 --> 00:03:31,260 So that is going to be either register logging. 52 00:03:31,410 --> 00:03:33,360 So let's sit here and point. 53 00:03:33,760 --> 00:03:37,840 And the third thing that I want to add here is the alert text. 54 00:03:37,860 --> 00:03:39,590 So I'm going to go here with alert text. 55 00:03:39,600 --> 00:03:40,140 And you know what? 56 00:03:40,140 --> 00:03:42,540 Let me set this up as complicated as well. 57 00:03:42,540 --> 00:03:45,930 So we have more consistency. 58 00:03:46,290 --> 00:03:48,030 So let's say this one right now. 59 00:03:48,030 --> 00:03:52,980 So that's my setup user online instead of post log in or register. 60 00:03:53,220 --> 00:03:55,590 We will set up here virtual. 61 00:03:56,220 --> 00:03:58,080 I'm Lance Bass and my end point. 62 00:03:58,560 --> 00:04:05,310 So in one case, it is going to be the register and in the second one, it's going to be a logging correct. 63 00:04:05,730 --> 00:04:11,390 And then when we're dispatching the success, here's what I want to do in the payload. 64 00:04:11,400 --> 00:04:15,120 I want to pass in the alert and then text. 65 00:04:15,270 --> 00:04:17,370 Now I do need to change these ones around, correct? 66 00:04:17,760 --> 00:04:24,210 So everywhere where I have the logging, I'm going to remove and I'm going to say set up user and let's 67 00:04:24,210 --> 00:04:27,850 save this one right now and let's keep on moving. 68 00:04:27,900 --> 00:04:33,700 Why do we have the logging user now also passing set setup years or so? 69 00:04:33,700 --> 00:04:35,750 Let's service one online. 70 00:04:35,760 --> 00:04:38,070 One comes to reduce error. 71 00:04:38,550 --> 00:04:39,180 That's right away. 72 00:04:39,210 --> 00:04:39,720 Set it up. 73 00:04:40,140 --> 00:04:41,640 So I'm going to navigate here. 74 00:04:41,640 --> 00:04:42,300 And you know what? 75 00:04:42,300 --> 00:04:44,390 Before I do that, I just grab them. 76 00:04:44,400 --> 00:04:45,660 So it's a little bit quicker. 77 00:04:46,290 --> 00:04:49,500 So let's go to reducer and online. 78 00:04:49,770 --> 00:04:52,990 Import them here, and let's keep on scrolling. 79 00:04:53,010 --> 00:04:56,490 Again, this is going to be the case where we want to copy and paste. 80 00:04:56,760 --> 00:05:00,640 So we're looking for logging user begin all the way to the era1. 81 00:05:01,410 --> 00:05:07,380 Let's copy and paste them, and we just want to change this around where we're going to go with setup 82 00:05:07,380 --> 00:05:07,770 user. 83 00:05:08,550 --> 00:05:11,760 And again, I know I keep saying this all the time in between. 84 00:05:11,760 --> 00:05:13,410 The videos are among these ones. 85 00:05:13,830 --> 00:05:18,600 I just don't see the point of doing that while I'm recording, so I'm going to go here. 86 00:05:18,600 --> 00:05:19,860 Would set up user. 87 00:05:20,780 --> 00:05:26,960 And the only difference here is going to be the fact that when it comes to alert text, it's going to 88 00:05:26,960 --> 00:05:30,920 be located in action payload and alert text. 89 00:05:31,040 --> 00:05:33,500 Everything else stays exactly the same. 90 00:05:33,860 --> 00:05:35,420 So we're going to go here with action. 91 00:05:36,480 --> 00:05:45,990 Then payload and an alert text and are not, of course, if you want to structure this, so the locations 92 00:05:46,290 --> 00:05:51,590 and user and token from the action payload, you can definitely do so above the return. 93 00:05:52,000 --> 00:05:53,340 My gosh, I'm not going to do that. 94 00:05:53,610 --> 00:05:58,830 So let me just say this, and now we need to navigate to the register. 95 00:05:59,280 --> 00:06:02,790 So we're looking for the registered one and none in here. 96 00:06:02,970 --> 00:06:04,350 We want to grab our page. 97 00:06:04,560 --> 00:06:13,500 So let's import our setup user and then let's keep scrolling and learn where we actually invoke it instead 98 00:06:13,500 --> 00:06:15,810 of a logging user or registered user. 99 00:06:16,170 --> 00:06:21,960 We're going to go with setup user and then remember, I set it up as an object. 100 00:06:22,440 --> 00:06:23,580 So here's what I want to do. 101 00:06:23,880 --> 00:06:28,080 I want to pass in the current user, since Iris is a member one. 102 00:06:28,410 --> 00:06:29,130 Why do I want to? 103 00:06:29,130 --> 00:06:30,360 Do I want to log in? 104 00:06:30,630 --> 00:06:31,020 Correct. 105 00:06:31,290 --> 00:06:35,100 So my end point in this case is going to be a log in one. 106 00:06:35,580 --> 00:06:36,420 I'm going to go with logging. 107 00:06:36,750 --> 00:06:42,450 And thirdly, we need to pass in the alert text, and this is the case where I want to navigate back 108 00:06:42,450 --> 00:06:43,440 to the reducer. 109 00:06:43,980 --> 00:06:45,570 And let's take a look at the logging one. 110 00:06:45,870 --> 00:06:52,290 So that's going to be my text, and I'm just going to set it up here in the quotation marks correct. 111 00:06:52,770 --> 00:06:56,190 And the same thing is going to be with a registered one. 112 00:06:56,370 --> 00:06:59,910 Essentially, I want to remove it and I want to go with my setup user. 113 00:07:00,270 --> 00:07:07,440 So passing the current user and point will be a register register and instead of a long and successful. 114 00:07:08,370 --> 00:07:13,110 Again, just to speed this up a tiny bit, we're going to go with this one instead. 115 00:07:13,780 --> 00:07:16,980 So back in the register, remove this one. 116 00:07:17,610 --> 00:07:25,590 And yet now we have everything in place and just so I can test whether I have some dumb box or not with 117 00:07:25,590 --> 00:07:30,510 me, navigate back through my front end, I have the register with me refresh now. 118 00:07:30,540 --> 00:07:35,970 I did remove right away user or otherwise will navigate to the dashboard and let me register first. 119 00:07:36,210 --> 00:07:41,430 So in this case, I'm going to go with Peter Beer at Gmail dot com. 120 00:07:41,940 --> 00:07:44,790 I'm not a secret and moment of truth. 121 00:07:45,270 --> 00:07:46,700 Whether everything works. 122 00:07:46,710 --> 00:07:49,020 Yep, I created the user. 123 00:07:49,020 --> 00:07:52,920 I'm redirecting grandma some arm in the dashboard so that I work. 124 00:07:53,190 --> 00:07:57,930 So now let me remove it and let me go back to the register. 125 00:07:58,320 --> 00:08:01,380 And now let's just out the functionality for logging. 126 00:08:01,380 --> 00:08:02,640 So not John. 127 00:08:02,640 --> 00:08:08,190 Or I mean, we could go John, but I just stick with beta online or go secret. 128 00:08:08,700 --> 00:08:10,170 And what do you know? 129 00:08:10,470 --> 00:08:20,130 Everything works, so that would be my approach of refactoring register and logging to one function 130 00:08:20,430 --> 00:08:22,020 and only three actions. 131 00:08:22,020 --> 00:08:24,990 But again, let me repeat something very, very important. 132 00:08:25,560 --> 00:08:29,940 This only works since our functionalities are extremely similar. 133 00:08:30,300 --> 00:08:33,690 We're just returning that user, token and location. 134 00:08:33,960 --> 00:08:40,500 Once you start adding more features to us, like I mentioned, for example, email verification, it's 135 00:08:40,500 --> 00:08:41,490 not going to be the case. 136 00:08:41,760 --> 00:08:48,600 And it's actually easier if you have those two set ups in place, one for register and one for logging. 137 00:08:48,810 --> 00:08:55,950 So those are just my two cents and now we can move on and start setting up nested pages in our application.