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
07. Ordering by last edited

Episodes

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

Transcript

00:00
So now we're going to take a look at ordering the notes that we have in the left-hand side based
00:04
on the last updated date. At the moment, we have these fake notes, which don't have a last edited time. Let's just set these to 1 and 2, just
00:13
to keep things really, really simple for now. If we come over and give this a refresh, we're just going to end up with some weird times in here. But don't worry too much about that now.
00:20
OK, so to implement this, we're going to use a getter to order these, much like we did with current in terms of extracting the data out that we need. So let's create a getter out here called ordered
00:33
by last edited. And of course, you can call that whatever you want if it makes more sense. So to order something within an array in JavaScript,
00:42
we just want to go ahead and grab the array, use the sort method on this. And inside of the callback, we get A and B, which we can use to compare the two
00:52
and put these in the order that we want. So we're going to say B last edited minus A last edited. It's going to order these with the greatest value at the top, e.g. the last edited timestamp being the highest at the top.
01:07
So now with this ordered by last edited getter, what we can do is come up to where we're iterating through our notes. And we can access that instead of directly accessing our data ordered by last edited.
01:19
If we come over and give this a refresh, we've got another existing note now at the top, which means if we go all the way down here, that this one is the latest edited
01:30
because the timestamp, which of course at the moment is just 2, is higher. If we switch these back over, you can see, sure enough, this works nicely.
01:40
So there is a problem. If we just go back to this and have 2 at the top of our list, our existing note down here is still in view. It should be this one because this one's
01:53
the last edited note. And we've already discussed that we want the last edited note to be in the editor view. Now the reason that this is happening
02:02
is because down here, when we are setting the current note by index, we're accessing the data directly. We're not looking at the ordered list. We're just looking at the standard list that we have.
02:15
So pretty much what we want to do is go ahead and change this to ordered by last edited index ID. Let's go over, give this a refresh, and there we go.
02:24
The one at the top is now the one that is in the editor view. Let's just switch this up again in our fake data that we've got just to prove that this is working. And you can see that this one should now be at the top.
02:37
Give that a refresh, and there we go. So this is coming together really nicely. We have an ordered list of notes by the last edited time. And of course, that last edited note
02:46
is being put into the right hand editor view. Now to really pull this together, we want to be able to click on a note and pull that into the editor view so we can edit it.
02:56
And what we should see happen is if I was to click on this and have this come into editor view and then edit it, that should bump to the top of the list automatically because we're using state
03:07
management in Alpine. So now we've figured that out. Let's move over and look at how we click on these notes to pull them into the editor view.

Episode summary

In this episode, we focus on making the list of notes more user-friendly by ordering them based on their last edited timestamp. First, we notice that our fake notes don't have real last edited times yet, so we use some placeholder values just for demonstration.

We walk through adding a getter (or computed property) that returns a sorted array of the notes, with the most recently edited note at the top. This involves a quick refresher on how to use JavaScript's sort method with a custom comparison function. We then hook this up so our UI shows the notes in the correct order automatically.

We also address a subtle bug: even after reordering the notes, the editor may not be showing the most recently edited note. This happens because we're still using the old, unsorted list when deciding what to show. After updating the code to use the ordered list everywhere, the bug is fixed—the editor always shows the top (most recently edited) note.

To wrap up, we preview the next step: allowing users to click on any note to bring it into the editor, and ensuring that when a note is edited, it's bumped to the top of the list. That way, our app behaves just like a polished notes app should.

Episode discussion

No comments, yet. Be the first!