React, Redux & Firebase App Tutorial #39 - Ordering Firestore Data

Key Takeaways

or rather than gangs so we've come a long way and we've done a lot but before we finish up I want to show you one more thing and that is how to order data that we receive back from firestore because at the minute you'll notice over here that these are not in time order this is two minutes ago this is an hour ago then this is 26 minutes ago so if this was in time order then this should be above here right and that's going to cause some problems because we've only limited this to three notifications that show so if they're not in time order it could be a random three that we received back and we want the most recent three and the same goes for these over here so if I created and you project right now and let's just do test and test then create okay this goes to the top but we'll do another and just do anything inside here create that and you notice this is not on the top it's at the bottom now so it seems random where these are placed so we need a way to make this in time order so the most recent ones come to the top as well and we can do that relatively easy so let's go to our dashboard component because this is where we actually retrieve the data and we do that inside these objects this is where we can set additional options on how we retrieve the data we've already done it right here with this option we're limiting this to three documents now that if we want to order by something then we literally just say order by so for the notifications I want to order by the property called time so if we look at a notification we can see it has a property called time I want to order by that property so I can say right here order by and then this is going to be an array and then inside we're going to say we want to order by the time property then comma and we want it in descending order so the most recent first then the oldest and we're going to do exactly the same for this thing up here the project's so we'll paste that in here only this time the property is not called time it's called created apps and we can see that if we click on a document we can see created up so let's switch that for created out over here created that and then that should do the trick my friends so if we refresh over here now we should see the most recent at the top and we see the most recent at the top over here as well and the oldest at the bottom so let's just try this out with a new project let's say collect all the stars and then whatever down here in the content create that and now we can see that at the top as well and also we see the new notification at the top we get the most recent three here so there are gamma friends that is how we order our documents that we received from fire store so now we've done that I think that's pretty much all there is to this application we've covered all authentication all data to do with our projects users and notifications we've also done cloud functions to get these notifications so the last thing to do is to deploy this application to firebase and I'll show you how to do that in the very next tutorial