1
00:00:00,210 --> 00:00:05,010
In this lecture, we are going to complete the upload page with one more feature.

2
00:00:05,310 --> 00:00:07,210
It's the final piece of the puzzle.

3
00:00:07,530 --> 00:00:12,000
If you can recall, we added a query parameter to the Manage page.

4
00:00:12,270 --> 00:00:16,140
The purpose of the query parameter is to sort the users clips.

5
00:00:16,500 --> 00:00:23,220
Users can sort them from newest to oldest or oldest to newest sorting clips, which require a value

6
00:00:23,220 --> 00:00:24,270
to sort them by.

7
00:00:24,540 --> 00:00:27,990
In our case, we should sort clips using a timestamp.

8
00:00:28,620 --> 00:00:31,530
Firebase accepts timestamps from our app.

9
00:00:31,830 --> 00:00:34,770
We're not limited to storing strings and numbers.

10
00:00:35,010 --> 00:00:37,800
Let's try adding a timestamp first.

11
00:00:37,950 --> 00:00:41,430
We're going to update the upload component class file.

12
00:00:41,820 --> 00:00:45,300
Creating a timestamp requires the Firebase object.

13
00:00:45,630 --> 00:00:52,140
The Firebase package ships with a function for generating a timestamp compatible with our database.

14
00:00:52,620 --> 00:00:57,390
Unfortunately, the angular fire package does not expose this method.

15
00:00:57,720 --> 00:01:01,950
Therefore, directly importing the Firebase object will do.

16
00:01:02,280 --> 00:01:04,319
Luckily, we've already done that.

17
00:01:04,500 --> 00:01:07,920
We imported the Firebase object for its types.

18
00:01:08,250 --> 00:01:11,010
We can reuse this object for a timestamp.

19
00:01:11,280 --> 00:01:14,010
Scroll down to the upload file function.

20
00:01:16,620 --> 00:01:23,910
In the clip, Object lets out a property called Time Stamp, its value will be the following Fire Firebase

21
00:01:23,910 --> 00:01:28,710
Dot Fire Store Dot Field Value Dot Time Stamp.

22
00:01:31,300 --> 00:01:34,270
We accessing an object called Fire Store.

23
00:01:34,600 --> 00:01:39,040
This object contains methods and properties related to the database service.

24
00:01:39,430 --> 00:01:44,170
Every service offered by Firebase can be found under a specific object.

25
00:01:44,500 --> 00:01:47,020
In our case, we're using fire store.

26
00:01:47,410 --> 00:01:53,620
The field value property is an object with methods for generating valid values for a document.

27
00:01:53,890 --> 00:02:00,520
If we hover our mouse over this property, the description says the following sentinel values that can

28
00:02:00,520 --> 00:02:04,390
be used when writing document fields with set or update.

29
00:02:04,840 --> 00:02:11,020
It doesn't say in the description, but the values generated with this method can be used with the ad

30
00:02:11,020 --> 00:02:13,160
function from this object.

31
00:02:13,180 --> 00:02:16,600
We are calling a method called server timestamp.

32
00:02:16,930 --> 00:02:21,010
Users can be from different time zones for consistency.

33
00:02:21,130 --> 00:02:23,560
We should stick to a single time zone.

34
00:02:23,920 --> 00:02:29,290
The server timestamp function will return a timestamp from the server's time zone.

35
00:02:29,840 --> 00:02:31,960
Next, we should update our model.

36
00:02:32,200 --> 00:02:37,600
Before we do, we should check out the return value of the server timestamp function.

37
00:02:37,990 --> 00:02:42,970
Checking the type will allow us to properly annotate this property in our model.

38
00:02:43,300 --> 00:02:48,130
According to TypeScript, this function returns a field value type.

39
00:02:48,520 --> 00:02:52,060
It gives us the full path to this type in Firebase.

40
00:02:52,360 --> 00:02:54,370
Let's use this type in our model.

41
00:02:54,640 --> 00:02:58,120
Open the clip Model X file.

42
00:03:00,660 --> 00:03:08,940
At the top of the file, we need to import the Firebase class from the Firebase slash compat slash app

43
00:03:08,940 --> 00:03:09,660
package.

44
00:03:12,050 --> 00:03:19,580
Next and the time stamp property to our model, the type will be the following fire base dot fire.

45
00:03:19,610 --> 00:03:21,860
Store dot field value.

46
00:03:24,320 --> 00:03:25,100
We're finished.

47
00:03:25,250 --> 00:03:26,830
Let's give our app a test.

48
00:03:27,030 --> 00:03:28,640
Try uploading a file.

49
00:03:34,560 --> 00:03:37,650
The app should redirect you to the page for the clip.

50
00:03:37,950 --> 00:03:40,890
Let's verify if the timestamp was created.

51
00:03:41,220 --> 00:03:46,320
Open the Firebase console in another tab under the clips section.

52
00:03:46,440 --> 00:03:49,680
Search for the document with a timestamp property.

53
00:03:52,170 --> 00:03:59,250
Perfect Firebase was able to store the timestamp with our document by storing this timestamp will be

54
00:03:59,250 --> 00:04:01,920
able to store videos by their upload date.

55
00:04:02,220 --> 00:04:05,700
With that set, we're finished with the upload page.

56
00:04:05,970 --> 00:04:08,610
It took a very long time to get it up and running.

57
00:04:08,850 --> 00:04:14,160
Well, we can finally move on to other pages of our app before moving on.

58
00:04:14,370 --> 00:04:19,149
I recommend clearing these storage and clips collection after clearing them.

59
00:04:19,230 --> 00:04:20,579
Upload some videos.

60
00:04:20,790 --> 00:04:23,940
I'm going to do this off screen, but you should do the same.

61
00:04:24,360 --> 00:04:27,570
We're going to be starting with a fresh slate of videos.

62
00:04:27,840 --> 00:04:30,420
If you want, you can upload the same video.

63
00:04:30,750 --> 00:04:33,960
Our app should be able to handle duplicate videos.

64
00:04:34,200 --> 00:04:37,290
When you're ready, I'll see you in the next lecture.