1 00:00:00,210 --> 00:00:06,150 In this lecture, we are going to redirect the user after they've uploaded a file at the moment, they'll 2 00:00:06,150 --> 00:00:07,890 be stuck on the upload page. 3 00:00:08,220 --> 00:00:12,330 I think users will want to share their clips with their friends after uploading them. 4 00:00:12,690 --> 00:00:14,790 We should make it easy for them to do so. 5 00:00:15,210 --> 00:00:17,820 Redirecting them to their clip will be helpful. 6 00:00:18,450 --> 00:00:25,710 Let's quickly review how the clip route works in the address bar type clip, followed by a random value. 7 00:00:26,070 --> 00:00:32,520 Angular allows us to insert any value in the path we have configured the route to accept a parameter 8 00:00:32,520 --> 00:00:33,390 in the path. 9 00:00:33,870 --> 00:00:38,040 The route parameter is the most important piece of information from this page. 10 00:00:38,280 --> 00:00:40,350 It'll determine which clip to render. 11 00:00:40,800 --> 00:00:44,880 In that case, we should use a value that will be unique to each clip. 12 00:00:45,180 --> 00:00:47,250 Luckily, we have such a value. 13 00:00:47,580 --> 00:00:50,640 Every document in Firebase stores a unique ID. 14 00:00:51,240 --> 00:00:54,810 We can use this ID as the value in the root parameter. 15 00:00:55,110 --> 00:01:01,230 We're going to update the upload component to redirect the user to this page and have all the values 16 00:01:01,230 --> 00:01:03,000 we've created in this component. 17 00:01:03,240 --> 00:01:07,440 We're going to use the ID from the document to generate the URL. 18 00:01:08,040 --> 00:01:12,810 For example, let's say Firebase generates an ID called ABC. 19 00:01:13,140 --> 00:01:15,660 The path to the clip should be clip. 20 00:01:16,380 --> 00:01:17,160 ABC. 21 00:01:19,730 --> 00:01:20,900 Let's give it a try. 22 00:01:21,050 --> 00:01:22,700 Switch over to your editor. 23 00:01:23,060 --> 00:01:26,990 We're going to start by working inside the clip service file. 24 00:01:32,180 --> 00:01:35,750 In our service, we have a method called Create Clip. 25 00:01:36,170 --> 00:01:41,210 This method is responsible for inserting a document into the clips collections. 26 00:01:41,540 --> 00:01:44,150 Let's hover our mouse over the ad function. 27 00:01:44,540 --> 00:01:47,690 The return value of this function will be a promise. 28 00:01:48,050 --> 00:01:54,110 The promise resolves to a document reference since we've passed on a generic to the collection. 29 00:01:54,320 --> 00:02:00,380 The document will be formatted similarly to the I clip model instead of returning nothing. 30 00:02:00,410 --> 00:02:02,060 Let's return this promise. 31 00:02:02,330 --> 00:02:04,820 We should annotate the return value. 32 00:02:05,180 --> 00:02:10,729 Let's copy and paste this return value as the return value for the create clip method. 33 00:02:13,370 --> 00:02:19,670 An error will appear because we haven't imported the document reference type at the top of the file. 34 00:02:19,880 --> 00:02:28,610 Add on to the import statement from the angular slash fire slash compat slash firestorm package to include 35 00:02:28,610 --> 00:02:30,320 the document reference type. 36 00:02:32,920 --> 00:02:34,480 Let's go back to our method. 37 00:02:34,780 --> 00:02:40,820 Instead of using the async await keywords, we can remove them completely in their place. 38 00:02:40,870 --> 00:02:42,490 We can return the promise. 39 00:02:44,930 --> 00:02:48,590 We're returning the promise because it'll resolve to a document. 40 00:02:48,920 --> 00:02:55,100 This document will contain the ID, which the upload component will need to redirect the user. 41 00:02:55,370 --> 00:02:58,280 The promise will be handled by the upload component. 42 00:02:58,610 --> 00:03:00,350 Switch over to this component. 43 00:03:02,850 --> 00:03:07,140 Scroll down to the subscription on these snapshot changes observable. 44 00:03:07,470 --> 00:03:11,370 We're going to need to modify a few lines of code in the next function. 45 00:03:11,730 --> 00:03:17,850 Firstly, we will be handling a promise we should add the async keyword to the next function. 46 00:03:20,390 --> 00:03:24,770 Secondly, we should add the await keyword to the create clip function. 47 00:03:25,160 --> 00:03:29,840 In addition, the value resolved by the promise should be stored in a variable. 48 00:03:30,200 --> 00:03:32,120 We're going to need it for redirection. 49 00:03:32,420 --> 00:03:36,590 The name of the variable will be called clip document reference. 50 00:03:39,000 --> 00:03:45,360 Next, we're going to need to inject the router at the top of the file at an import statement for the 51 00:03:45,360 --> 00:03:48,960 router service from the angular slash router package. 52 00:03:51,360 --> 00:03:54,570 Afterward, scroll down to the constructor function. 53 00:03:57,060 --> 00:04:00,240 Inject the router service with the alias of router. 54 00:04:02,750 --> 00:04:04,700 Let's go back to our next function. 55 00:04:04,910 --> 00:04:10,850 At the end of the function, we're going to create a timeout with a duration of 1000 milliseconds. 56 00:04:16,089 --> 00:04:19,720 We're not going to redirect the user until a second has passed. 57 00:04:20,079 --> 00:04:25,660 We want to give them an opportunity to view the success message after a second has passed. 58 00:04:25,900 --> 00:04:31,540 We will call this Dot router dot navigate function with an array passed in. 59 00:04:34,200 --> 00:04:41,160 We are going to begin constructing the URL as a reminder, the navigate function will assume the pap 60 00:04:41,160 --> 00:04:42,120 is absolute. 61 00:04:42,510 --> 00:04:45,000 This default behavior works in our favor. 62 00:04:45,300 --> 00:04:50,710 We're not interested in redirecting the user with a relative path in this array. 63 00:04:50,730 --> 00:04:52,290 Let's pass and clip. 64 00:04:54,880 --> 00:05:00,340 Next, we need to add the ID, the ID can be retrieved via the clip. 65 00:05:00,370 --> 00:05:03,340 Document reference date ID property. 66 00:05:05,890 --> 00:05:12,700 You may be curious as to how I know this property contains the ID in the resource section of this lecture, 67 00:05:12,940 --> 00:05:16,390 I provide a link to the document reference object. 68 00:05:18,980 --> 00:05:24,980 This documentation page contains information on the type of data you can grab from this object. 69 00:05:25,340 --> 00:05:30,170 As we saw in our editor, a document reference gets resolved by the promise. 70 00:05:30,440 --> 00:05:33,410 One of the properties of this object is called ID. 71 00:05:34,100 --> 00:05:40,670 The documentation says the following for this property the documents identifier within its collection, 72 00:05:41,120 --> 00:05:44,570 we can safely assume this is the ID of a document. 73 00:05:44,780 --> 00:05:46,370 Let's give our app a test. 74 00:05:46,590 --> 00:05:48,050 Try uploading a file. 75 00:05:54,750 --> 00:06:01,140 After uploading a file, the page should be redirected to the clip page in the address bar. 76 00:06:01,350 --> 00:06:07,090 The idea of the document is used as the root parameter for extra verification. 77 00:06:07,110 --> 00:06:09,210 The title of the page is the ID. 78 00:06:09,880 --> 00:06:14,640 We've successfully redirected the user to another page based on the upload. 79 00:06:15,000 --> 00:06:19,950 They will be able to share their awesome highlights with their friends in the next lecture. 80 00:06:20,130 --> 00:06:24,090 We're going to make one final adjustment to the upload process.