In this lecture, we will finish the Manage page by allowing users to sort their clips.
We've already taken care of the first step, which is to update the route with a query parameter.
This allows users to configure a default sorting order.
The next step is to apply the sorting order to the list.
I have saved this lecture for last because of the complexity of the solution.
We're going to be introduced to a new type of observable called a behavior subject.
Normally, we can subscribe to observables to wait for values pushed by the observable.
Subscribers don't have the power to force the observable to push a new value.
This is not true for behavior subjects.
A subject can push a value while being subscribed to an observable.
We can create an object that acts like an observable and observer.
Sounds confusing.
Let's look at an example.
Open the managed component class in your editor.
We are going to create an observable around the video sort property whenever this property changes.
We're going to push a new value from our observable before we start pushing values.
Let's define the observable at the top of the file import, a class called behavior subject from the
RSG package.
Unlike other observables, behavior, subjects can't be created with an operator.
We must use the behavior subject class to instantiate in observable after importing this class.
We are going to store it the observable as a property in the class at a property called Saw Dollar Sign.
As a reminder, the dollar sign symbol is appended to variables and properties to identify observables.
It's not required, but it'll help other developers spot an observable in your code.
This property will be annotated with the behavior subject class.
A behavior subject must specify the type of value pushed by the observable with a generic.
We're going to set the generic to string.
This observable will emit values whenever the sorting order changes.
We're tracking the sorting order in a property called video order, which is a string.
Therefore, our observable will be pushing strings.
The next step is to instantiate this class.
We're going to do so from the constructor function.
Set the sort property to a new instance of the behavior subject class.
Next, we need to pass an initial value to push by the observable.
We will pass in the video order property.
Just like any other observable, we can subscribe to our behavior subject for demonstration purposes.
Let's subscribe to this observable.
The subscription will be the console log function.
As mentioned earlier, our observer can act as an observer, both by pushing new values after subscribing
to the observable let's call the next function with a value of test.
What do you think will happen?
Let's find out.
Refresh the Manage page in the browser with the developer tools opened.
Inside the console, the video order property gets logged, new subscriptions will always receive the
latest value from our observable.
After this value is pushed, the test value gets logged.
We didn't push this value from our observable.
Rather, we pushed this value from our observer.
This is the power of behavior subjects.
We can create an object to act as an observer and observable at the same time.
The question is why?
In our case, we need an observable for our service to better understand.
Open the clip service file.
Inside this class, we define a method called get user clips for requesting data from Firebase.
This method should get called when the Manage page is initialized on other occasions.
We should call this method when the user wants to change the order of clips at the moment.
The observable returned by this function won't become aware of new values.
If the order changes, a value should be pushed from the observable, thus causing the entire pipeline
to handle the new value.
We've created an observable in the manage component, which is a behavior subject.
The observable in the clips service should subscribe to this observable whenever new values are pushed.
This observable can process the value.
Since these sort of observable is a behavior subject, we can push new values to our subscribers.
As a result, the get user clips of survival will receive the new value, send in your request and return
the results.
Let's see this implementation in action.
Switch back to the Manage component class before getting started.
Let's remove the subscription and value from the constructor function.
We have this code for demonstration purposes.
Scroll down to the ngon in IT function inside this function.
We subscribed to the get user clips observable.
We're going to pass on these sorts subject onto this observable by passing it in as an argument.
Next, we need to accept this observable switch over to the clip service.
We're going to import the behavior subject class and combine latest operator from the orange juice package.
The class will help us with annotating these sort argument.
As for the combined latest operator, it's going to help us with subscribing to multiple observables.
It'll make sense when we use it in our code.
Scroll down to the Get User Clips function.
We're going to accept these sort arguments.
It'll be annotated with the behavior subject class with a string generic.
Here's where things are going to get tricky.
The goal is to subscribe to this observable.
However, we're already subscribed to the user observable.
One solution would be to add a Switch Map operator to the pipeline to perform a subscription.
Unfortunately, that's not going to cut it.
The sort of observable will not be subscribed to until the user observable pushes a value.
We don't want to wait for the observable to push a value.
Instead, we're looking to subscribe to both observables at the same time.
Luckily, the combined latest operator can help us.
It can combine multiple observables.
Let's wrap the this dot off dot user observable with the combined latest operator.
Observables must be passed in through an array, we're the argument with square brackets.
Lastly, we will pass him the sort observable as the second item in the array.
Whenever either observable pushes the value, the combined latest operator will push the value onto
the pipeline, along with the new value values from the other observables will get pushed to the values
will be the latest value from the other.
Observables, therefore will receive values from each observable.
The Switch Map operator will need to be updated.
The argument for our function will be an array instead of an object.
Let's rename the argument to values.
The values in the array will correspond to the array in the combined latest operator.
The first observable in this array is the user observable.
We can assume the first item in the values array will be the value pushed by the user observable.
The second item will be the value pushed by these sort of observable at the top of the function.
We're going to structure the array to variables called user and sort.
This step is optional, but it's going to keep our code readable.
We're almost finished, the final step is to sort the results.
That's the whole purpose of this lecture.
We can add to our query to refine the results after the Wear function training function called order
by.
The order by function will sort the results by a specific property in our documents during the upload
process.
We store at a time stamp.
We can use this time stamp to sort clips.
The first argument to this function is the name of the property will pass in time stamp.
The following argument is the direction we can sort clips in ascending or descending order.
The sort variable will help us with determining a direction inside the second argument.
Let's check if the sort variable is equal to one.
If it is, we will sort the eclipse in descending order.
Otherwise, the eclipse will be sorted in ascending order.
We're finished with our observables, the next step is to push the order at the moment.
These sort observable will always push these same sorting order.
It should push a new value whenever the user changes the order.
Switch back to the manage component class file above the get user clips of survival.
We are subscribing to the query params observable in this observable.
We are updating the video order property, which contains these sorting direction.
It's the perfect time to push a value after updating the video order property.
Push a new value with the next function on these sort observable.
The value to push will be the video order property.
We've constrained this observable to push string values by default, query parameters are strings.
With that in place, we can test our app, refresh the manage page in the browser.
After refreshing the page, nothing appears.
Our query is broken open the developer tools to find out what's happening inside the console.
Firebase is telling us to create an index for our query.
Let's talk about indexes in the next lecture.