1 00:00:00,140 --> 00:00:00,560 All right. 2 00:00:00,560 --> 00:00:07,700 And before we start working on a test user, actually notice that I need to refactor the application 3 00:00:07,700 --> 00:00:08,510 a little bit. 4 00:00:08,690 --> 00:00:17,060 So if we take a look at the Add job at a job profile and there's some other pages as well, we keep 5 00:00:17,060 --> 00:00:21,110 using this use navigation and then we check for submitting. 6 00:00:21,350 --> 00:00:23,720 And of course then we have the return. 7 00:00:24,300 --> 00:00:33,060 In the JSX where we have the button and then we disable it and also display the text depending on whether 8 00:00:33,060 --> 00:00:35,460 we're submitting or not. 9 00:00:35,700 --> 00:00:42,750 And essentially everything is awesome, but I can just set it up in a separate component and then each 10 00:00:42,750 --> 00:00:46,770 and every time I need to use it, grab the component instead. 11 00:00:46,770 --> 00:00:52,440 So instead of just repeating the same steps each and every time, now there is one. 12 00:00:52,440 --> 00:00:52,970 Gotcha. 13 00:00:52,980 --> 00:00:57,120 Notice how in some pages we have this extra class of form button. 14 00:00:57,120 --> 00:01:00,870 But then for example, in the login one we don't have that. 15 00:01:00,870 --> 00:01:04,739 So when we set up the component, we'll have to keep that in mind. 16 00:01:04,739 --> 00:01:08,790 And in my case, I'll just add it based on the prop. 17 00:01:08,940 --> 00:01:10,680 So let's start working on that. 18 00:01:10,680 --> 00:01:16,770 I'm going to go with components and in my case I'm going to call this submit BTN. 19 00:01:16,770 --> 00:01:20,670 But of course this is totally optional, so submit BTN. 20 00:01:20,700 --> 00:01:22,020 That's my component. 21 00:01:22,150 --> 00:01:24,430 JSX First stars. 22 00:01:24,430 --> 00:01:30,040 Let me just set up a basic return, so I'm going to go here with some kind of heading one or something 23 00:01:30,070 --> 00:01:31,210 along those lines. 24 00:01:31,210 --> 00:01:36,940 And then again, it doesn't really matter which page you use to grab all of the values. 25 00:01:37,240 --> 00:01:43,720 Just keep in mind that again, you'll have to take care of that form BTN class. 26 00:01:43,720 --> 00:01:48,490 So I guess in my case I'm just going to grab it from Add job. 27 00:01:48,490 --> 00:01:52,870 So for starters, I want to grab this button, so let's cut it out. 28 00:01:53,380 --> 00:01:55,360 Then let's navigate back over here. 29 00:01:55,390 --> 00:01:56,200 Copy and paste. 30 00:01:56,200 --> 00:01:59,100 So from this component, we are returning the button. 31 00:01:59,110 --> 00:02:07,570 And as far as this form BTN class, I'm going to use prop for that, so I'm going to go with form BTN 32 00:02:07,750 --> 00:02:14,320 and if it's present then I want to add the class and therefore we'll have to refactor this one a little 33 00:02:14,320 --> 00:02:14,810 bit. 34 00:02:14,830 --> 00:02:17,050 So for starters, let's cut it out. 35 00:02:17,080 --> 00:02:18,430 Let's set up the curlies. 36 00:02:18,430 --> 00:02:21,790 We're going to go here with the template string. 37 00:02:22,090 --> 00:02:24,370 Let's remove the quotation marks over here. 38 00:02:24,370 --> 00:02:29,380 And then as far as the form BTN, let's set up the condition. 39 00:02:29,380 --> 00:02:31,900 Let's say if the form BTN. 40 00:02:32,550 --> 00:02:36,720 Prop is present, then we want to use the form button. 41 00:02:36,720 --> 00:02:38,190 So let's cut it out. 42 00:02:38,340 --> 00:02:42,360 Let's set up the quotation mark over here and let's paste it. 43 00:02:42,390 --> 00:02:44,940 Now, of course, we also want to set up the logic correct. 44 00:02:44,940 --> 00:02:47,280 So let's go back to add Job. 45 00:02:48,240 --> 00:02:51,570 And we're looking for these two things, so we want to cut them out. 46 00:02:51,780 --> 00:02:55,470 And then again, back in submit button, set it up. 47 00:02:55,470 --> 00:02:59,610 And of course, we need to set up the import for use. 48 00:03:00,460 --> 00:03:04,370 Navigation and that is coming from React Router Dom. 49 00:03:04,440 --> 00:03:07,240 Then we want to go to index and we want to export. 50 00:03:08,020 --> 00:03:10,000 So let's copy and paste. 51 00:03:10,660 --> 00:03:16,840 Let's select the last one and let's just right over here submit BTN. 52 00:03:16,870 --> 00:03:17,980 Let's save it. 53 00:03:17,980 --> 00:03:24,310 And then let's one by one add it to all of the pages where we use the button. 54 00:03:24,310 --> 00:03:31,540 And again, we're looking for register login, add job edit job as well as the profile. 55 00:03:32,200 --> 00:03:40,810 So let me right away guess go to add job and we're not going to use use navigation. 56 00:03:41,700 --> 00:03:50,760 We just want to grab the submit one, submit BTN and then right after the last one we just want to go 57 00:03:50,760 --> 00:03:51,730 with Submit BTN. 58 00:03:51,750 --> 00:03:55,560 Remember, in this case we do need to provide the form BTN prop. 59 00:03:55,560 --> 00:04:02,970 And what's really cool since this prop is essentially the boolean, we don't need to provide the value. 60 00:04:02,970 --> 00:04:07,350 So if it's present then automatically the class gets added. 61 00:04:07,350 --> 00:04:09,900 If not, then we don't add the class. 62 00:04:10,020 --> 00:04:11,810 So let's keep on moving. 63 00:04:11,820 --> 00:04:18,209 Not the admin, not all jobs, not delete job we're looking for edit job and again, step by step. 64 00:04:18,209 --> 00:04:21,600 First we want to remove the use navigation. 65 00:04:21,839 --> 00:04:24,750 Then we want to import the submit button. 66 00:04:26,830 --> 00:04:28,870 Let's keep on moving in here. 67 00:04:28,870 --> 00:04:31,930 We're not going to use these two lines of code. 68 00:04:32,760 --> 00:04:35,640 And then when it comes to button, basically. 69 00:04:36,240 --> 00:04:37,980 We want to go with submit one. 70 00:04:39,640 --> 00:04:42,320 So submit again. 71 00:04:42,400 --> 00:04:45,100 We want to provide the prop in this case. 72 00:04:45,220 --> 00:04:46,360 Let's close it. 73 00:04:46,570 --> 00:04:49,600 Then we have profile one. 74 00:04:50,270 --> 00:04:52,730 So this also has the. 75 00:04:53,140 --> 00:04:53,920 Prop. 76 00:04:54,370 --> 00:04:55,150 You know what? 77 00:04:55,300 --> 00:05:00,970 I think in this case I can just copy again, we want to remove this line of code. 78 00:05:01,060 --> 00:05:02,770 Set it up over here. 79 00:05:03,740 --> 00:05:05,270 Then we want to remove. 80 00:05:06,160 --> 00:05:07,000 These two. 81 00:05:08,210 --> 00:05:15,260 And then we're not going to import use navigation, but we do want to wrap the submit button. 82 00:05:15,350 --> 00:05:18,470 And then we have a login one and register. 83 00:05:18,710 --> 00:05:20,720 So login one over here. 84 00:05:20,720 --> 00:05:23,450 In this case, we don't need to provide. 85 00:05:24,420 --> 00:05:26,580 Of course the form BTN. 86 00:05:26,610 --> 00:05:29,860 Now don't do that for the explore the app. 87 00:05:29,880 --> 00:05:31,970 This is going to be for test user. 88 00:05:31,980 --> 00:05:38,250 So in this case let's go with submit BTN and we simply want to provide the component. 89 00:05:38,430 --> 00:05:43,680 Again, we can remove these lines of code and we don't need the navigation. 90 00:05:43,950 --> 00:05:44,910 Let's save that. 91 00:05:44,910 --> 00:05:48,510 And then lastly, we have the register one. 92 00:05:49,390 --> 00:05:50,350 Same deal. 93 00:05:50,680 --> 00:05:53,080 We're not looking for use navigation. 94 00:05:54,360 --> 00:05:56,130 We want to grab the submit one. 95 00:05:57,160 --> 00:05:58,630 Submit BTN. 96 00:05:58,990 --> 00:06:00,610 And let's keep on moving. 97 00:06:01,350 --> 00:06:03,870 We can nicely remove these two lines of code. 98 00:06:05,220 --> 00:06:12,660 And then as far as the button we're going to go with Submit BTN, let's close it and I'm not going to 99 00:06:12,660 --> 00:06:19,230 test each and every page, but I do want to, for example, go to a login one and if I can successfully 100 00:06:19,230 --> 00:06:25,980 log in as John, then of course we're in good shape and with this in place we can start working on the 101 00:06:25,980 --> 00:06:28,560 test user functionality.