In this lecture, we're going to learn how to delete a song from the Firebase application on the Manage
page, every clip has a button for deleting a song.
The button, if clicked, should initiate the process of deleting a clip.
We should carefully consider what to remove from Firebase.
There are two locations in Firebase where we will want to remove the clip.
The file is in the storage and the document is in the database.
After we've removed the file from both locations will remove the clip from the page.
This behavior will let the user know the song was successfully elected.
The first step is to listen to the click event on the button.
Open the Manage template file.
We can find the button under a comment that says actions.
There are two anchor elements.
The second link is responsible for deleting a clip on this button vine the click event to a function
called Delete Clip.
This function will accept the clip and event objects.
We're passing on the clip object to help us select the document to delete.
Let's define this function inside our component.
Open the Manage component class file.
Next defined this method with the arguments we passed on to this function.
The clip argument will be annotated with the I clip model.
As for the event argument, it will be annotated with the event type.
Keep in mind, we're listening to this event on an anchor element.
Users may get redirected to a different page.
It could interrupt the current actions of our app inside the function.
We're going to prevent the default behavior by calling the prevent default function.
We're not going to handle deleting the clip from this function.
Instead, we'll outsource the logic into a service specifically, we will call the method for deleting
a clip from our components method.
It should be defined from the clips service from this method.
Run a method called this dot clips service, not delete clip with the same data passed in.
Next, open the clip service file.
Define the delete clip function with the clip object passed in as an argument.
The argument for this object should have the same type as the components methods.
Next, let's proceed to delete the clip for the storage and database.
These actions are asynchronous.
We should add the async keyword to our function definition.
I've made the function asynchronous because we'll be making requests to Firebase, requests are typically
asynchronous in the function.
We can start by deleting either of the clip in the storage or database.
It doesn't really matter.
In this case, we'll start with the storage.
A reference will need to be created if we want to interact with a file in the storage.
The storage service needs to be imported if we're going to create references at the top of the file
import the angular via storage service from the angular slash fire slash storage package.
Inject this service into our class, the name of the alias will be called storage.
Let's begin by deleting the file from the storage in the delete clip function.
We need to create a reference to the file.
A reference is an object that points to a specific file.
It has methods and properties for interacting with the file.
Below, create a variable called clip reference.
Its value will be the following this storage Typekit ref.
The ref function accepts a path to the file, we stored the file in a directory called Clip's.
The file name can be accessed through the clip file name property.
References come with a method called Delete, as its name suggests, this will delete the file from
the storage.
It's an asynchronous task will add the await keyword before it.
This function will delete the MP for file from the storage in the resource section of this lecture,
I provide a link to the Delete Files documentation page.
Deleting a file is pretty straightforward.
Firebase doesn't give many details besides showing you how to perform on deletion.
The delete method returns a promise for handling B response.
There is one thing that isn't properly documented.
The rules need to be adjusted to allow users to delete their files.
The code we have won't work because we haven't written the rules for deleting a file.
In the resource section of this lecture, I provide a link to the Stored Security Rules documentation
page.
There's a section called Granular Operations.
This section will document the rules for performing different actions.
They don't have to be so broad.
For example, you're not stuck to using be read and write rules.
Currently, the rules we have will reject the request to delete the file.
To better understand, let's examine the rules we have in the storage in the Firebase console.
Navigate to the rules for the storage.
The right rule has three conditions.
We're checking for authentication size and mime type.
If none of them pass, the user will be rejected from writing to the storage.
Deletion is considered a part of the writing process.
So any files that get deleted will need to pass these rules.
We'll never be able to delete a file because we're not sending a file.
The request dont resource property we're using in the rules will be empty.
Therefore, the size and content type properties will be blank.
As a result, the request will be rejected because both rules can't pass.
We can resolve this issue by defining the delete rule after the right rule.
We can add the delete rule by typing the following aloud delete.
The condition for this rule will be equivalent to the first condition in the allow right rule.
We're lowering the requirements for deleting a file.
Files can be deleted if the user is authenticated, if they are.
We'll let them delete the file that should take care of deleting the file from the storage.
Publish the changes for a ban to take effect.
The next step is to delete the data from the collection.
Go back to the editor.
In the function, we're going to need to select the document for interacting with it.
We'll use the clip collection object to select the document with the document function.
This function will need the ID of the document, we can access the ID by using the following code clip
Dot Document ID.
This is the same thing we did in the update function.
The main difference will be the action that proceeds this method.
We can delete a document by calling the delete function.
This function will return a promise, but want to add the await keyword before calling the function
to wait for the request to be completed.
There's one last thing we'll do in the function.
The song will appear on the list because it's in the eclipse array.
It will need to be removed.
Switch back to the component class.
We can resolve this issue by looping through the list of clips after the requests have been made.
Comparisons can be performed to check which clip can be removed after calling the Delete Clip Method
loop through the clips array.
In the callback function will accept the element and index.
Next, we will check if the elements, dots, duck ID property is equal to the clip.
Document ID property.
If the condition turns out to be true, we can delete the clip from the list with the following code.
This Scotch clips not splice i one.
These flights function will remove items from an array.
We are using it to remove the clip.
Let's give things a test.
Refresh the managed page in your browser.
Next, click on the delete button for any of the clips.
After a few moments, the clip will disappear from the list in the Chrome developer tools, Firebase
shouldn't have thrown errors during the requests.
This is great.
The requests seem to work fine, especially the request for deleting the file from the storage by updating
the rules.
Firebase allowed the file to be deleted from the storage.
Let's verify things in the Firebase console.
Go to the database.
Next, check the storage for the file.
It has been removed from there, too.
That's great.
We've successfully deleted a clip from the database, storage and page.
We can wrap things up in the next lecture.