1 00:00:00,090 --> 00:00:05,460 In this lecture, we will finish the Manage page by allowing users to sort their clips. 2 00:00:05,730 --> 00:00:11,070 We've already taken care of the first step, which is to update the route with a query parameter. 3 00:00:11,550 --> 00:00:14,790 This allows users to configure a default sorting order. 4 00:00:15,090 --> 00:00:18,540 The next step is to apply the sorting order to the list. 5 00:00:19,050 --> 00:00:23,490 I have saved this lecture for last because of the complexity of the solution. 6 00:00:23,850 --> 00:00:29,130 We're going to be introduced to a new type of observable called a behavior subject. 7 00:00:29,460 --> 00:00:35,250 Normally, we can subscribe to observables to wait for values pushed by the observable. 8 00:00:35,580 --> 00:00:40,200 Subscribers don't have the power to force the observable to push a new value. 9 00:00:40,620 --> 00:00:43,140 This is not true for behavior subjects. 10 00:00:43,440 --> 00:00:48,000 A subject can push a value while being subscribed to an observable. 11 00:00:48,330 --> 00:00:52,710 We can create an object that acts like an observable and observer. 12 00:00:53,040 --> 00:00:54,090 Sounds confusing. 13 00:00:54,270 --> 00:00:55,680 Let's look at an example. 14 00:00:55,980 --> 00:00:59,160 Open the managed component class in your editor. 15 00:01:01,670 --> 00:01:08,220 We are going to create an observable around the video sort property whenever this property changes. 16 00:01:08,240 --> 00:01:13,860 We're going to push a new value from our observable before we start pushing values. 17 00:01:13,880 --> 00:01:20,450 Let's define the observable at the top of the file import, a class called behavior subject from the 18 00:01:20,480 --> 00:01:22,130 RSG package. 19 00:01:24,640 --> 00:01:30,040 Unlike other observables, behavior, subjects can't be created with an operator. 20 00:01:30,310 --> 00:01:37,360 We must use the behavior subject class to instantiate in observable after importing this class. 21 00:01:37,540 --> 00:01:44,530 We are going to store it the observable as a property in the class at a property called Saw Dollar Sign. 22 00:01:47,120 --> 00:01:53,930 As a reminder, the dollar sign symbol is appended to variables and properties to identify observables. 23 00:01:54,170 --> 00:01:59,270 It's not required, but it'll help other developers spot an observable in your code. 24 00:01:59,660 --> 00:02:03,920 This property will be annotated with the behavior subject class. 25 00:02:06,460 --> 00:02:12,250 A behavior subject must specify the type of value pushed by the observable with a generic. 26 00:02:12,550 --> 00:02:14,890 We're going to set the generic to string. 27 00:02:17,440 --> 00:02:21,580 This observable will emit values whenever the sorting order changes. 28 00:02:21,880 --> 00:02:26,590 We're tracking the sorting order in a property called video order, which is a string. 29 00:02:26,920 --> 00:02:30,430 Therefore, our observable will be pushing strings. 30 00:02:30,700 --> 00:02:33,520 The next step is to instantiate this class. 31 00:02:33,790 --> 00:02:36,580 We're going to do so from the constructor function. 32 00:02:36,910 --> 00:02:41,710 Set the sort property to a new instance of the behavior subject class. 33 00:02:44,090 --> 00:02:48,650 Next, we need to pass an initial value to push by the observable. 34 00:02:49,040 --> 00:02:51,860 We will pass in the video order property. 35 00:02:54,380 --> 00:03:00,920 Just like any other observable, we can subscribe to our behavior subject for demonstration purposes. 36 00:03:01,010 --> 00:03:03,140 Let's subscribe to this observable. 37 00:03:03,410 --> 00:03:06,830 The subscription will be the console log function. 38 00:03:09,320 --> 00:03:15,830 As mentioned earlier, our observer can act as an observer, both by pushing new values after subscribing 39 00:03:15,830 --> 00:03:20,750 to the observable let's call the next function with a value of test. 40 00:03:23,300 --> 00:03:24,650 What do you think will happen? 41 00:03:24,860 --> 00:03:25,820 Let's find out. 42 00:03:26,090 --> 00:03:30,620 Refresh the Manage page in the browser with the developer tools opened. 43 00:03:33,210 --> 00:03:39,840 Inside the console, the video order property gets logged, new subscriptions will always receive the 44 00:03:39,840 --> 00:03:41,790 latest value from our observable. 45 00:03:42,120 --> 00:03:45,990 After this value is pushed, the test value gets logged. 46 00:03:46,320 --> 00:03:48,810 We didn't push this value from our observable. 47 00:03:49,080 --> 00:03:52,290 Rather, we pushed this value from our observer. 48 00:03:52,830 --> 00:03:55,290 This is the power of behavior subjects. 49 00:03:55,410 --> 00:04:00,510 We can create an object to act as an observer and observable at the same time. 50 00:04:00,900 --> 00:04:02,430 The question is why? 51 00:04:02,760 --> 00:04:07,530 In our case, we need an observable for our service to better understand. 52 00:04:07,650 --> 00:04:09,630 Open the clip service file. 53 00:04:12,200 --> 00:04:18,589 Inside this class, we define a method called get user clips for requesting data from Firebase. 54 00:04:19,220 --> 00:04:24,790 This method should get called when the Manage page is initialized on other occasions. 55 00:04:24,800 --> 00:04:30,200 We should call this method when the user wants to change the order of clips at the moment. 56 00:04:30,440 --> 00:04:34,880 The observable returned by this function won't become aware of new values. 57 00:04:35,180 --> 00:04:41,690 If the order changes, a value should be pushed from the observable, thus causing the entire pipeline 58 00:04:41,690 --> 00:04:43,340 to handle the new value. 59 00:04:43,940 --> 00:04:48,980 We've created an observable in the manage component, which is a behavior subject. 60 00:04:49,310 --> 00:04:55,880 The observable in the clips service should subscribe to this observable whenever new values are pushed. 61 00:04:56,090 --> 00:04:58,610 This observable can process the value. 62 00:04:59,000 --> 00:05:05,030 Since these sort of observable is a behavior subject, we can push new values to our subscribers. 63 00:05:05,330 --> 00:05:12,890 As a result, the get user clips of survival will receive the new value, send in your request and return 64 00:05:12,890 --> 00:05:13,610 the results. 65 00:05:14,210 --> 00:05:16,730 Let's see this implementation in action. 66 00:05:17,030 --> 00:05:21,140 Switch back to the Manage component class before getting started. 67 00:05:21,350 --> 00:05:25,280 Let's remove the subscription and value from the constructor function. 68 00:05:27,830 --> 00:05:30,770 We have this code for demonstration purposes. 69 00:05:31,100 --> 00:05:35,840 Scroll down to the ngon in IT function inside this function. 70 00:05:35,870 --> 00:05:39,350 We subscribed to the get user clips observable. 71 00:05:39,770 --> 00:05:45,680 We're going to pass on these sorts subject onto this observable by passing it in as an argument. 72 00:05:48,210 --> 00:05:53,280 Next, we need to accept this observable switch over to the clip service. 73 00:05:53,700 --> 00:06:00,750 We're going to import the behavior subject class and combine latest operator from the orange juice package. 74 00:06:03,260 --> 00:06:06,560 The class will help us with annotating these sort argument. 75 00:06:06,860 --> 00:06:13,370 As for the combined latest operator, it's going to help us with subscribing to multiple observables. 76 00:06:13,880 --> 00:06:16,160 It'll make sense when we use it in our code. 77 00:06:16,370 --> 00:06:19,340 Scroll down to the Get User Clips function. 78 00:06:19,760 --> 00:06:22,130 We're going to accept these sort arguments. 79 00:06:22,340 --> 00:06:27,110 It'll be annotated with the behavior subject class with a string generic. 80 00:06:29,510 --> 00:06:31,550 Here's where things are going to get tricky. 81 00:06:31,820 --> 00:06:34,400 The goal is to subscribe to this observable. 82 00:06:34,640 --> 00:06:38,180 However, we're already subscribed to the user observable. 83 00:06:38,570 --> 00:06:44,420 One solution would be to add a Switch Map operator to the pipeline to perform a subscription. 84 00:06:44,690 --> 00:06:47,030 Unfortunately, that's not going to cut it. 85 00:06:47,570 --> 00:06:53,450 The sort of observable will not be subscribed to until the user observable pushes a value. 86 00:06:53,750 --> 00:06:57,110 We don't want to wait for the observable to push a value. 87 00:06:57,400 --> 00:07:02,000 Instead, we're looking to subscribe to both observables at the same time. 88 00:07:02,390 --> 00:07:05,960 Luckily, the combined latest operator can help us. 89 00:07:06,170 --> 00:07:08,660 It can combine multiple observables. 90 00:07:08,900 --> 00:07:15,320 Let's wrap the this dot off dot user observable with the combined latest operator. 91 00:07:17,900 --> 00:07:23,390 Observables must be passed in through an array, we're the argument with square brackets. 92 00:07:26,000 --> 00:07:31,400 Lastly, we will pass him the sort observable as the second item in the array. 93 00:07:33,950 --> 00:07:40,280 Whenever either observable pushes the value, the combined latest operator will push the value onto 94 00:07:40,280 --> 00:07:47,630 the pipeline, along with the new value values from the other observables will get pushed to the values 95 00:07:47,630 --> 00:07:50,000 will be the latest value from the other. 96 00:07:50,000 --> 00:07:54,980 Observables, therefore will receive values from each observable. 97 00:07:55,520 --> 00:07:58,610 The Switch Map operator will need to be updated. 98 00:07:58,820 --> 00:08:02,810 The argument for our function will be an array instead of an object. 99 00:08:03,140 --> 00:08:05,720 Let's rename the argument to values. 100 00:08:08,160 --> 00:08:13,590 The values in the array will correspond to the array in the combined latest operator. 101 00:08:13,920 --> 00:08:17,700 The first observable in this array is the user observable. 102 00:08:18,030 --> 00:08:24,240 We can assume the first item in the values array will be the value pushed by the user observable. 103 00:08:24,660 --> 00:08:30,840 The second item will be the value pushed by these sort of observable at the top of the function. 104 00:08:30,870 --> 00:08:35,580 We're going to structure the array to variables called user and sort. 105 00:08:38,140 --> 00:08:41,710 This step is optional, but it's going to keep our code readable. 106 00:08:42,010 --> 00:08:45,880 We're almost finished, the final step is to sort the results. 107 00:08:46,180 --> 00:08:48,280 That's the whole purpose of this lecture. 108 00:08:48,550 --> 00:08:55,390 We can add to our query to refine the results after the Wear function training function called order 109 00:08:55,390 --> 00:08:55,810 by. 110 00:08:58,280 --> 00:09:04,610 The order by function will sort the results by a specific property in our documents during the upload 111 00:09:04,610 --> 00:09:05,360 process. 112 00:09:05,390 --> 00:09:06,890 We store at a time stamp. 113 00:09:07,160 --> 00:09:09,980 We can use this time stamp to sort clips. 114 00:09:10,280 --> 00:09:15,920 The first argument to this function is the name of the property will pass in time stamp. 115 00:09:18,500 --> 00:09:24,740 The following argument is the direction we can sort clips in ascending or descending order. 116 00:09:25,070 --> 00:09:30,740 The sort variable will help us with determining a direction inside the second argument. 117 00:09:30,770 --> 00:09:34,340 Let's check if the sort variable is equal to one. 118 00:09:37,050 --> 00:09:40,530 If it is, we will sort the eclipse in descending order. 119 00:09:40,800 --> 00:09:44,460 Otherwise, the eclipse will be sorted in ascending order. 120 00:09:47,000 --> 00:09:52,310 We're finished with our observables, the next step is to push the order at the moment. 121 00:09:52,490 --> 00:09:56,330 These sort observable will always push these same sorting order. 122 00:09:56,630 --> 00:10:00,230 It should push a new value whenever the user changes the order. 123 00:10:00,530 --> 00:10:07,070 Switch back to the manage component class file above the get user clips of survival. 124 00:10:07,160 --> 00:10:11,840 We are subscribing to the query params observable in this observable. 125 00:10:11,960 --> 00:10:16,610 We are updating the video order property, which contains these sorting direction. 126 00:10:16,910 --> 00:10:22,370 It's the perfect time to push a value after updating the video order property. 127 00:10:22,430 --> 00:10:26,780 Push a new value with the next function on these sort observable. 128 00:10:27,140 --> 00:10:30,440 The value to push will be the video order property. 129 00:10:33,020 --> 00:10:40,070 We've constrained this observable to push string values by default, query parameters are strings. 130 00:10:40,280 --> 00:10:45,830 With that in place, we can test our app, refresh the manage page in the browser. 131 00:10:48,390 --> 00:10:51,180 After refreshing the page, nothing appears. 132 00:10:51,360 --> 00:10:57,810 Our query is broken open the developer tools to find out what's happening inside the console. 133 00:10:57,900 --> 00:11:01,890 Firebase is telling us to create an index for our query. 134 00:11:02,160 --> 00:11:05,190 Let's talk about indexes in the next lecture.