MERN Stack Tutorial #12 - Deleting Data

all right my friends so all this is working pretty nicely now and we're keeping our front end data or state in sync with the database using react context so that whenever we add a new workout it updates in real time over here as well as in the database and we don't need to refresh the page anymore to see that new one now what i'd like to do is figure out how we can delete these individual workout items and to do that we'll be placing a little delete button in the top right corner of each one of these workouts and when we click on that we need to send a delete request to the api which in turn is going to communicate with mongodb to delete that document but also what we need to do after that has happened is we need to update our global state our global workout state to delete that item from it as well so we'll be using a dispatch function to do that with a different kind of action so we'll see how to do all of that in this lesson so then the first thing we need to do is create a button inside the workout details components so that when we click on that button it tries to delete that particular workout from the database so what we'll do is create a span at the bottom of this div right here this workout details div and inside that span we will say delete and also i'm going to give this an on click handler which is equal to a function i'm going to call handle click now we need to make that function up here as well so let's do that we'll say const handle click is equal to a function and inside that function we want to basically communicate with our api now what i want to do is make this asynchronous so i'll say async right here so we can use a weight inside of this function and then i'll say const response is equal to a weight then and we want to send effect request now the end point is going to be forward slash api forward slash workouts but then also forward slash the id or whatever document that we want to delete so we have access to that because we have access to the workout as a prop so i can just concatenate to this string workout dot underscore id and that will be the id of that particular workout and that will be appended to the end of this endpoint right here so we're sending a request to that now we need a second argument right here an object to say what type of request it's going to be or the method rather and it's going to be a delete request so then the back end knows to handle this as a delete request and it's going to try and delete that then from the database all right so then i'm going to say const json is equal to await response dot json now remember when we get a response right here we have json data on it and that json data in the case of a delete request is going to be the document that was just deleted so we have that document that was just deleted right here all right so the next thing we want to do is make sure that the response is okay and that nothing was wrong because if it wasn't okay then we don't want to then start deleting things from our global contact state so what i'm going to do is a little of check to say if the response is okay then do something and it's inside here then that we want to dispatch some kind of action so that we can update our workout context state now we don't yet have a case for deleting any items from the workouts so we'll flesh that out in a second but first of all let's import the use workouts context hook inside this file at the top so import use workouts context from hooks use workouts context and then we can use that right here to grab the dispatch function so let's invoke this alright so now down here we can dispatch an action so the type in this case is going to be what should we call it delete workout all right and then also the payload is going to be the workout that we want to delete from the state so that can just be this json we get back because remember that is the document we just deleted from the database so we're dispatching this action right here but now we need to handle that dispatch in this workout context file inside this reducer so let's do another case down here to handle that so we'll say case and then it deletes underscore workout and then when that's the case we need to return a new object whereby the workouts property is something new now what i'm going to do is basically filter through the current workouts on the current state before we make this change so i'll say the new value is the state the previous state dot workouts to get the workouts array and then we're going to filter through the workouts so we fire a function for each workout and we return true if we want that workout to remain in the new array and we return false if we want to take it out of the new array so we fire a function for each one and we return true or false for each one now each time we fire a function we get access to the individual workout in this workouts array so we can use that now to check if the id of that workout is equal to the id of the one that we want to delete so i'll say w dot underscore id is not equal to the action dot payload which is the workout we pass in right here the one that we want to delete dots underscore id so where they're not equal then we want to keep those particular workouts in the array so now we should be left with the workouts minus the one we delete right here okay so whew i think that is pretty much all we need to do let's save this and try it in the browser all right then so let's give this a whirl i've got open the console as well just in case there's any errors and we can see those so i'm going to try deleting this top one so if we delete that then we can see it goes from here that's awesome and if we refresh as well to do a refresh we can see that it's gone as well so it obviously has been deleted from the database too awesome

Channel: Net Ninja

Views: 40,289

Keywords: mern, mern tutorial, mern crash course, mern tutorials, react, mongodb, node.js, express, node.js api, express api, express tutorial, node tutorial, node and react, mern vs mevn, full stack tutorial, full stack, full-stack, fullstack, mern stack, mern stack tutorial, mern stack crash course

Id: TcWmmJUG5K4

Length: 6min 30sec (390 seconds)

Published: Wed Jun 29 2022