1
00:00:00,150 --> 00:00:05,760
In this lecture, we're going to quickly refactor the solution we've written in their previous lecture

2
00:00:06,030 --> 00:00:07,320
to understand why.

3
00:00:07,350 --> 00:00:10,710
Let's look at the navigation component class file.

4
00:00:13,260 --> 00:00:16,590
Inside this class, we have a method called log out.

5
00:00:16,830 --> 00:00:22,770
We didn't outsource the job of logging out the user to a service because it was one line of code.

6
00:00:23,070 --> 00:00:25,140
However, that's no longer true.

7
00:00:25,500 --> 00:00:30,240
We are performing additional logic whenever the user logs out of the application.

8
00:00:30,510 --> 00:00:34,980
We should refactor our code to outsource this logic into a service.

9
00:00:35,490 --> 00:00:38,700
It's common to refactor a code as you're building an app.

10
00:00:39,000 --> 00:00:41,220
Let's quickly refactor this function.

11
00:00:41,400 --> 00:00:44,630
We will add this function to the authentication service.

12
00:00:44,880 --> 00:00:47,430
Cut this function from the component class.

13
00:00:49,780 --> 00:00:52,990
Next, open the authentication service file.

14
00:00:55,350 --> 00:00:59,430
Inside this class, we all add the method with the public keyword.

15
00:01:01,840 --> 00:01:05,140
We want this method to be accessible outside of the service.

16
00:01:05,410 --> 00:01:08,170
Moving the function will produce a couple of heirs.

17
00:01:08,440 --> 00:01:11,770
They're mostly related to the service used by this method.

18
00:01:12,160 --> 00:01:18,250
Our services need to be moved from our component to the authentication service back in the component

19
00:01:18,250 --> 00:01:18,760
class.

20
00:01:18,940 --> 00:01:21,430
We will grab the router import statement.

21
00:01:23,900 --> 00:01:30,470
We don't need to import the angular fire off service because it's already injected into the authentication

22
00:01:30,470 --> 00:01:31,070
service.

23
00:01:31,370 --> 00:01:34,940
Therefore, we can safely remove this important statement.

24
00:01:37,440 --> 00:01:42,720
Next, let's move the router import statement over to the authentication service.

25
00:01:45,190 --> 00:01:51,340
After word, we will move the router instance from the components constructor function to the services

26
00:01:51,340 --> 00:01:56,410
constructor function, the angular fire authentication instance can be removed.

27
00:01:58,930 --> 00:02:01,790
There's one more error in the log function.

28
00:02:01,810 --> 00:02:07,300
We need to update the name of the angular fire authentication service to authentication.

29
00:02:07,600 --> 00:02:10,479
It's the same service, but with different names.

30
00:02:13,000 --> 00:02:16,480
There's one more modification we will make to the logout function.

31
00:02:16,780 --> 00:02:20,920
The log malfunction is expecting an event object as an argument.

32
00:02:21,400 --> 00:02:25,000
In some cases, we may not be able to supply this object.

33
00:02:25,180 --> 00:02:27,250
We should make this argument optional.

34
00:02:29,870 --> 00:02:33,320
Next, we need to check if this argument is being supplied.

35
00:02:33,620 --> 00:02:39,710
We will wrap the prevent default function with a conditional statement that checks if the event object

36
00:02:39,710 --> 00:02:40,730
is not empty.

37
00:02:42,510 --> 00:02:43,770
Our service is ready.

38
00:02:44,010 --> 00:02:49,980
The last thing we need to do is update, the navigation component to use this service is log out method.

39
00:02:50,280 --> 00:02:52,590
Open the navigation template file.

40
00:02:55,140 --> 00:02:57,390
Search for the logout link in the template.

41
00:02:57,600 --> 00:03:00,720
We will update the function to off dock logout.

42
00:03:03,210 --> 00:03:06,330
Let's give our app a quick test in the browser.

43
00:03:06,360 --> 00:03:09,660
Try logging out on a page other than the homepage.

44
00:03:12,120 --> 00:03:14,210
We are redirected to the homepage.

45
00:03:14,460 --> 00:03:16,980
We have the same functionality as before.

46
00:03:17,370 --> 00:03:23,610
The only difference is that we've outsourced the logic into a service for convenience and reusability.

47
00:03:23,940 --> 00:03:27,380
We will continue learning about the router in the next lecture.