1
00:00:00,090 --> 00:00:03,990
In this lecture, we're going to render the list of clips to the user.

2
00:00:04,200 --> 00:00:10,200
First, we need to store the array of documents from our observable as we learned the documents are

3
00:00:10,200 --> 00:00:12,540
stored in a property called docs.

4
00:00:12,870 --> 00:00:16,170
The other properties are not necessary to the subscriber.

5
00:00:16,470 --> 00:00:23,430
We should modify our pipeline to return the Docs property, open the Clips service file in your editor.

6
00:00:25,960 --> 00:00:32,590
At the top of the file, we will import the map operator from the SJS operators package.

7
00:00:34,980 --> 00:00:41,610
Next, scroll to the Get User Clips function at the end of the pipeline at the map operator.

8
00:00:43,930 --> 00:00:49,210
Inside this operator, we will pass in a function with a parameter called snapshot.

9
00:00:51,780 --> 00:00:57,810
The value resolved by our promise will be a snapshot object inside this callback function.

10
00:00:57,990 --> 00:01:01,440
We will return the snapshot doc's property.

11
00:01:03,930 --> 00:01:05,670
TypeScript will throw an error.

12
00:01:05,940 --> 00:01:10,230
It's saying the doc's property may not exist on the snapshot object.

13
00:01:10,530 --> 00:01:12,960
We will assert the type to get rid of the error.

14
00:01:13,230 --> 00:01:16,050
Wrap the snapshot object with parentheses.

15
00:01:16,320 --> 00:01:20,280
The type will be asserted to a class called query snapshot.

16
00:01:22,920 --> 00:01:29,640
This class needs to be imported back at the top of the file import, the query snapshot class from the

17
00:01:29,640 --> 00:01:34,680
angular slash fire slash compat slash firestorm package.

18
00:01:37,150 --> 00:01:44,380
Back in our observable, the air goes away, but another appears the query snapshot class requires a

19
00:01:44,380 --> 00:01:49,480
generic fire wants to know the structure of the document from the collection.

20
00:01:49,840 --> 00:01:53,230
Let's pass in the I clip model as the generic.

21
00:01:55,830 --> 00:02:02,160
Let's test of the observable is pushing the documents, refresh the managed page in the browser with

22
00:02:02,160 --> 00:02:03,900
the developer tools opens.

23
00:02:06,470 --> 00:02:12,530
In the console, the value received from the observable will be an array which we were looking for.

24
00:02:12,830 --> 00:02:17,180
The component doesn't have to worry about the other properties in the snapshots.

25
00:02:17,480 --> 00:02:19,940
It can focus solely on the documents.

26
00:02:20,240 --> 00:02:24,050
Let's switch over to the upload component class in our ED.

27
00:02:27,020 --> 00:02:30,860
We're going to store the documents locally by creating a property.

28
00:02:31,130 --> 00:02:35,090
First, we should import the unclip model for type checking.

29
00:02:37,560 --> 00:02:44,550
Next, inside the class to find a property called Clip's with an initial value of an empty array.

30
00:02:47,130 --> 00:02:52,800
We're going to constrain the types of values that can be inserted into this array by annotating the

31
00:02:52,800 --> 00:02:55,070
property with the equip model.

32
00:02:57,600 --> 00:03:03,990
Be sure to add square brackets after the model name, this syntax indicates the value of the property

33
00:03:03,990 --> 00:03:05,790
will be an array of this type.

34
00:03:06,150 --> 00:03:09,480
We can move on to pushing the documents into the array.

35
00:03:09,840 --> 00:03:14,340
Scroll to the subscription we made in the nji on init function.

36
00:03:16,970 --> 00:03:22,700
Instead of logging the value, we will pass in a function with the ducks object as an argument.

37
00:03:25,130 --> 00:03:28,850
Inside this function, we're going to reset the eclipse array.

38
00:03:31,310 --> 00:03:35,030
The observable will always push a fresh list of documents.

39
00:03:35,240 --> 00:03:39,590
We should reset the eclipse to prevent duplicates from appearing on the page.

40
00:03:39,890 --> 00:03:43,190
Otherwise, we may experience strange behavior.

41
00:03:43,460 --> 00:03:47,960
Next, we're going to loop through the dots array with the for each function.

42
00:03:48,320 --> 00:03:52,100
Individual documents will be referenced as documents.

43
00:03:54,670 --> 00:04:00,490
Individual documents contain properties and methods related to interacting with the document.

44
00:04:00,820 --> 00:04:04,390
We're not interested in interacting with the entire document.

45
00:04:04,720 --> 00:04:08,580
Our sole interest is the data inside this function.

46
00:04:08,620 --> 00:04:15,250
Let's call the this dot clips dot push function to add the data to the array.

47
00:04:15,490 --> 00:04:17,290
We're going to push an object.

48
00:04:19,690 --> 00:04:25,900
Inside this object, we're going to push the docked data function with the spread operator.

49
00:04:28,400 --> 00:04:32,060
The spread operator will merge their properties with the object.

50
00:04:32,330 --> 00:04:33,980
There is one problem with this.

51
00:04:34,250 --> 00:04:36,380
The data function will not return.

52
00:04:36,380 --> 00:04:39,370
The idea of the documents will need the aid.

53
00:04:39,650 --> 00:04:46,700
If we want the user to update the document, create another property called Document ID, set it to

54
00:04:46,700 --> 00:04:48,340
document date ID.

55
00:04:51,250 --> 00:04:57,790
It's important we store the ID because will allow the user to edit the clip in a future lecture, the

56
00:04:57,790 --> 00:05:01,450
ID will assist us with updating the correct document.

57
00:05:01,450 --> 00:05:06,370
When the user submits their changes, TypeScript will throw an error at us.

58
00:05:06,700 --> 00:05:12,400
The object is not compatible with the I clip model because of the Document ID property.

59
00:05:12,790 --> 00:05:16,630
Let's add this property to our model as an optional property.

60
00:05:16,960 --> 00:05:19,300
Open the I clip model file.

61
00:05:21,780 --> 00:05:29,430
Inside the object ad, the document ID property as an optional property, the type for this property

62
00:05:29,430 --> 00:05:30,480
will be string.

63
00:05:33,080 --> 00:05:36,380
We've created a stripped down version of the document.

64
00:05:36,650 --> 00:05:39,530
It's the ID with the contents of the data.

65
00:05:39,890 --> 00:05:43,550
Any other additional properties won't be pushed to the array.

66
00:05:43,880 --> 00:05:46,520
Let's give things a test in the browser.

67
00:05:46,530 --> 00:05:47,870
Refresh the page.

68
00:05:50,370 --> 00:05:53,970
Nothing will change because we aren't presenting the data yet.

69
00:05:54,270 --> 00:05:55,920
We'll get to that in a moment.

70
00:05:56,130 --> 00:06:02,310
First, let's use the developer tools to check the component data under the Components tab.

71
00:06:02,400 --> 00:06:04,320
Search for the manage component.

72
00:06:06,870 --> 00:06:13,920
Listed under the properties category will find the eclipse array filled with the documents from Firebase.

73
00:06:14,250 --> 00:06:20,580
We've successfully retrieved and stored the document data before we move on to the next step.

74
00:06:20,760 --> 00:06:22,950
Let's test it filtering works.

75
00:06:23,340 --> 00:06:27,570
We can test the filtering by modifying one of the clips in the database.

76
00:06:27,810 --> 00:06:32,820
You don't have to do this, but I want to show you that we're receiving filtered results.

77
00:06:33,210 --> 00:06:36,540
Switch to the Firebase console in the database.

78
00:06:36,680 --> 00:06:42,630
Our view one of the cliff documents, I'm going to slightly modify the UID property.

79
00:06:45,120 --> 00:06:48,360
After making that change, I'll refresh the page.

80
00:06:50,780 --> 00:06:57,440
The requests will still work this time if I were to view the list of documents, the document that was

81
00:06:57,440 --> 00:06:59,750
modified wouldn't appear in the list.

82
00:07:00,110 --> 00:07:05,300
This is because the User ID doesn't match the IDs stored in the application.

83
00:07:05,690 --> 00:07:08,450
This test proves that the filtering worked.

84
00:07:08,780 --> 00:07:12,350
I'm going to undo the change I made to the database.

85
00:07:14,730 --> 00:07:19,440
In the following lecture, we're going to begin rendering the list of clips.