In this lecture, we're going to shift our attention to the Manage page.
It's a page dedicated to managing a user's uploads.
In this section of the app, users will be able to view, edit or delete their clips.
This UI will need to become functional.
The first step is to grab the user's uploads.
It's going to be a huge undertaking.
There's a lot of information to process before we write a single line of code.
We should consider how we're going to approach this.
We know that we're going to need the list of clips the user has uploaded.
A request to the database will be necessary.
We also know that we're going to have to loop through the data once we've obtained it.
From there, we can make the buttons interactive.
All right.
Now do we have a general outline of things?
Let's get started.
The first step is to retrieve the data from Firebase.
We want to retrieve the list of clips the user has uploaded so far.
This request will be written from the eclipse service.
Open this file in your editor.
Let's think about what we're going to need for the request.
The goal is to grab documents from the eclipse collection.
The documents should be associated with the user.
We shouldn't give them documents from other users during the upload process.
We took the time to store the user's ID with each document.
If we want to filter the documents by the user's ID, we're going to need it for the request.
The idea of the user can be retrieved through the authentication service at the top of the file import
the angular fire off service from the angular slash fire slash compat slash off package.
Next, let's inject this service into our class through the constructor function.
The name of the alias will be called authentication.
After injecting this service, we can begin defining a method for querying the database in the class
to a public method called get user clips.
From this method, we're going to return an observable.
Normally we would return the data from the request.
However, we need to consider these sorting feature in our app.
If the user changes the sorting order, the request will need to be performed again.
Therefore, we should create an observable for pushing new data whenever these sorting changes in this
method.
We're going to return the this dot authentication report user observable.
Strangely, we're going to start our observable by subscribing to the user observable, as we discussed
earlier, we need the ID of the user.
We can't grab it unless we subscribe to this observable.
Once we have the ID, we'll switch the observable.
Let's shame the pipe function.
Next, we're going to import some operators back at the top of the file import the Switch map operator
from the orange juice lash operators package.
There are other operators we're going to need.
In addition, import the of operator from the Rex J.S. package.
Let's head back to our function and talk about why we need these operators as they arise in our function.
First, we're going to use the Switch Map operator to subscribe to another observable passive into the
pipe function.
Next pass in a callback function with the user object as an argument.
The user object will be pushed by the user observable.
It'll contain the information related to the user.
We're already familiar with this object.
We worked with it when we created the authentication service on this object.
The ID of the user can be accessed before we access the ID.
We should check if it's empty.
It's possible the user observable may push a no value in the callback function.
Let's create a conditional statement to check if the user object is empty.
If it is, we'll return in observable with the of operator.
Remember, the Switch Map operator requires an observable to be returned by the function the of operator
will create an observable that pushes the value past into which in this example, we will push an empty
array.
The observable will ultimately push a.
If the user object is not empty, we can begin initiating a query.
A query is a word to describe the process of requesting data from a database.
We can initiate a query by selecting a collection.
Luckily, we already selected a collection.
We can reuse this selection to start a query below the conditional statement.
Create a variable called query with the value of this doc clip's collection.
Dot Ref.
The ref object stores, a reference to the collection we've talked about references before, they are
objects with methods for communicating with the database.
We can create and search through documents in a collection on this object.
We're going to chain a function called where?
At the moment, the entire collection will be returned to the user.
We don't want to grab every document in the collection.
The Wear function helps us with filtering through the documents at the end of the day.
Documents are objects.
We can create a condition to check if a property matches a value.
We can pass in three arguments for creating the condition.
We're going to create a condition for checking if the user ID in the document matches the ID of the
user logged in.
The first argument is the name of the property.
It should check in the document pass in UID.
This property stores the ID of the user.
The next argument is the comparison operator pass equals equals.
Lastly, we need to pass in the value to compare to pass him, the user dot uid property.
This function will generate a query instructing Firebase to search through the documents in the eclipse
collection, check if the UID property is equal to the ID of the user currently logged in.
If there's a match, it'll return the document.
The last thing we'll need to do is initiate the query.
The wear function doesn't begin searching through the collection.
It merely creates the query for searching through the documents.
We can initiate the query by calling the get function.
We're going to return the value returned by the query dot get function.
The value returned by the get function is a promise.
It's perfectly fine to return a promise.
We're finished with querying the database.
We have the song data returned by the database.
The next step is to subscribe to the results.
Open the upload component class file at the top of the file.
Import the clip service.
Next in this service into the component, the name of the alias will be called clip service.
We will subscribe to are observable from the kng on in it function called the this duct clip service
dot.
Get user clips function to grab the observable.
For our subscription, we will pass in the console log function.
Let's test our observable try, refreshing the managed page in the browser with the developer tools
opened.
In the console and object, we'll get logged the most important property is the docks property.
It'll store the documents retrieved by our query.
If you look inside this object, the length of the array should match the number of clips the user has
uploaded in the next lecture.
We're going to store this data.