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

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

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.

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

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,

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

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.

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.

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

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.

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

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

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.

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.

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.

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

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.

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

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.