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
08. Switching between notes

Transcript

00:00
We have everything set up so the current note ID inside of our store is always shown in the editor.
00:08
So really, in this list, when we click on an item, if we just take the note within that item and set it to the current note ID, this should really just flip everything around for us and set the note in view here so we can start editing it. So let's try this out.
00:24
Now if we come up to our list item in here, you'll notice that inside of here we have this anchor with an absolute position in set zero. What's actually happening with this anchor within Tailwind is it's taking over the entire section of this.
00:41
So we can pretty much click anywhere inside of here to select this new note. You can see that we've got that focus outline none on there as well. So with this, what we can do is add an event handler to this anchor. So we're going to say click prevent because we don't want the default behavior,
00:59
which is actually to go through to a hash, which has happened already. And we want to do something inside of here. Now we could call a method to switch the current note ID. Or what we could do is access the store directly, access the note store,
01:14
and then go ahead and set the current note ID in here to the note ID that we're currently iterating through. And that is pretty much it. Let's go ahead and try it out.
01:25
So we start with existing note because, as we've seen before, the ordered list means the latest note is at the top. And we have last edited of two here. Now if I click on another existing note, sure enough, that's been switched over.
01:39
Now, even though we don't have a kind of signify that this is the currently selected note, if I go ahead and edit this at all, notice that that bumps to the top because we have touched the timestamp on this note that we have selected. And the ordering here means that when the timestamp is greater, it gets pushed to the
01:58
top. So this existing note here will just say updated. And sure enough, that gets pushed to the top as well. So everything now is nicely but slowly coming together.
02:09
Like I said, if you wanted to, you could implement a method. So let's just go back to that anchor. You could call a method on the store to change the current note. I think for now, since this is pretty simple, we're just going to set the current note
02:23
directly within this click handler here. But that's pretty much it. Now we can just choose any of these notes, edit them, and we know that we're always going to have the latest edited note at the top of our list.

Episode summary

In this episode, we add the ability to switch between notes in our note-taking app. Right now, the current note that's displayed in the editor is tied to the current note ID stored in our central store. Our goal is to let users click on any note from the list and instantly switch to editing that note.

We walk through adding an event handler to the note list items. Thanks to how the HTML structure and Tailwind are set up, you can click pretty much anywhere on the note item, and it will trigger the handler. With one small change, we set the store's current note ID to the ID of the clicked note. This immediately tells the editor to show the right note data.

You’ll see it in action: when we click on another note, the editor updates to show it. And when a note is edited, it moves straight to the top of the list, reflecting the updated timestamp-based ordering. By the end of the episode, clicking around and editing is feeling really smooth, and you can instantly jump between notes – it’s coming together nicely!

As a final note, there’s a quick discussion about whether to call a store method to change the note, or just set the value directly. For this small app, doing it directly is simplest.

Episode discussion

No comments, yet. Be the first!