In this lecture, we are going to redirect the user after they've uploaded a file at the moment, they'll
be stuck on the upload page.
I think users will want to share their clips with their friends after uploading them.
We should make it easy for them to do so.
Redirecting them to their clip will be helpful.
Let's quickly review how the clip route works in the address bar type clip, followed by a random value.
Angular allows us to insert any value in the path we have configured the route to accept a parameter
in the path.
The route parameter is the most important piece of information from this page.
It'll determine which clip to render.
In that case, we should use a value that will be unique to each clip.
Luckily, we have such a value.
Every document in Firebase stores a unique ID.
We can use this ID as the value in the root parameter.
We're going to update the upload component to redirect the user to this page and have all the values
we've created in this component.
We're going to use the ID from the document to generate the URL.
For example, let's say Firebase generates an ID called ABC.
The path to the clip should be clip.
ABC.
Let's give it a try.
Switch over to your editor.
We're going to start by working inside the clip service file.
In our service, we have a method called Create Clip.
This method is responsible for inserting a document into the clips collections.
Let's hover our mouse over the ad function.
The return value of this function will be a promise.
The promise resolves to a document reference since we've passed on a generic to the collection.
The document will be formatted similarly to the I clip model instead of returning nothing.
Let's return this promise.
We should annotate the return value.
Let's copy and paste this return value as the return value for the create clip method.
An error will appear because we haven't imported the document reference type at the top of the file.
Add on to the import statement from the angular slash fire slash compat slash firestorm package to include
the document reference type.
Let's go back to our method.
Instead of using the async await keywords, we can remove them completely in their place.
We can return the promise.
We're returning the promise because it'll resolve to a document.
This document will contain the ID, which the upload component will need to redirect the user.
The promise will be handled by the upload component.
Switch over to this component.
Scroll down to the subscription on these snapshot changes observable.
We're going to need to modify a few lines of code in the next function.
Firstly, we will be handling a promise we should add the async keyword to the next function.
Secondly, we should add the await keyword to the create clip function.
In addition, the value resolved by the promise should be stored in a variable.
We're going to need it for redirection.
The name of the variable will be called clip document reference.
Next, we're going to need to inject the router at the top of the file at an import statement for the
router service from the angular slash router package.
Afterward, scroll down to the constructor function.
Inject the router service with the alias of router.
Let's go back to our next function.
At the end of the function, we're going to create a timeout with a duration of 1000 milliseconds.
We're not going to redirect the user until a second has passed.
We want to give them an opportunity to view the success message after a second has passed.
We will call this Dot router dot navigate function with an array passed in.
We are going to begin constructing the URL as a reminder, the navigate function will assume the pap
is absolute.
This default behavior works in our favor.
We're not interested in redirecting the user with a relative path in this array.
Let's pass and clip.
Next, we need to add the ID, the ID can be retrieved via the clip.
Document reference date ID property.
You may be curious as to how I know this property contains the ID in the resource section of this lecture,
I provide a link to the document reference object.
This documentation page contains information on the type of data you can grab from this object.
As we saw in our editor, a document reference gets resolved by the promise.
One of the properties of this object is called ID.
The documentation says the following for this property the documents identifier within its collection,
we can safely assume this is the ID of a document.
Let's give our app a test.
Try uploading a file.
After uploading a file, the page should be redirected to the clip page in the address bar.
The idea of the document is used as the root parameter for extra verification.
The title of the page is the ID.
We've successfully redirected the user to another page based on the upload.
They will be able to share their awesome highlights with their friends in the next lecture.
We're going to make one final adjustment to the upload process.