Deleting Data

[00:00:00]
>> Okay, we can see that it's check, but let's make it more obvious that it's checked. So I'm gonna just add a little bit of styling here to make that clear that it's checked. So in our styles, when the text is completed, I will make it a lighter gray color, and I'm also going add text-decoration line-through, just to make it look like a checked-off todo item.

[00:00:31]
So little thing, but it helps with the visuals there. So now we can check and uncheck our items, perfect. The last thing that we need to do is add support for deleting them. So let's save our progress. Push that up, okay? So to handle deletion, what we're going to do is add one last function in here.

[00:01:07]
And this one is going to be called delete todo. And inside of it, we can get our second query helper again. Utils, send query. And then we'll write our DELETE_TODO graph ql mutation. And that's gonna take one variable which is the ID of the todo that we wanna delete.

[00:01:39]
So we will delete todo. And I'm gonna pass in this ID and what'll come back is just the ID that was deleted. So in our handler, exports.handler, I'm going to get an async event, and that will first get the ID out of the event itself. So we'll JSON parse the event body.

[00:02:11]
Then we're going to get data and errors out of the send query. So we'll await that send query and then we'll pass in the Delete todo Query, and the ID variable. Then we can head over to our create to do and copy this out. I'll drop that in.

[00:02:41]
And we want to handle the errors the way that we do, but we want this one to be different, so the deleted todo will be data.delete todo. And again, that's just matching the query name or the mutation name.
>> Just for best practice, it seems like they do the same thing but if errors, and then return that object, would it be better or worst to do an else and then have that return?

[00:03:15]
Or they functionally do the same thing, maybe this is your preference?
>> Yeah, this is just preference, I find that early returns and having fewer like less nesting, it helps me because, the more nested something gets, the harder it is for me to mentally navigate how do we get to this level?

[00:03:34]
How do we get in to this? Also looking at it this way where you got this return statement that doesn't appear to be guarded even though it is. There's a mental model around that. So there's a habit to build. I don't think there's a really strong argument in either direction.

[00:03:55]
I think that this reduces the cognitive load of chasing a logical tree, because that it's been early returned, but then if you don't know how early returns work, then this could be really confusing. So It's kind of in either direction in whatever your preferences, really.
>> Yeah.
>> So next, let's go ahead and start netlify dev one more time.

[00:04:23]
I'm gonna go ahead and get into my, todo come on again. And I'm gonna add a new handler for deleting todo's. So this is going to be called handle delete. And it will just run an axio stop post. And it's going to hit API Delete todo. It'll pass in the ID is there todo_ID.

[00:04:55]
And then when it's done, it's going to call reload todo's. So, now that we've got this pattern established, were we've got the reload to do set up. We've got the handlers are kind of a thing that we're just gonna attach to our components on buttons. This starts to get faster, it starts to get a little quicker to add the different interactions.

[00:05:20]
We're doing less and less boilerplate as more of it gets established. So, to actually add this delete button, let's get down below the text. And we'll do a label. The HTML four is going to be for todo delete, and we'll use that todo ID again. And that is also gonna have a class name of styles.delete.

[00:05:50]
Oops. And it'll just say delete. Actually, this one, I'm gonna give a style label. We want that to be hidden, similar to the mark complete one. The input, though, is gonna be, let's use a button, not an input. And onClick, we will handleDelete, we'll set up a className of styles.delete, so we can style that up a little bit.

[00:06:23]
And then to make sure that this is accessible, I wanna use an emoji, right? So I'm gonna use this red cross. But to make sure that this is intelligible to screen readers. I'm also gonna wrap it in a span. And I'm gonna give it a roll of image.

[00:06:41]
I'm going to give it an aria label of delete, and a title. So if you hover over it, the title will be delete this todo And then I can take this dragon over here. And now we've got these delete buttons. And let's check, if click it, it works, right?

[00:07:04]
So we can make this look a little bit nicer and just add a little bit of styling. All I really wanna do is just hide that button background because it's kind of ugly. So let's go back ground transparent and then turn off the border. And then I'm also going to make it so that when you hover over it, it gives you the pointy thing.

[00:07:33]
Okay, we have a functioning todo app, everyone.