In this lecture, we are going to refactor the service to use our ID system.
The service is no longer managing a single model.
The methods inside the modal class need to be updated to handle multiple models by searching through
the array for an ID.
We will be working inside the mobile service file.
We have two functions in our class called is modal open and toggle modal.
These functions should start using IDs to help them perform their respective actions.
We will start with the is modal open function inside the parameters.
We will have one parameter called ID with the string type.
The function should be given the ID of the modal inside the function, we will return the this model's
find function.
The fine function will loop through each item in the array.
It will perform a test to find an element inside the array.
We can specify the test by passing in a callback function.
We will pass in an arrow function to accept an argument called element.
The element argument refers to each item in the array, we can use this argument to help us perform
our test.
Every object in the model's array will have a property called ID.
We will compare the ID property of the item in the array to the ID argument passed on to the function.
If the find function successfully finds a model, it will return the first object it encounters.
Otherwise, it returns undefined.
After finding an object, we will return the visible property.
After accessing this property, we will get an error from TypeScript.
The error tells us the fine function might return undefined.
We would receive an error if we were to try to access a property on an undefined value.
Therefore, our function could produce an error.
We can fix this issue by creating a conditional statement to check if the object exists.
However, I think we should use a newer feature in JavaScript called optional chaining before we access
the visible property.
We will add a question mark.
The question mark symbol is called optional training.
If the find function does not return an object, the line of code will stop at the question mark.
It will not attempt to access a property called visible.
This line will return undefined.
Our solution works, but it's not complete yet.
Our function should reliably return a Boolean value.
If we were to hover our mouse over the function, TypeScript would assume the function can return a
Boolean or undefined value.
We should restrict the return type to a Boolean type.
Let's annotate the return value of the function to Boolean.
TypeScript will throw an error, it is saying the function could possibly return undefined by annotating
the return type will be forced to update our function to return a Boolean value.
There are two tricks for solving this issue.
Either solution can work.
It's all preference.
The first trick is to add the double negation operator.
As we know, adding a negation operator will convert the type of the value to a Boolean.
On top of converting it to a Boolean, the data will hold its opposite value.
A true value becomes false, a false value becomes true.
By adding the second negation operator, these effects are reversed.
Therefore, a true value remains true.
A false value remains false.
It's a shorthand way of converting a non boolean value into a Boolean.
Some developers don't like the negation operator because it can be confusing.
An alternative solution is to wrap the value with the Boolean function.
Either solution works, use whichever you prefer.
Let's move on to the toggle modal function.
We will be doing something similar to the is open mode or function.
We will add a parameter called ID with the string type.
Next, we need to find the model to toggle.
We will create a variable called model.
Its value will be the same fine function we had in the IS model open function.
We will copy it over to this function.
Next, inside a conditional statement, we will check if a model was found.
If we find a model, we will set the visible property to its opposite value.
Our service has been refactored in the next lecture.
We will update our components to start using them.