1
00:00:00,240 --> 00:00:04,860
In this lecture, we are going to refactor the service to use our ID system.

2
00:00:05,190 --> 00:00:08,070
The service is no longer managing a single model.

3
00:00:08,340 --> 00:00:14,130
The methods inside the modal class need to be updated to handle multiple models by searching through

4
00:00:14,130 --> 00:00:15,240
the array for an ID.

5
00:00:15,930 --> 00:00:18,900
We will be working inside the mobile service file.

6
00:00:21,280 --> 00:00:26,230
We have two functions in our class called is modal open and toggle modal.

7
00:00:26,590 --> 00:00:31,480
These functions should start using IDs to help them perform their respective actions.

8
00:00:31,780 --> 00:00:36,280
We will start with the is modal open function inside the parameters.

9
00:00:36,460 --> 00:00:40,480
We will have one parameter called ID with the string type.

10
00:00:43,130 --> 00:00:50,300
The function should be given the ID of the modal inside the function, we will return the this model's

11
00:00:50,750 --> 00:00:51,770
find function.

12
00:00:54,360 --> 00:00:57,540
The fine function will loop through each item in the array.

13
00:00:57,840 --> 00:01:01,440
It will perform a test to find an element inside the array.

14
00:01:01,710 --> 00:01:05,340
We can specify the test by passing in a callback function.

15
00:01:05,670 --> 00:01:10,020
We will pass in an arrow function to accept an argument called element.

16
00:01:12,560 --> 00:01:18,860
The element argument refers to each item in the array, we can use this argument to help us perform

17
00:01:18,860 --> 00:01:19,580
our test.

18
00:01:19,940 --> 00:01:24,020
Every object in the model's array will have a property called ID.

19
00:01:24,710 --> 00:01:31,520
We will compare the ID property of the item in the array to the ID argument passed on to the function.

20
00:01:34,110 --> 00:01:40,080
If the find function successfully finds a model, it will return the first object it encounters.

21
00:01:40,380 --> 00:01:43,050
Otherwise, it returns undefined.

22
00:01:43,470 --> 00:01:47,400
After finding an object, we will return the visible property.

23
00:01:49,900 --> 00:01:54,070
After accessing this property, we will get an error from TypeScript.

24
00:01:54,370 --> 00:01:58,280
The error tells us the fine function might return undefined.

25
00:01:58,570 --> 00:02:04,090
We would receive an error if we were to try to access a property on an undefined value.

26
00:02:04,420 --> 00:02:07,210
Therefore, our function could produce an error.

27
00:02:07,480 --> 00:02:13,150
We can fix this issue by creating a conditional statement to check if the object exists.

28
00:02:13,690 --> 00:02:20,230
However, I think we should use a newer feature in JavaScript called optional chaining before we access

29
00:02:20,230 --> 00:02:21,550
the visible property.

30
00:02:21,640 --> 00:02:23,530
We will add a question mark.

31
00:02:26,050 --> 00:02:29,080
The question mark symbol is called optional training.

32
00:02:29,380 --> 00:02:34,840
If the find function does not return an object, the line of code will stop at the question mark.

33
00:02:35,140 --> 00:02:38,590
It will not attempt to access a property called visible.

34
00:02:38,920 --> 00:02:41,230
This line will return undefined.

35
00:02:41,590 --> 00:02:44,440
Our solution works, but it's not complete yet.

36
00:02:45,040 --> 00:02:48,610
Our function should reliably return a Boolean value.

37
00:02:48,880 --> 00:02:54,790
If we were to hover our mouse over the function, TypeScript would assume the function can return a

38
00:02:54,790 --> 00:02:57,010
Boolean or undefined value.

39
00:02:57,340 --> 00:03:00,520
We should restrict the return type to a Boolean type.

40
00:03:00,880 --> 00:03:04,600
Let's annotate the return value of the function to Boolean.

41
00:03:07,200 --> 00:03:14,130
TypeScript will throw an error, it is saying the function could possibly return undefined by annotating

42
00:03:14,130 --> 00:03:19,740
the return type will be forced to update our function to return a Boolean value.

43
00:03:20,100 --> 00:03:22,740
There are two tricks for solving this issue.

44
00:03:23,070 --> 00:03:24,570
Either solution can work.

45
00:03:24,660 --> 00:03:25,890
It's all preference.

46
00:03:26,190 --> 00:03:29,910
The first trick is to add the double negation operator.

47
00:03:32,370 --> 00:03:37,890
As we know, adding a negation operator will convert the type of the value to a Boolean.

48
00:03:38,280 --> 00:03:43,170
On top of converting it to a Boolean, the data will hold its opposite value.

49
00:03:43,380 --> 00:03:47,970
A true value becomes false, a false value becomes true.

50
00:03:48,330 --> 00:03:52,350
By adding the second negation operator, these effects are reversed.

51
00:03:52,620 --> 00:03:55,770
Therefore, a true value remains true.

52
00:03:56,070 --> 00:03:58,560
A false value remains false.

53
00:03:59,010 --> 00:04:03,420
It's a shorthand way of converting a non boolean value into a Boolean.

54
00:04:03,750 --> 00:04:08,400
Some developers don't like the negation operator because it can be confusing.

55
00:04:08,700 --> 00:04:12,930
An alternative solution is to wrap the value with the Boolean function.

56
00:04:15,460 --> 00:04:18,640
Either solution works, use whichever you prefer.

57
00:04:18,940 --> 00:04:21,760
Let's move on to the toggle modal function.

58
00:04:22,089 --> 00:04:26,170
We will be doing something similar to the is open mode or function.

59
00:04:26,470 --> 00:04:30,190
We will add a parameter called ID with the string type.

60
00:04:32,660 --> 00:04:35,420
Next, we need to find the model to toggle.

61
00:04:35,630 --> 00:04:38,120
We will create a variable called model.

62
00:04:38,390 --> 00:04:43,640
Its value will be the same fine function we had in the IS model open function.

63
00:04:43,880 --> 00:04:45,980
We will copy it over to this function.

64
00:04:46,430 --> 00:04:51,290
Next, inside a conditional statement, we will check if a model was found.

65
00:04:51,650 --> 00:04:56,780
If we find a model, we will set the visible property to its opposite value.

66
00:04:57,380 --> 00:05:00,870
Our service has been refactored in the next lecture.

67
00:05:00,890 --> 00:05:03,950
We will update our components to start using them.