In this lecture, we are going to complete the upload page with one more feature.
It's the final piece of the puzzle.
If you can recall, we added a query parameter to the Manage page.
The purpose of the query parameter is to sort the users clips.
Users can sort them from newest to oldest or oldest to newest sorting clips, which require a value
to sort them by.
In our case, we should sort clips using a timestamp.
Firebase accepts timestamps from our app.
We're not limited to storing strings and numbers.
Let's try adding a timestamp first.
We're going to update the upload component class file.
Creating a timestamp requires the Firebase object.
The Firebase package ships with a function for generating a timestamp compatible with our database.
Unfortunately, the angular fire package does not expose this method.
Therefore, directly importing the Firebase object will do.
Luckily, we've already done that.
We imported the Firebase object for its types.
We can reuse this object for a timestamp.
Scroll down to the upload file function.
In the clip, Object lets out a property called Time Stamp, its value will be the following Fire Firebase
Dot Fire Store Dot Field Value Dot Time Stamp.
We accessing an object called Fire Store.
This object contains methods and properties related to the database service.
Every service offered by Firebase can be found under a specific object.
In our case, we're using fire store.
The field value property is an object with methods for generating valid values for a document.
If we hover our mouse over this property, the description says the following sentinel values that can
be used when writing document fields with set or update.
It doesn't say in the description, but the values generated with this method can be used with the ad
function from this object.
We are calling a method called server timestamp.
Users can be from different time zones for consistency.
We should stick to a single time zone.
The server timestamp function will return a timestamp from the server's time zone.
Next, we should update our model.
Before we do, we should check out the return value of the server timestamp function.
Checking the type will allow us to properly annotate this property in our model.
According to TypeScript, this function returns a field value type.
It gives us the full path to this type in Firebase.
Let's use this type in our model.
Open the clip Model X file.
At the top of the file, we need to import the Firebase class from the Firebase slash compat slash app
package.
Next and the time stamp property to our model, the type will be the following fire base dot fire.
Store dot field value.
We're finished.
Let's give our app a test.
Try uploading a file.
The app should redirect you to the page for the clip.
Let's verify if the timestamp was created.
Open the Firebase console in another tab under the clips section.
Search for the document with a timestamp property.
Perfect Firebase was able to store the timestamp with our document by storing this timestamp will be
able to store videos by their upload date.
With that set, we're finished with the upload page.
It took a very long time to get it up and running.
Well, we can finally move on to other pages of our app before moving on.
I recommend clearing these storage and clips collection after clearing them.
Upload some videos.
I'm going to do this off screen, but you should do the same.
We're going to be starting with a fresh slate of videos.
If you want, you can upload the same video.
Our app should be able to handle duplicate videos.
When you're ready, I'll see you in the next lecture.