Deleting Items

[00:00:00]
>> Kadi Kraman: So we built the UI to add things, to delete other shopping list items, to delete them, and to mark them as complete. But we haven't actually hooked this up, so let's do that. So firstly, let's hook up our own delete function. So, what are we doing on delete?

[00:00:17]
So, remember, we added this alert here for OnDelete. So if we go to our shopping list item, there we go. So right now, we are doing it just a console log when you delete something. So, let's change this to use an OnDelete prop instead. So, let's do an OnDelete.

[00:00:44]
This will be a mandatory function. And in TypeScript land, this means give me any function, so we don't care what it does, we're just going to call it without any arguments. And the structure it from the properties, and onPress we're going to call and delete, and now we'll need to implement it.

[00:01:09]
So back in our index.tsx, let's create a new constant function called onDelete. So this will be an error function.
>> Kadi Kraman: So, we will delete the item by the item ID.
>> Kadi Kraman: So the ID will be a string. So, how do we get this ID? So, when we pass this onDelete into our shopping list item, let's do onDelete, and this will be a function.

[00:01:49]
>> Kadi Kraman: And it will call handle, did I call this onDelete? Sorry, I meant to call this handleDelete.
>> Kadi Kraman: It doesn't really matter, but I try to call props on something, and then the actual implementation handle something by just the convention. So handleDelete, and we'll have the item ID here.

[00:02:14]
So item.id, so you can actually choose when you pass the item ID in, so I've chosen to parse the item ID into the function before I'm passing it in. So this shopping list item, it doesn't need to care what you're deleting, it's just like, yeah, this was pressed I'm just gonna call the onDelete function.

[00:02:37]
So, I'm choosing to parse the item ID up here, but it might make sense in some cases to do it lower down, so the shopping list item knows what it needs to pass and delete it. Now, it's up to your preference. All right, so here, let's create a new shopping list.

[00:02:58]
>> Kadi Kraman: And this will have to be the existing shopping list, but without the item with this ID. So we will filter, so filter, item, and we will keep everything. So if item.id is not id. So we're saying that, we want everything where the item id is not this one that we want to delete.

[00:03:25]
And now, we set the ShoppingList,
>> Kadi Kraman: With the new ShoppingList, and I think that should be it. So if I delete this, it disappears. So tea,
>> Kadi Kraman: Coffee,
>> Kadi Kraman: Milk, and I can delete any of these items, lovely. And the next thing you wanna hook up is to complete or uncomplete an item.

[00:03:57]
So we want to be able to mark something as complete, and we want to also toggle it as uncomplete.
>> Kadi Kraman: In this case, I think you'll be handy to make the entire ShoppingList item tapable, so you don't need to specifically tap on a particular point. I just realized that, I think on the app that I created, I had a little check mark here for the completion as well, and I've forgotten to add that.

[00:04:29]
Okay, let's do this UI first and then we can quickly add the checkbox that I forgot. Okay, so in the ShoppingList item, we have a containing view, we can change this view into a list pressable, so pressable. So this will be an import from React Native, okay? And then, we'll also have an additional prop here.

[00:05:08]
So let's do onToggleComplete, so onToggleComplete, cuz we want to toggle between completed and not completed.
>> Kadi Kraman: And this will also be a function, and we don't care what it is. And that's the structure of it from the prompts. And on the pressable, we'll do onPress and we'll call this onToggleComplete.

[00:05:41]
>> Kadi Kraman: Lovely.
>> Kadi Kraman: So here in our index file,
>> Kadi Kraman: We will add another property to our shopping list item type. And this will be an optional property for when the item was completed. So let's do completedatTimestamp.
>> Kadi Kraman: And this will be an optional number, I'm making it a number on purpose.

[00:06:16]
And the reason for that will become clear later. But we're gonna make it a timestamp, not a time string.
>> Kadi Kraman: And we'll do a const handleToggleComplete. And this will be an ID of string. So this handleToggleComplete will be called on the shopping list items, so we'll do onToggleComplete.

[00:06:49]
It will be a function handleToggleComplete with the item ID.
>> Kadi Kraman: Lovely.
>> Kadi Kraman: And the implementation there of this, it will depend on whether or not the item is currently completed. So the newShoppingList,
>> Kadi Kraman: We're gonna do map over the existing array, so let's do a shoppingLIST.map.
>> Kadi Kraman: With the item.

[00:07:25]
>> Kadi Kraman: Okay, so if the item.id equals the one that we're toggling, triple equals for a strict comparison. I'm going to do some handling, but the default case, if it doesn't equal, then we're just going to return the item as-is, okay? So how do we handle the new one?

[00:07:50]
So, we'll still return an object with the item, but we'll change this completedAtTimestamp. So the completedAtTimestamp will be if the current completedAtTimestamp, if it had one already, then we're going to set it to undefined, so uncompleted. And then, otherwise, we're going to do date.now, which will give us the current time stamp.

[00:08:25]
>> Kadi Kraman: And we'll set the shoppingList to be the new shoppingList. Lovely, so now, when I selected, it's not working because we also need to pass in the isCompleted drop dynamically. So in our shopping this item, we have this isCompleted property. And now, we know that it is completed if it has a completed at timestamp.

[00:08:56]
So we'll do Boolean if item completedAtTimestamp.
>> Kadi Kraman: So now, if I toggle it, it actually toggles from completed, it's to not completed, so I can have multiple of these.
>> Kadi Kraman: And they will toggle.