Deleting Contacts

[00:00:00]
>> All right, absolutely beautiful. Again, we're not concerned about all the other things that make HTML. So for those that are wondering about accessibility, you can do accessibility. We're just not doing it right now, because that requires like a degree in of itself. People go on conference circuits to talk about it.

[00:00:18]
It's a complicated topic. And I'm just not a good enough HTML engineer to know all the things. All right, so now we have this delicious icon right here. Next, we need to make it do a delete to the icon's id. I mean, we need to make it do a request to contacts id.

[00:00:36]
Obviously you probably go, we don't have ids for contacts. Well, we're gonna have to make one. Okay, we have to make one now, all right? So, let's go hx-delete, this delete attribute call cause an element to issue a delete request okay, fantastic. Let's absolutely do that and let's go to contacts and then we'll do a slash id, yeah.

[00:00:59]
Look at that. Looks good, right? It's looking good. This is feeling good. And then I'm gonna also do a little id up here and call this contact. And then we're gonna to put an id on this one. This is for a future problem that we will see. We'll get there, don't worry about it.

[00:01:16]
So, okay, so we have this nice delete. So now how do we say what to delete? Because if I just issue this request and we successfully delete, what is HTMX gonna remove?
>> Should remove the HTML connected to that contact.
>> It will remove, currently, the savage inside of this div, right?

[00:01:40]
Because it always the default behavior is swap inner HTML. So we need to have a different swap potential strategy. So let's first have hx-swap = outerHTML. So now we will delete this div but we're still only deleting the trash can. So we need to do something a little bit different.

[00:01:59]
Let's also add in hx target =, so normally if you can use something called closest, which is a CSS which does a selector upwards and will check your ancestor. So technically, you could do something like this, except for I am a div myself. Therefore closest we'll also consider yourself as part of the selector thing.

[00:02:19]
That's just welcome to web3 delicious standards here. Very annoying, I wish it just apparent and beyond because that'd be super useful because I could just say, hey, delete my parent div and it would just boom and it would work. So we can't do that, so I'll just go like this.

[00:02:33]
Contact, if you like how does that little shift every time? I don't know what that is, there we go. So fantastic. So now we're saying, hey, who to delete, how to delete it, what endpoint to get go to. I think we're effectively ready. Let's do a little refresh, it says internal error.

[00:02:51]
Why does it say an internal error? Anybody? Anyone wanna make a guess?
>> No ID.
>> No ID, this guy it's like you program go. It's just like, you know, you know it you could feel it. All right, so I'm gonna go up to my little contact form and I'm just gonna go var id = 0.

[00:03:08]
Why not? This is why by the way, if you're wondering why I did a little new contact here It's like I was pre prepared for this is eventuality. We're having right here. So there we go. Okay, and there we go. Everything's been specified. We're looking good, fantastic. I don't think I technically need this one.

[00:03:31]
Yeah, I don't even need it. All right, so there we go. Awesome, so now we have an Id on the contact forms, which means every single time we create a contact, it will come with an Id, which is also why I use these functions right here. So now even our dummy data, we have Ids, we're feeling good, everything's looking good.

[00:03:48]
We go back here, we hit refresh, everything's there. Let's look at the HTML just to validate that we have actually done the thing. Let's bring it down, bring it down, look at that. Look at that, we have contact one reflects on the kids. This thing is saying, hey, target contact one, swap out our HTML.

[00:04:05]
So if I click it, let's bring up the old network and I click that, look at what happened. It said, hey, that's not found. Why not? Well, we did a 404 because there's nothing that we haven't added the handler yet, but it did the right thing. It went to contact slash one and issued a delete request.

[00:04:24]
It's like proper, we're just so proper at this point. So let's do an e.DELETE/contacts/id fantastic. Let's get the idStr equals that I'll do id and err = strconvert. I mean, maybe I could have done something better here, but I didn't do something better here. Throw in one of those, if we hit that, I'm just gonna return a e.string(400), right?

[00:04:52]
Is that, no, it's c, sorry, c.string. So if you're not using our UI and you're somehow by going around this I'm just gonna issue simple responses outright. If you're using our UI you're not gonna be running into these situations. Now you could say yes, you could run into the situation you're running into it because it's been deleted by two windows being open.

[00:05:11]
Okay, I hear you we could plan for that we could send back already deleted doesn't exist and just have the content zip out anyways. Because we know that we've created something, or something's on the screen that's out of sync with the server, which is always the ultimate problem of all things involving the web, just continuously out of sync.

[00:05:30]
So we're gonna go all the way back up to the data. And let's add in one more function, function d Data, let's go index of this and we'll do let's see, what do we wanna do? We wanna do id, right? So there we go. So we're just gonna return out the contact.

[00:05:48]
I mean, we could make it nice like that. And copilot will pretty much do it for us. All right, awesome. And we don't wanna do that, actually. We wanna do an index out, don't we? Let's run return out the index that was found here. -1, I guess we could do the other way.

[00:06:04]
I'm not sure why I did an index 1. Why did I do an index 1? Did I do it? Do I have a good reason for it? I don't think I have a good reason for it. Index 1, it's just in my head, that's what I was doing.

[00:06:14]
So we're gonna keep on doing the thing I already built. And we could actually do, yeah, we could have just used the nil as that. Else, we need to simply delete out this. That's why I did that. That's why I had to delete it out. That's the thing we got to do, I knew it.

[00:06:29]
And so let's just do the little deletion here. All right, fantastic. Let's just make sure this is good. We're gonna have page up to index, and then we're gonna start from index plus 1 and on. Okay, awesome, we've now created this wonderful contacts right here. We've updated our contacts.

[00:06:45]
Now, we need to return something from this deletion, which of course c.nocontent 200. Right, we're just gonna return an empty reply. You got it. So I'm gonna refresh this. And when I hit Delete, it's gone. Look at that. Inline deleting, refresh, nothing is there. Hit the Save on the server, we're back.

[00:07:07]
We just rehydrated the data. Okay, so inline deleting. We can inline delete, okay. This is positive. This is positive motions here. Hopefully everyone's excited about this, fantastic. Look at all this code. We have really coded up a huge amount.