1 00:00:00,180 --> 00:00:06,330 In this lecture, we are going to refactor our solution into a service, the solution we've written 2 00:00:06,330 --> 00:00:07,620 works fantastic. 3 00:00:07,860 --> 00:00:13,410 However, there are some problems we should address for the best developer experience possible. 4 00:00:13,770 --> 00:00:20,550 It's not necessary to refactor our code, but we should take the time to optimize our code base whenever 5 00:00:20,550 --> 00:00:21,270 possible. 6 00:00:21,660 --> 00:00:24,960 So what's wrong with our implementation at the moment? 7 00:00:25,110 --> 00:00:29,400 Registering a user is an action left to the register component. 8 00:00:29,730 --> 00:00:35,610 If we want to register a user any different component, we will have to rewrite the same logic. 9 00:00:35,940 --> 00:00:42,570 For example, let's say we need to create an admin dashboard and administrative feature is being able 10 00:00:42,570 --> 00:00:43,860 to create users. 11 00:00:44,130 --> 00:00:47,790 Therefore, we will need to write the same code as before. 12 00:00:48,390 --> 00:00:55,130 Instead of rewriting the same logic in multiple components, we should refactor our solution to a service 13 00:00:55,620 --> 00:00:58,020 whenever we need to create a new user. 14 00:00:58,140 --> 00:00:59,940 We can inject this service. 15 00:01:01,500 --> 00:01:05,069 To give you an idea of what this implementation will look like. 16 00:01:05,220 --> 00:01:06,670 Check out this diagram. 17 00:01:06,990 --> 00:01:14,430 We will create an authentication service instead of injecting angular fire services directly to a component. 18 00:01:14,730 --> 00:01:21,030 They will be injected into this service rather than teaching the component how to use these services. 19 00:01:21,180 --> 00:01:23,940 We can centralize the logic into a service. 20 00:01:24,210 --> 00:01:29,280 As a result, our components can inject this service for creating users. 21 00:01:29,880 --> 00:01:35,220 We are adding a layer of abstraction between the component and the library services. 22 00:01:35,550 --> 00:01:41,310 This type of refactoring is common for working with services injected by external packages. 23 00:01:41,670 --> 00:01:47,040 It allows us to extract logic to a service that can be used in various components. 24 00:01:47,370 --> 00:01:52,440 We can tailor the behavior of a service to our needs by creating another service. 25 00:01:54,940 --> 00:01:58,990 To get started, let's generate a service in the command line. 26 00:01:59,110 --> 00:02:00,700 Run the following command. 27 00:02:01,030 --> 00:02:05,350 Njie G Service Services slash off. 28 00:02:07,930 --> 00:02:11,530 The service will be stored inside these services directory. 29 00:02:11,800 --> 00:02:14,440 Let's open the authentication service file. 30 00:02:16,950 --> 00:02:21,240 Inside this service, we will create a method for creating users. 31 00:02:21,540 --> 00:02:24,300 We don't need to rewrite the logic for this method. 32 00:02:24,630 --> 00:02:26,820 Simply moving the code will suffice. 33 00:02:27,090 --> 00:02:31,320 There are very few changes we will need to make inside the class. 34 00:02:31,500 --> 00:02:35,580 Define an asynchronous public method called create user. 35 00:02:38,040 --> 00:02:41,760 Next, open the register component class file. 36 00:02:44,240 --> 00:02:48,800 Inside the register function, we need to consider what needs to be moved. 37 00:02:49,100 --> 00:02:53,150 We don't need to move the modifications we're making to the alert message. 38 00:02:53,480 --> 00:02:56,690 These properties affect the template of our component. 39 00:02:56,990 --> 00:02:58,880 They should remain with the component. 40 00:02:59,360 --> 00:03:02,180 Everything inside the tribe block should be moved. 41 00:03:02,480 --> 00:03:05,450 It's the portion of the function that creates the user. 42 00:03:05,750 --> 00:03:08,300 Cut everything inside the try block. 43 00:03:10,780 --> 00:03:16,540 Next, paste it into the create user function defined in the authentication service. 44 00:03:19,030 --> 00:03:25,570 We will be given a couple of errors by angular these services and form values are inaccessible from 45 00:03:25,570 --> 00:03:26,350 our service. 46 00:03:26,620 --> 00:03:28,510 We're going to need to move them over. 47 00:03:28,780 --> 00:03:34,360 First, we will start with the services back in the register component class file. 48 00:03:34,420 --> 00:03:37,720 We will move the import statements over to the service. 49 00:03:38,050 --> 00:03:41,200 We are going to grab the angular fire services. 50 00:03:45,710 --> 00:03:50,750 Back in the register component, we will grab the properties from the constructor function. 51 00:03:51,080 --> 00:03:54,890 They will be moved over to the constructor, a function of our service. 52 00:03:57,290 --> 00:03:59,270 We're finished moving the services. 53 00:03:59,540 --> 00:04:06,020 The final piece of the puzzle is the form values we must pass on the values from the component over 54 00:04:06,020 --> 00:04:06,920 to the service. 55 00:04:07,250 --> 00:04:10,220 They will be supplied via the functions arguments. 56 00:04:10,460 --> 00:04:13,190 We will add an argument called user data. 57 00:04:15,700 --> 00:04:24,100 Next, we will replace the this register of form and value property with the user data argument inside 58 00:04:24,100 --> 00:04:24,790 our function. 59 00:04:29,580 --> 00:04:36,150 We're almost finished the create user function will need to be updated to use the user data argument. 60 00:04:40,370 --> 00:04:46,880 Previously, we were structuring these values from the form group, we need to go back to the component 61 00:04:46,880 --> 00:04:50,390 to remove the restructuring of the Register Form Group. 62 00:04:53,080 --> 00:04:59,350 The final step is to inject the authentication service into the register component at the top of the 63 00:04:59,350 --> 00:04:59,920 file. 64 00:05:00,010 --> 00:05:02,860 We will import the authentication service. 65 00:05:05,300 --> 00:05:11,720 Moving along, let's inject the service through the constructor function at a private property called 66 00:05:11,720 --> 00:05:15,650 off its type will be the authentication service class. 67 00:05:18,170 --> 00:05:20,480 The clash should be injected by Angular. 68 00:05:20,720 --> 00:05:24,440 We can invoke the create user function to create the user. 69 00:05:24,710 --> 00:05:28,280 The tri block from the register function should be empty. 70 00:05:28,610 --> 00:05:33,530 Let's call the create user function from our service with the await keyword. 71 00:05:36,160 --> 00:05:40,330 The Create user function expects the form data from our form group. 72 00:05:40,600 --> 00:05:44,050 We don't need to pass in the entire group, just the data. 73 00:05:44,350 --> 00:05:49,060 Let's pass in the Biscoff Register Form Dot value property. 74 00:05:50,110 --> 00:05:52,150 The refactoring is almost complete. 75 00:05:52,420 --> 00:05:58,510 Technically, our solution works, but TypeScript will complain about a typing issue in our service 76 00:05:58,810 --> 00:06:02,200 if we hover our mouse over the user data argument. 77 00:06:02,410 --> 00:06:04,450 We will get a description of the error. 78 00:06:04,870 --> 00:06:08,350 Our editor will tell us the type for this argument is any. 79 00:06:08,650 --> 00:06:11,800 We should annotate the argument to get rid of this error. 80 00:06:12,220 --> 00:06:15,040 This error will lead us to an interesting discussion. 81 00:06:15,280 --> 00:06:17,890 Let's have that discussion in the next lecture.