Build a Notes App with Alpine.js
This episode is for members only

Sign up to access "Build a Notes App with Alpine.js" right now.

Get started
Already a member? Sign in to continue
Playing
11. Deleting notes

Episodes

0%
Your progress
  • Total: 55m
  • Played: 0m
  • Remaining: 55m
Join or sign in to track your progress

Transcript

00:00
The last thing that we want to focus on, aside from any bugs that we might need to clean up, is deleting a note. Of course, we want to be able to select a note and potentially
00:09
delete it with a confirmation. Now, this is actually the most complicated part about what we're doing. It seems very easy. If we want to delete a note, surely we just go through the array of notes that we have and we filter out the one that we don't want to see anymore. Well, that is the case, but we're going to end up with a few weird edge cases,
00:28
where if we delete a note that we're currently viewing, what happens to the current note ID? Well, that's not going to exist and we're probably going to see errors over in our console. So, let's just kind of naively go ahead and implement this and then see what we need to do. So, let's come up to where we have the delete note button in here and let's start to attach
00:47
an event handler to this to call a method. So, let's go ahead and say x on click and let's do something in here. Now, we could extract this entire thing out to a method. What I'm going to do though in the nature of Alpine is create an if statement in here with a window confirmation and then only go ahead and invoke a method on our store if the user says that they actually want to
01:11
delete the note. So, we're just going to say delete in here and the condition inside of the if statement is going to be just a standard window confirm. You can make that as fancy as you want and I'm just going to say are you sure. So, only if we confirm this will we console log out delete at this point. So, we've got our current note here, click delete, are you sure, cancel,
01:31
we don't do anything, press okay and we delete it. So, now we can actually call in here in place of console log a method on our store. So, let's say store dot notes and delete note like so. Now, in this case we technically don't need to pass an id into this because we are only ever allowing a note to be deleted that is in current view. That's just the way that this works in terms
01:59
of the UI. I am going to accept an id into this because you might want to have a delete button on each of these notes in which case you're going to need to pass an id in. So, how do we get the current note id? Well, that's pretty straightforward, store notes current note id. If you were implementing this same thing on each iteration of these notes, you would just pass the current note id in. We
02:22
might look at that later. Okay, so let's go down to our store and let's create out a delete note method. So, delete note and let's go ahead and take the id of the note in that we want to delete. We'll just console log this out just to make sure we've got the right one and let's head over and try this out. Let's press okay and there we go, there's the id of the current note that we're
02:44
viewing. Great. Okay, so let's again go ahead and naively implement deleting this note. So, what do we want to do? Well, we want to access our data. We don't need to access our ordered data because it doesn't matter. We just have the deletion of a note so we can just access data on its own. We want to reset this data to a filtered version of the data and that filter is effectively going
03:07
to remove the note where the id matches. So, again we're just going to say n id and we want to say doesn't equal the id that we're passing in. So, by filtering what we're doing is we're keeping all of them where the id doesn't match the one that we're passing in. This is a very similar callback to what we did here in terms of finding. This time we're just filtering out
03:34
keeping the ones that we want to keep. So, if we come over here now we've got two notes and we can click of course on either of them. We can delete either of these. Let's go ahead and delete the first one and we'll see the first problem that we'll come across. So, I'm going to hit delete note on here, press okay and we start to get exactly the same error that we saw before when
03:55
we didn't have a current note in view and you can see that this is kind of still persisting in here. The reason that this is happening is because we're deleting the first note which is the current one in the editor view but we're not switching this to another note. So, this is trying to be read in here and it's not quite working. Now, what we also want to do of course when we delete a note is also
04:16
persist the notes as that's really important but more importantly we want to set the current note by its index and that's just going to be the first one in the list. So, we're just going to have zero. So, we'll just choose the next one down. So, let's go over and just try this again now that we've added them two things in there. So, of course that didn't persist before. So, now when I delete this
04:36
note it's going to go ahead and persist this but it's going to set the current note by the index which is this one just here. Well, it'll be the first one in the list. So, let's hit delete note, okay and there we go. We switch down to the next one or the first one at the top of the list. So, that is pretty much deleting our notes and fixing up them a couple of little issues. There
05:00
is one more thing though. What happens if we delete the last note in the list? Let's try it out. Hit delete note, press okay and of course what's happened is we end up with zero notes in the list. Now, of course when I refresh the page that's going to create for us a new note. That's what we should be doing when we delete the last note in the stack. We should always have
05:25
one untitled note so it's available in our editor view and we can start writing. So, really what we want to do is up here create a fresh note before we delete the one that we want to but that's only on the condition if there is one note left. So, if there's one note left e.g. if this data length is one then we want to create a new note before we delete the old one. So,
05:54
let's try this out. Let's go ahead and say abcdef. I'm going to go ahead and delete this note and there we go. A new note gets created in its place which we can start writing in. So, now we can create as many notes as we want but we can also go through and delete all of these. So, maybe I just created a few too many there but you can see we can delete all of these right the way
06:16
down to the last note which effectively just replaces it with an empty note. So, now we have some pretty powerful functionality. We can create lots of notes in here and we can delete whichever one we want and that just replaces it with the one that we have next in a stack and of course we can't delete the last note because it replaces it with a fresh one.

Episode summary

In this episode, we're focusing on adding the ability to delete notes from our notes app. Even though deleting might sound straightforward, we run into a few interesting edge cases! We first hook up our delete button to ask for confirmation before deleting. Then, we connect it to a method that removes the note from our data array.

Along the way, we notice some bugs—like what happens if the note we're viewing is the one we delete? It turns out, we need to handle resetting the current note selection so the app doesn't break. We also make sure to persist notes after deletion and select the next note in the stack.

Lastly, we handle the scenario where the user tries to delete the very last note: instead of leaving them with no notes, we automatically create a new blank note for them. By the end of the video, you'll have a smoothly working delete feature that 'just works,' even in those pesky edge cases!

Episode discussion

No comments, yet. Be the first!