 Hello everyone in today's video, we'll be taking a look at how we can delete records from Firestore. So we have the added links and the new buttons working from the previous video. So in today's video, let's take a look at how we can delete them. And also another thing I want to show is how you can query documents inside of Firestore. So that's one of the most requested features in the comment section of my videos. I've seen that a lot of people want to know how you can query documents. So today we'll take a look at how we can just simply delete records and how we can query the records by name so that we can delete the documents just by the name without knowing their ID. Let's get into the code right now. So I'm going to collapse use effect. And this is a continuation from the previous video. So in the previous video, I took out all of the handle new and handle edit functions and put it in its own file called utils.js. So the first thing I'm going to do here is create that delete button. I'm going to change this edit link into a button so that we can standardize it a little bit better. And I'm going to get rid of this href. And let's see how that looks. Okay. So I noticed that that's still a little bit too small. So I'm going to go to my CSS here. I'm going to change. I'm going to make a second button class. Let's clone that. And let's call this button to one size. Let's make it a little bit smaller at 30 pixels. And we're also going to make a margin. Let's put zero pixels vertically and 10 pixels horizontally. And let's see if that looks better. I'm going to change this class name to actually I should be changing this class name equals to button two. And that looks much better. So here's the new button, which is what you can see from up there. And then we have an unordered list that has list items. And the amount of list items depend on how many objects are in the colors array because I'm using dot map. So I'm going to create another button here for the delete function. And then we can we'll change that handle edit later. Let's just see how this looks for now. That looks okay. Let's change this to handle delete. And for now, we're just going to pass in the ID because for now we're deleting the documents by the ID. We'll do the delete by name later on. So I'm going to have to import this handle delete. And then of course, I'm going to write that here because we only have handle new and handle edit for now. And in here, I'm going to write x for const handle delete. It's going to be an asynchronous function as usual. And then what I'm going to do is we're going to import the lead doc here from firestore. And then all you have to do here is delete doc. And here we're going to pass in the doc reference, which I'm going to create on a separate line. So const doc ref equals to a doc. As usual, I'm just going to copy this from handle edit. Because it's just the same to document reference using that ID. So now this should work just fine. I'm going to come here. I see more colors here, right? I'm going to just delete that and it works perfect. I'm going to refresh this just to make sure it's permanently gone. And then I'm just going to do it one more time. I'm going to delete black so you can see that it actually works. I'm going to create that back like zero zero zero. So we have our black back. So now let's do querying. We want to be able to delete the documents. Let's say I'm going to delete green. And I just want to specify that I want to delete all colors with the name of green. And if we had multiple colors with the name of green, I want to just type delete green and these two records should go because their names are green. And I'm going to create another green here with some different colors. So this green is now cyan. So I want to be able to just delete all three of these green colors all at the same time, just by their names. So let me create the button first to do that. So I'm going to change this to query delete. Then let's see. So query delete, that's how it looks like. I'm going to change the styles. So that looks better. I'm going to change the margin here, zero pixels and 10 pixels. So now that's better. So when I click on query delete, ideally I want to be able to specify a name of the color. And I want to query all the documents with the same name. And then I want to delete those documents. So let's go and create export const endo query delete. Also in the synchronous function, it's going to be an arrow function. And then I'm going to import that here. Endo query delete. And then let's do endo query delete. There we go. Now I'm going to come back here. So first of all, we want to get the color name from the user. So I'm going to get that JavaScript prompt. And let's see what this does. I'm going to hit query delete. It's going to ask me for a color name to delete. I'm going to say green. And it doesn't do anything now. So let's go and fix that. I'm going to show you all a new concept called queries. So I'm going to do constant Q equals a query. And this query is something that we have to import from Firebase as well. I'm going to import query here. So the query syntax is first I'm going to have the collection reference here. And then I'm going to have the actual query statements here. So I'm first going to make that collection reference. And I can just copy that, I think, from up here. That's right. I can just copy this, paste it down here because we're just getting the collection called colors. And then let's put the actual query statement here. So I want to be able to query all documents where their name is equal to this name that the user gave. So I'm going to put where here, where. And then the name of the field, which is name. And then the operators, which is equal equal the name. So name is a variable, which is what we're getting from the user. And this is underlined in red right now because I have to import that as well from fire stores. So if the import query, as well as rare. So collection reference is in which collection do we want to perform this query? And then rare is where the name of the field, which is coincidentally name. And then this is the operator. You can be equal, equal, or not equal, or there's actually a whole bunch of operators that you can see from the documentation here. So query operators, you can do less than, less than, or equal to, equal to greater than, and a whole bunch here. So for this example, I'm just going to use equal, equal name. I can actually change this to a different variable name, user input name, so that there's no confusion there. So now we have the query variable stored in queue. And then we have to do something with this variable. I remember in the first video in this playlist, I showed you how to get data from the database using on Snapshot. So on Snapshot is how you subscribe to a real-time listener so you can get real-time updates from the Firestore database. You'll get the updates in real-time in your React application. But this here is not what we want. So in our specific task here, we just want to fetch the data once. We don't want to subscribe to any listeners. So I'm going to introduce you a new concept. Previously, we learned add doc, set doc, as well as delete doc. Now we're going to learn get docs. So get docs is how we can get all of the documents that match our query criteria here. I'm going to do const snapshot equals to get docs. And then this has to be await because this is an API call. And then we're going to put in just the query there. And in fact, I can just console.log the snapshot here so you can see what it looks like. Let's go back to the browser, let's refresh this. I'm going to query a delete for green. And then you can see in my console, I have an object here. So this object is the snapshot that was returned to us. But this is not really useful because we want to get the data from this. We're going to get the document IDs. So what we can do is access all of the documents that are contained in this snapshot. So the snapshot provides us a whole bunch of useless details here for our purposes. But it provides us with an array of documents. And to access that array of documents that were returned in the snapshot, we just need to do const results equals to snapshot.docs. Let's do this. And that's console.log results and see what we get here. I'm going to query, I'm actually going to refresh this. And I'm going to query for green. Hopefully we get an array in our console, which is what we're getting. So these are the array of objects. There are three objects here, which is because I have three green documents and that matches up with the console. And in these objects, we should have a prototype of data. So this data method here is what we're going to be using to get the data from the actual document itself. We don't want the objects. We want the actual data. So I'm going to do snapshot.docs.map and then get each individual document. And then I want to return. I'm going to use doc.data as well as the doc.id. The id is just a property, so it's not a method. I don't have to execute that. I have to put a name though of id. So if you remember from our previous videos, it's kind of like what we're doing here, but we're no longer using on snapshot. We're still mapping it, but we're not using on snapshot. So now we are mapping this inside of get.docs, which just gets the data once from the database. Now let me console on results again to see what we get. I'm going to do green and we get an array. And this time we actually have useful objects here. We have the id, name, and we have the value. So this is much more useful than the objects you have seen previously. So now that I have the IDs, all of the documents that match the name of green, I can delete, I can go through each of these objects and just delete the documents that has these IDs. So let us go and do just that. I'm going to do results.forEach. I'm no longer using map here. I'm using for each because I don't want to change the results array. I just want to perform a delete operation on each of the objects in the results array. So result, I actually want this to be asynchronous because this is going to be an API call. You'll see what I mean later. So this async result equals to a function here, which I'm going to say await delete doc result.id. Actually, I can't just do this because I need to put in the doc ref here. And that's why I'm going to create the doc ref like this, equal to doc, and then the id. So let's run this. I'm going to say green. And what should happen when I hit okay is all of the documents that have the name of green should disappear. So I'm going to hit okay. And I get an error here. So I think what I'm doing wrong here is I'm specifying the document reference wrong. So if I look at my previous examples, this is what I did. So I did doc ref equals to, you have to put in a database handle as well as the collection name. So finally, we put in the id, which is result.id. So remember, this is how you do the document reference. So when I save this and refresh this, technically, it should work now. I'm going to do query delete one last time. I'm going to say green. When I hit okay, all of the documents that have the name of green should disappear. There we go. It actually works. I'm actually going to try another. I'm going to try orange. Well, let's do orange and let's do like fff. So we have two oranges here. We have one orange here. We have two oranges here. When I query delete or orange, all of the orange documents should be gone. So there we go. It works. I'm going to do purple because it's just so much fun to delete colors under the pink. And I'm soon going to delete all of the colors here. I hope this helped. And as usual, the video is going to be added to the playlist here where you can find all of the Firebase videos as well as the GitHub repository, which is going to host all of the code for this series. You can change the branches to the specific video that you want to see the code for. And for the next few videos, I'm going to be doing sub collections, react hooks and authentication and things like that. So see you in the next video.