1
00:00:00,120 --> 00:00:06,090
In this lecture, we're going to learn how to delete a song from the Firebase application on the Manage

2
00:00:06,090 --> 00:00:09,240
page, every clip has a button for deleting a song.

3
00:00:09,480 --> 00:00:13,710
The button, if clicked, should initiate the process of deleting a clip.

4
00:00:14,070 --> 00:00:17,280
We should carefully consider what to remove from Firebase.

5
00:00:17,580 --> 00:00:21,780
There are two locations in Firebase where we will want to remove the clip.

6
00:00:22,200 --> 00:00:26,190
The file is in the storage and the document is in the database.

7
00:00:26,610 --> 00:00:31,980
After we've removed the file from both locations will remove the clip from the page.

8
00:00:32,460 --> 00:00:36,450
This behavior will let the user know the song was successfully elected.

9
00:00:36,780 --> 00:00:39,990
The first step is to listen to the click event on the button.

10
00:00:40,290 --> 00:00:42,270
Open the Manage template file.

11
00:00:44,790 --> 00:00:48,060
We can find the button under a comment that says actions.

12
00:00:48,240 --> 00:00:50,100
There are two anchor elements.

13
00:00:50,340 --> 00:00:56,730
The second link is responsible for deleting a clip on this button vine the click event to a function

14
00:00:56,730 --> 00:00:57,990
called Delete Clip.

15
00:00:58,290 --> 00:01:02,160
This function will accept the clip and event objects.

16
00:01:04,739 --> 00:01:08,880
We're passing on the clip object to help us select the document to delete.

17
00:01:09,240 --> 00:01:11,760
Let's define this function inside our component.

18
00:01:11,970 --> 00:01:14,490
Open the Manage component class file.

19
00:01:16,860 --> 00:01:21,210
Next defined this method with the arguments we passed on to this function.

20
00:01:23,660 --> 00:01:27,320
The clip argument will be annotated with the I clip model.

21
00:01:27,500 --> 00:01:31,700
As for the event argument, it will be annotated with the event type.

22
00:01:35,230 --> 00:01:39,040
Keep in mind, we're listening to this event on an anchor element.

23
00:01:39,250 --> 00:01:42,280
Users may get redirected to a different page.

24
00:01:42,520 --> 00:01:46,850
It could interrupt the current actions of our app inside the function.

25
00:01:46,870 --> 00:01:51,640
We're going to prevent the default behavior by calling the prevent default function.

26
00:01:54,100 --> 00:01:57,130
We're not going to handle deleting the clip from this function.

27
00:01:57,340 --> 00:02:04,000
Instead, we'll outsource the logic into a service specifically, we will call the method for deleting

28
00:02:04,000 --> 00:02:05,920
a clip from our components method.

29
00:02:06,220 --> 00:02:10,210
It should be defined from the clips service from this method.

30
00:02:10,389 --> 00:02:17,230
Run a method called this dot clips service, not delete clip with the same data passed in.

31
00:02:19,780 --> 00:02:22,390
Next, open the clip service file.

32
00:02:24,900 --> 00:02:29,670
Define the delete clip function with the clip object passed in as an argument.

33
00:02:32,140 --> 00:02:36,610
The argument for this object should have the same type as the components methods.

34
00:02:36,850 --> 00:02:41,380
Next, let's proceed to delete the clip for the storage and database.

35
00:02:41,680 --> 00:02:43,480
These actions are asynchronous.

36
00:02:43,720 --> 00:02:47,710
We should add the async keyword to our function definition.

37
00:02:49,980 --> 00:02:56,010
I've made the function asynchronous because we'll be making requests to Firebase, requests are typically

38
00:02:56,010 --> 00:02:58,060
asynchronous in the function.

39
00:02:58,080 --> 00:03:02,040
We can start by deleting either of the clip in the storage or database.

40
00:03:02,340 --> 00:03:03,390
It doesn't really matter.

41
00:03:03,390 --> 00:03:06,030
In this case, we'll start with the storage.

42
00:03:06,510 --> 00:03:11,340
A reference will need to be created if we want to interact with a file in the storage.

43
00:03:11,610 --> 00:03:17,910
The storage service needs to be imported if we're going to create references at the top of the file

44
00:03:18,120 --> 00:03:24,540
import the angular via storage service from the angular slash fire slash storage package.

45
00:03:27,970 --> 00:03:33,310
Inject this service into our class, the name of the alias will be called storage.

46
00:03:35,820 --> 00:03:40,750
Let's begin by deleting the file from the storage in the delete clip function.

47
00:03:40,770 --> 00:03:43,290
We need to create a reference to the file.

48
00:03:43,710 --> 00:03:47,190
A reference is an object that points to a specific file.

49
00:03:47,520 --> 00:03:50,880
It has methods and properties for interacting with the file.

50
00:03:51,210 --> 00:03:54,480
Below, create a variable called clip reference.

51
00:03:54,750 --> 00:03:59,220
Its value will be the following this storage Typekit ref.

52
00:04:01,840 --> 00:04:07,870
The ref function accepts a path to the file, we stored the file in a directory called Clip's.

53
00:04:08,200 --> 00:04:12,400
The file name can be accessed through the clip file name property.

54
00:04:17,540 --> 00:04:23,840
References come with a method called Delete, as its name suggests, this will delete the file from

55
00:04:23,840 --> 00:04:24,560
the storage.

56
00:04:25,340 --> 00:04:29,630
It's an asynchronous task will add the await keyword before it.

57
00:04:32,120 --> 00:04:38,120
This function will delete the MP for file from the storage in the resource section of this lecture,

58
00:04:38,360 --> 00:04:42,050
I provide a link to the Delete Files documentation page.

59
00:04:44,520 --> 00:04:46,770
Deleting a file is pretty straightforward.

60
00:04:47,070 --> 00:04:52,110
Firebase doesn't give many details besides showing you how to perform on deletion.

61
00:04:52,470 --> 00:04:56,520
The delete method returns a promise for handling B response.

62
00:04:57,060 --> 00:04:59,940
There is one thing that isn't properly documented.

63
00:05:00,210 --> 00:05:04,350
The rules need to be adjusted to allow users to delete their files.

64
00:05:04,620 --> 00:05:09,270
The code we have won't work because we haven't written the rules for deleting a file.

65
00:05:09,600 --> 00:05:16,230
In the resource section of this lecture, I provide a link to the Stored Security Rules documentation

66
00:05:16,230 --> 00:05:16,770
page.

67
00:05:19,230 --> 00:05:22,170
There's a section called Granular Operations.

68
00:05:22,470 --> 00:05:26,370
This section will document the rules for performing different actions.

69
00:05:26,670 --> 00:05:28,350
They don't have to be so broad.

70
00:05:28,650 --> 00:05:32,700
For example, you're not stuck to using be read and write rules.

71
00:05:32,880 --> 00:05:37,560
Currently, the rules we have will reject the request to delete the file.

72
00:05:37,890 --> 00:05:43,980
To better understand, let's examine the rules we have in the storage in the Firebase console.

73
00:05:44,070 --> 00:05:46,500
Navigate to the rules for the storage.

74
00:05:48,970 --> 00:05:51,340
The right rule has three conditions.

75
00:05:51,520 --> 00:05:55,330
We're checking for authentication size and mime type.

76
00:05:55,690 --> 00:06:00,070
If none of them pass, the user will be rejected from writing to the storage.

77
00:06:00,430 --> 00:06:03,700
Deletion is considered a part of the writing process.

78
00:06:04,060 --> 00:06:07,600
So any files that get deleted will need to pass these rules.

79
00:06:07,960 --> 00:06:11,950
We'll never be able to delete a file because we're not sending a file.

80
00:06:12,430 --> 00:06:17,080
The request dont resource property we're using in the rules will be empty.

81
00:06:17,410 --> 00:06:21,550
Therefore, the size and content type properties will be blank.

82
00:06:21,880 --> 00:06:26,980
As a result, the request will be rejected because both rules can't pass.

83
00:06:27,280 --> 00:06:32,320
We can resolve this issue by defining the delete rule after the right rule.

84
00:06:32,440 --> 00:06:36,760
We can add the delete rule by typing the following aloud delete.

85
00:06:39,330 --> 00:06:44,820
The condition for this rule will be equivalent to the first condition in the allow right rule.

86
00:06:47,410 --> 00:06:50,440
We're lowering the requirements for deleting a file.

87
00:06:50,620 --> 00:06:54,880
Files can be deleted if the user is authenticated, if they are.

88
00:06:54,940 --> 00:07:00,430
We'll let them delete the file that should take care of deleting the file from the storage.

89
00:07:00,670 --> 00:07:03,370
Publish the changes for a ban to take effect.

90
00:07:03,700 --> 00:07:06,730
The next step is to delete the data from the collection.

91
00:07:07,000 --> 00:07:08,350
Go back to the editor.

92
00:07:10,960 --> 00:07:15,610
In the function, we're going to need to select the document for interacting with it.

93
00:07:15,940 --> 00:07:21,400
We'll use the clip collection object to select the document with the document function.

94
00:07:23,990 --> 00:07:31,070
This function will need the ID of the document, we can access the ID by using the following code clip

95
00:07:31,070 --> 00:07:32,540
Dot Document ID.

96
00:07:35,410 --> 00:07:38,410
This is the same thing we did in the update function.

97
00:07:38,740 --> 00:07:42,100
The main difference will be the action that proceeds this method.

98
00:07:42,400 --> 00:07:45,730
We can delete a document by calling the delete function.

99
00:07:48,370 --> 00:07:54,520
This function will return a promise, but want to add the await keyword before calling the function

100
00:07:54,520 --> 00:07:56,860
to wait for the request to be completed.

101
00:07:59,510 --> 00:08:01,760
There's one last thing we'll do in the function.

102
00:08:02,120 --> 00:08:05,900
The song will appear on the list because it's in the eclipse array.

103
00:08:06,200 --> 00:08:07,730
It will need to be removed.

104
00:08:07,940 --> 00:08:10,100
Switch back to the component class.

105
00:08:10,370 --> 00:08:15,650
We can resolve this issue by looping through the list of clips after the requests have been made.

106
00:08:16,040 --> 00:08:22,880
Comparisons can be performed to check which clip can be removed after calling the Delete Clip Method

107
00:08:23,030 --> 00:08:24,830
loop through the clips array.

108
00:08:27,430 --> 00:08:31,540
In the callback function will accept the element and index.

109
00:08:33,950 --> 00:08:39,559
Next, we will check if the elements, dots, duck ID property is equal to the clip.

110
00:08:39,880 --> 00:08:41,659
Document ID property.

111
00:08:44,230 --> 00:08:49,780
If the condition turns out to be true, we can delete the clip from the list with the following code.

112
00:08:50,200 --> 00:08:54,130
This Scotch clips not splice i one.

113
00:08:56,790 --> 00:08:59,910
These flights function will remove items from an array.

114
00:09:00,270 --> 00:09:02,280
We are using it to remove the clip.

115
00:09:02,490 --> 00:09:03,930
Let's give things a test.

116
00:09:04,200 --> 00:09:06,750
Refresh the managed page in your browser.

117
00:09:09,370 --> 00:09:12,940
Next, click on the delete button for any of the clips.

118
00:09:15,440 --> 00:09:21,980
After a few moments, the clip will disappear from the list in the Chrome developer tools, Firebase

119
00:09:21,980 --> 00:09:24,830
shouldn't have thrown errors during the requests.

120
00:09:25,160 --> 00:09:25,910
This is great.

121
00:09:26,180 --> 00:09:33,050
The requests seem to work fine, especially the request for deleting the file from the storage by updating

122
00:09:33,050 --> 00:09:33,680
the rules.

123
00:09:33,800 --> 00:09:37,490
Firebase allowed the file to be deleted from the storage.

124
00:09:37,970 --> 00:09:40,850
Let's verify things in the Firebase console.

125
00:09:41,150 --> 00:09:42,530
Go to the database.

126
00:09:45,020 --> 00:09:47,690
Next, check the storage for the file.

127
00:09:50,080 --> 00:09:52,240
It has been removed from there, too.

128
00:09:52,630 --> 00:09:53,350
That's great.

129
00:09:53,530 --> 00:09:58,480
We've successfully deleted a clip from the database, storage and page.

130
00:09:58,720 --> 00:10:01,270
We can wrap things up in the next lecture.