In this lecture, we are going to refactor our solution into a service, the solution we've written
works fantastic.
However, there are some problems we should address for the best developer experience possible.
It's not necessary to refactor our code, but we should take the time to optimize our code base whenever
possible.
So what's wrong with our implementation at the moment?
Registering a user is an action left to the register component.
If we want to register a user any different component, we will have to rewrite the same logic.
For example, let's say we need to create an admin dashboard and administrative feature is being able
to create users.
Therefore, we will need to write the same code as before.
Instead of rewriting the same logic in multiple components, we should refactor our solution to a service
whenever we need to create a new user.
We can inject this service.
To give you an idea of what this implementation will look like.
Check out this diagram.
We will create an authentication service instead of injecting angular fire services directly to a component.
They will be injected into this service rather than teaching the component how to use these services.
We can centralize the logic into a service.
As a result, our components can inject this service for creating users.
We are adding a layer of abstraction between the component and the library services.
This type of refactoring is common for working with services injected by external packages.
It allows us to extract logic to a service that can be used in various components.
We can tailor the behavior of a service to our needs by creating another service.
To get started, let's generate a service in the command line.
Run the following command.
Njie G Service Services slash off.
The service will be stored inside these services directory.
Let's open the authentication service file.
Inside this service, we will create a method for creating users.
We don't need to rewrite the logic for this method.
Simply moving the code will suffice.
There are very few changes we will need to make inside the class.
Define an asynchronous public method called create user.
Next, open the register component class file.
Inside the register function, we need to consider what needs to be moved.
We don't need to move the modifications we're making to the alert message.
These properties affect the template of our component.
They should remain with the component.
Everything inside the tribe block should be moved.
It's the portion of the function that creates the user.
Cut everything inside the try block.
Next, paste it into the create user function defined in the authentication service.
We will be given a couple of errors by angular these services and form values are inaccessible from
our service.
We're going to need to move them over.
First, we will start with the services back in the register component class file.
We will move the import statements over to the service.
We are going to grab the angular fire services.
Back in the register component, we will grab the properties from the constructor function.
They will be moved over to the constructor, a function of our service.
We're finished moving the services.
The final piece of the puzzle is the form values we must pass on the values from the component over
to the service.
They will be supplied via the functions arguments.
We will add an argument called user data.
Next, we will replace the this register of form and value property with the user data argument inside
our function.
We're almost finished the create user function will need to be updated to use the user data argument.
Previously, we were structuring these values from the form group, we need to go back to the component
to remove the restructuring of the Register Form Group.
The final step is to inject the authentication service into the register component at the top of the
file.
We will import the authentication service.
Moving along, let's inject the service through the constructor function at a private property called
off its type will be the authentication service class.
The clash should be injected by Angular.
We can invoke the create user function to create the user.
The tri block from the register function should be empty.
Let's call the create user function from our service with the await keyword.
The Create user function expects the form data from our form group.
We don't need to pass in the entire group, just the data.
Let's pass in the Biscoff Register Form Dot value property.
The refactoring is almost complete.
Technically, our solution works, but TypeScript will complain about a typing issue in our service
if we hover our mouse over the user data argument.
We will get a description of the error.
Our editor will tell us the type for this argument is any.
We should annotate the argument to get rid of this error.
This error will lead us to an interesting discussion.
Let's have that discussion in the next lecture.