React devs might find this archived course helpful to reference, but this course has been updated! We now recommend you take the Firebase Fundamentals course.
Transcript from the "Removing a Post" Lesson
[00:00:00]
>> Steve Kinney: So now that we figured out how to add a post, we're going to need to figure out how to remove a post. Otherwise this database is just going to grow and grow and grow. So, we're going to do the traditional React way. Right now, we are still doing the very first React application, right.
[00:00:18] Put everything in the application state. Pass all the props down and find the thing, and then pass everything back up. And if you've ever developed like a large enough React application you know that that gets very tedious very quickly, and also does have some performance issues which is, that re-renders every component on the way down.
[00:00:37] So changing stuff, so on and so forth. Right? So we'll figure out better ways to do that, but first let's indulge in the pain a little bit. And, let's pass our way down to that delete button on the post. So, go back over here. Here's the delete button.
[00:00:54] Spoiler alert: we've got the application component. Then we've got the posts plural component, then we've got the individual post component, and that's where the button lives. So in order to change it in the application state, we're gonna have to pass all that stuff all the way down. We will eventually refactor that out, but not yet.
[00:01:13] [LAUGH] So let's go ahead and let's get into it. So, let's give ourselves a handleRemove function in application.
>> Steve Kinney: And now we'll just take the, we really just need the ID of it. In order to get some stuff done here. And let's start out with just removing it from state first.
[00:01:48] So we'll say const allPosts = this.state.posts. And because it's an array we just basically need to get it out of the array. The easiest way to do that is to filter through the array, and only keep the things that are not the one with that ID.
>> Steve Kinney: So we'll take each post and you're allowed to stay if your Post ID it does not equal the ID we're looking for.
[00:02:27] So everyone else gets to stay but the ID in question and it is removed from the array. And then we'll do this.setState.
>> Steve Kinney: posts. Now that's not gonna remove it from. Firestore, but it is going to go ahead and remove it from state. So let's get that wired up and then we'll put in the ability to remove it from Firestore.
[00:02:55] So we have that. The next thing we need to do is we need to pass that to the post component. So we'll do a onRemove, this.handleRemove and then that inside the post component, that's now a prop. We'll see how when we get to wiring up subscriptions and getting real time updates, we can remove some of this code.
[00:03:29]
>> Steve Kinney: Right, because Firebase does in the way that it works, gives us a little bit of a different way to think about how we manage state in the application. And eventually we're gonna actually move to just using some very modern react state techniques, and wire them up with Firebase as well, which I'm kinda excited about.
[00:03:45] So I'm going to go into the individual post. We've passed down that on remove.
>> Steve Kinney: And so we'll find that delete button. And we'll say, hey, when someone clicks it,
>> Steve Kinney: Call that method. Pass it the ID of the one in question.
>> Steve Kinney: Cool, and it deletes each one, we refresh, they're all still there because we're not actually deleting them from Firestore just yet.
[00:04:22] So we need to handle that as well and that's actually fairly easy to do, right, with another method. And so what we'll see is we can go back over into the application.
>> Steve Kinney: And we'll say, await
>> Steve Kinney: firestore.document, or .doc in this case. Now, before I was using the .collection.doc.
[00:04:51] This one, I'm just gonna use the shorthand, mostly to demonstrate it, and we'll say, go ahead and find me the document with that ID, and we'll call delete on it. Right, and that will remove it from the database.
>> Steve Kinney: So we remove it from the database and then we're gonna go ahead and also remove it from the application state.
[00:05:12] And this will work, I think one of them has a slight bug when I have the Date.Now() in their. We'll find out together.
>> Steve Kinney: Think two out of three of them will go away, yeah. The other one has its own ID field, so if I get rid of that.
[00:05:33]
>> Steve Kinney: We can delete that one as well.
>> Steve Kinney: Now you can see that they're all deleted. Awesome.