 I've been reading the comments section of my videos and it seems like a lot of you want to know how you can sort the colors by the sequence they were added and as well as by the timestamp of the data. So the thing is, when I come to my application here and I click new, I say black, 0, 0, 0, you can see that black just appears in the middle, it doesn't have any specific order that it's following, it doesn't appear at the top. So what we're going to do is we're going to sort our data here so that the newest data is on the top and the oldest is at the bottom. Now the thing about Firestore is that Firestore doesn't automatically keep track of your data's timestamp for you so whenever you create or update a document, you have to keep track of the timestamp yourself. So what we can do is we can go to our handle new function here, I'm going to space this out a little and you see now a payload here, instead of just having the name and value of the color, I'm going to add another field here that says timestamp, timestamp and then we're going to get server timestamp. So server timestamp is a function, that's why I'm putting the parentheses there because I'm executing this function and this function is something that you can get from Firebase slash Firestore. So I'm going to import that, server timestamp. So what I can do is I can create black again, actually let's create gray this time. I'm going to look for a gray color right here and let's create gray, let's put this in. You can see that gray appears there and if I look at the ID, the ID is wxme. So this is gray, you can see that we have the timestamp field now. So this is something that the other colors don't have. We have this in gray because gray is the newly created color and I've updated the code so that it stores the timestamp in which this color was created. But right now we're not doing anything with that field, although we are keeping track of the timestamp in which the colors were created, we're not doing anything with that at the moment. So let's go to our code in app.js and in use effect on snapshot. So on snapshot is where we are getting the data, we're fetching the data from the database and what I'm going to change about this is I'm going to change the way we write this code. So we are going to tell Firestore that we want to query the data based on the timestamp. And to do that, we're going to use something called query and query is something that we have learned in the previous video where I went through how you can delete documents based on the document name, the color name. So to do that, I'm going to change the syntax of this a little bit. I'm going to use the standard arrow function. I'm going to paste it on snapshot back in there. Of course, we need to return the unsubscription function here to use effect so that we can unsubscribe to this socket whenever the component amounts. The next thing I'm going to do is write a query so we can specify our order. So const q equals to a query and the query takes in a collection reference in the first argument. So I'm going to put the collection reference there and then I'm going to put the queries variable here q. If you want this to be clearer, you can actually take out the collection reference and put it in its own variable. Collection ref equals to this and then, you know, you can put in your collection ref here. Then of course, I'm going to put in order by order by is another function that you can get from firestore. We're going to order by the timestamp, which is the name of the field, the name of the property and as well as the order. So I'm going to order this in the descending order and it's underlined in red right now because I have to import query and order by from firestore. So import query and import order by. So now let's take a look at what this looks like in our react application. So you can see that the only color I have here is gray and that's because gray is the only color that has the timestamp. So if I look at the other colors here, you can see that there's no timestamp in those colors and because we are getting this query and we're ordering it by the timestamp, if you don't have the timestamp, then firestore just won't return that document to you. So we can create new documents here. So I can create like red and then you can say F00 and you can create green, which is 0F0 and then you can create blue and then 00F. You can see that the newest document is always on top and the oldest document is at the bottom. So our application is partially done here, but the thing is when I edit red and I give it the exact same value, you can see it disappears. So red disappears and doesn't show up. And the reason for that is because when I go and find for red, if I can look for it here, there, red, and you can see that this document here no longer has the server timestamp property here after I've modified it using the edit link here. And the reason for that is because if I look at the code, I go to my details and I go to handle edit and you can see that here I'm using set doc. And what set doc does is that it overrides the existing document with this new document that you're passing in. In this case, it's my object that only has name and value. It doesn't have a server timestamp here. That's why we are overriding the existing document and this new document doesn't have a server timestamp. So what I can do is I can change set doc to update doc. And what update doc does differently is that update doc only changes the specific properties here that you specified and it doesn't override the entire document. So the server timestamp will be left alone. It won't be touched. So let's see if I can edit green here and green and let's say 0F0 and you can see that I hit enter and green stays there. I can recreate red, of course, now I can say F00 and I can try to edit red here. And red stays there. It doesn't get deleted and the server timestamp doesn't change. But the thing you're going to notice is that if I edit green or I edit blue, like if I edit blue right now, blue just stays there. It doesn't change. It doesn't move up to the top of the list. Even though I've just edited this and blue is now the newest edited document. So what I can do is I can add a server timestamp here that says timestamp and server timestamp. This is inside of the handle edit function. So whenever I edit the document, it's going to update the timestamp property as well. So let's try this again. I'm going to edit blue and hopefully blue will show up at the top of the list. So blue, blue, and you can see that now blue is going to be at the top of the list. And if I edit gray, let's look at the gray again. Let's put this here. Gray is now at the top of the list. Now before I end the video, I'm going to show you another thing that you can do. That is you can change the order. So you can change it from descending to ascending. Then now gray should happen to be at the bottom of the list. So you can change the order as well. I'm going to change this back to descending so you can see gray goes back up to the top. Now as usual, the code for this is going to be in our GitHub repository. You can change the branch to our current video, which is part five. And then you can also go to the playlist in which I have all of my React Firebase Firestore videos. And finally, if you have any questions, feel free to leave them in the comments. I'll do my best to help you out and I will see you in the next video.