1 00:00:00,120 --> 00:00:04,470 In this lecture, we're going to shift our attention to the Manage page. 2 00:00:04,740 --> 00:00:08,490 It's a page dedicated to managing a user's uploads. 3 00:00:08,760 --> 00:00:14,520 In this section of the app, users will be able to view, edit or delete their clips. 4 00:00:14,850 --> 00:00:17,370 This UI will need to become functional. 5 00:00:17,730 --> 00:00:20,910 The first step is to grab the user's uploads. 6 00:00:21,120 --> 00:00:23,280 It's going to be a huge undertaking. 7 00:00:23,550 --> 00:00:28,680 There's a lot of information to process before we write a single line of code. 8 00:00:28,800 --> 00:00:31,560 We should consider how we're going to approach this. 9 00:00:31,920 --> 00:00:36,030 We know that we're going to need the list of clips the user has uploaded. 10 00:00:36,390 --> 00:00:39,330 A request to the database will be necessary. 11 00:00:39,870 --> 00:00:44,400 We also know that we're going to have to loop through the data once we've obtained it. 12 00:00:44,700 --> 00:00:47,520 From there, we can make the buttons interactive. 13 00:00:47,880 --> 00:00:48,480 All right. 14 00:00:48,690 --> 00:00:51,180 Now do we have a general outline of things? 15 00:00:51,210 --> 00:00:52,350 Let's get started. 16 00:00:52,680 --> 00:00:56,340 The first step is to retrieve the data from Firebase. 17 00:00:56,610 --> 00:01:00,660 We want to retrieve the list of clips the user has uploaded so far. 18 00:01:01,110 --> 00:01:04,260 This request will be written from the eclipse service. 19 00:01:04,590 --> 00:01:06,480 Open this file in your editor. 20 00:01:09,000 --> 00:01:12,030 Let's think about what we're going to need for the request. 21 00:01:12,270 --> 00:01:15,600 The goal is to grab documents from the eclipse collection. 22 00:01:16,050 --> 00:01:19,110 The documents should be associated with the user. 23 00:01:19,350 --> 00:01:24,130 We shouldn't give them documents from other users during the upload process. 24 00:01:24,150 --> 00:01:28,260 We took the time to store the user's ID with each document. 25 00:01:28,560 --> 00:01:34,200 If we want to filter the documents by the user's ID, we're going to need it for the request. 26 00:01:34,710 --> 00:01:41,220 The idea of the user can be retrieved through the authentication service at the top of the file import 27 00:01:41,220 --> 00:01:48,840 the angular fire off service from the angular slash fire slash compat slash off package. 28 00:01:51,260 --> 00:01:56,090 Next, let's inject this service into our class through the constructor function. 29 00:01:56,390 --> 00:01:59,240 The name of the alias will be called authentication. 30 00:02:01,770 --> 00:02:08,130 After injecting this service, we can begin defining a method for querying the database in the class 31 00:02:08,310 --> 00:02:11,580 to a public method called get user clips. 32 00:02:14,070 --> 00:02:17,250 From this method, we're going to return an observable. 33 00:02:17,520 --> 00:02:20,700 Normally we would return the data from the request. 34 00:02:21,000 --> 00:02:24,690 However, we need to consider these sorting feature in our app. 35 00:02:25,020 --> 00:02:29,850 If the user changes the sorting order, the request will need to be performed again. 36 00:02:30,210 --> 00:02:36,690 Therefore, we should create an observable for pushing new data whenever these sorting changes in this 37 00:02:36,690 --> 00:02:37,140 method. 38 00:02:37,350 --> 00:02:42,420 We're going to return the this dot authentication report user observable. 39 00:02:44,950 --> 00:02:51,460 Strangely, we're going to start our observable by subscribing to the user observable, as we discussed 40 00:02:51,460 --> 00:02:53,980 earlier, we need the ID of the user. 41 00:02:54,310 --> 00:02:57,620 We can't grab it unless we subscribe to this observable. 42 00:02:57,940 --> 00:03:00,940 Once we have the ID, we'll switch the observable. 43 00:03:01,240 --> 00:03:03,100 Let's shame the pipe function. 44 00:03:05,740 --> 00:03:13,390 Next, we're going to import some operators back at the top of the file import the Switch map operator 45 00:03:13,390 --> 00:03:16,480 from the orange juice lash operators package. 46 00:03:18,980 --> 00:03:21,410 There are other operators we're going to need. 47 00:03:21,710 --> 00:03:26,750 In addition, import the of operator from the Rex J.S. package. 48 00:03:29,160 --> 00:03:35,460 Let's head back to our function and talk about why we need these operators as they arise in our function. 49 00:03:35,790 --> 00:03:42,810 First, we're going to use the Switch Map operator to subscribe to another observable passive into the 50 00:03:42,810 --> 00:03:43,740 pipe function. 51 00:03:46,220 --> 00:03:51,140 Next pass in a callback function with the user object as an argument. 52 00:03:53,600 --> 00:03:57,050 The user object will be pushed by the user observable. 53 00:03:57,350 --> 00:04:00,290 It'll contain the information related to the user. 54 00:04:00,650 --> 00:04:02,810 We're already familiar with this object. 55 00:04:02,990 --> 00:04:08,210 We worked with it when we created the authentication service on this object. 56 00:04:08,420 --> 00:04:13,070 The ID of the user can be accessed before we access the ID. 57 00:04:13,460 --> 00:04:15,050 We should check if it's empty. 58 00:04:15,410 --> 00:04:21,350 It's possible the user observable may push a no value in the callback function. 59 00:04:21,380 --> 00:04:26,270 Let's create a conditional statement to check if the user object is empty. 60 00:04:28,800 --> 00:04:32,940 If it is, we'll return in observable with the of operator. 61 00:04:33,180 --> 00:04:40,590 Remember, the Switch Map operator requires an observable to be returned by the function the of operator 62 00:04:40,590 --> 00:04:47,160 will create an observable that pushes the value past into which in this example, we will push an empty 63 00:04:47,160 --> 00:04:47,610 array. 64 00:04:50,280 --> 00:04:52,710 The observable will ultimately push a. 65 00:04:53,640 --> 00:04:58,290 If the user object is not empty, we can begin initiating a query. 66 00:04:58,710 --> 00:05:03,750 A query is a word to describe the process of requesting data from a database. 67 00:05:04,080 --> 00:05:07,320 We can initiate a query by selecting a collection. 68 00:05:07,710 --> 00:05:10,470 Luckily, we already selected a collection. 69 00:05:10,740 --> 00:05:16,110 We can reuse this selection to start a query below the conditional statement. 70 00:05:16,260 --> 00:05:22,230 Create a variable called query with the value of this doc clip's collection. 71 00:05:22,380 --> 00:05:23,340 Dot Ref. 72 00:05:26,010 --> 00:05:32,400 The ref object stores, a reference to the collection we've talked about references before, they are 73 00:05:32,400 --> 00:05:35,910 objects with methods for communicating with the database. 74 00:05:36,180 --> 00:05:41,100 We can create and search through documents in a collection on this object. 75 00:05:41,190 --> 00:05:43,860 We're going to chain a function called where? 76 00:05:46,430 --> 00:05:50,360 At the moment, the entire collection will be returned to the user. 77 00:05:50,690 --> 00:05:53,870 We don't want to grab every document in the collection. 78 00:05:54,200 --> 00:05:59,390 The Wear function helps us with filtering through the documents at the end of the day. 79 00:05:59,570 --> 00:06:01,280 Documents are objects. 80 00:06:01,550 --> 00:06:05,930 We can create a condition to check if a property matches a value. 81 00:06:06,500 --> 00:06:10,010 We can pass in three arguments for creating the condition. 82 00:06:10,340 --> 00:06:16,700 We're going to create a condition for checking if the user ID in the document matches the ID of the 83 00:06:16,700 --> 00:06:17,840 user logged in. 84 00:06:18,380 --> 00:06:21,400 The first argument is the name of the property. 85 00:06:21,410 --> 00:06:24,740 It should check in the document pass in UID. 86 00:06:27,700 --> 00:06:30,490 This property stores the ID of the user. 87 00:06:30,820 --> 00:06:36,070 The next argument is the comparison operator pass equals equals. 88 00:06:38,520 --> 00:06:45,410 Lastly, we need to pass in the value to compare to pass him, the user dot uid property. 89 00:06:48,040 --> 00:06:53,830 This function will generate a query instructing Firebase to search through the documents in the eclipse 90 00:06:53,830 --> 00:07:00,220 collection, check if the UID property is equal to the ID of the user currently logged in. 91 00:07:00,670 --> 00:07:03,520 If there's a match, it'll return the document. 92 00:07:04,240 --> 00:07:07,600 The last thing we'll need to do is initiate the query. 93 00:07:07,930 --> 00:07:11,680 The wear function doesn't begin searching through the collection. 94 00:07:11,980 --> 00:07:15,700 It merely creates the query for searching through the documents. 95 00:07:16,030 --> 00:07:19,420 We can initiate the query by calling the get function. 96 00:07:19,810 --> 00:07:24,550 We're going to return the value returned by the query dot get function. 97 00:07:27,160 --> 00:07:30,580 The value returned by the get function is a promise. 98 00:07:30,850 --> 00:07:33,520 It's perfectly fine to return a promise. 99 00:07:33,850 --> 00:07:36,310 We're finished with querying the database. 100 00:07:36,610 --> 00:07:39,640 We have the song data returned by the database. 101 00:07:39,910 --> 00:07:42,760 The next step is to subscribe to the results. 102 00:07:43,150 --> 00:07:47,530 Open the upload component class file at the top of the file. 103 00:07:47,560 --> 00:07:49,450 Import the clip service. 104 00:07:51,960 --> 00:07:59,070 Next in this service into the component, the name of the alias will be called clip service. 105 00:08:01,590 --> 00:08:09,030 We will subscribe to are observable from the kng on in it function called the this duct clip service 106 00:08:09,210 --> 00:08:09,680 dot. 107 00:08:09,720 --> 00:08:13,260 Get user clips function to grab the observable. 108 00:08:15,800 --> 00:08:20,480 For our subscription, we will pass in the console log function. 109 00:08:23,060 --> 00:08:29,510 Let's test our observable try, refreshing the managed page in the browser with the developer tools 110 00:08:29,510 --> 00:08:30,050 opened. 111 00:08:32,539 --> 00:08:38,690 In the console and object, we'll get logged the most important property is the docks property. 112 00:08:39,140 --> 00:08:42,049 It'll store the documents retrieved by our query. 113 00:08:42,350 --> 00:08:48,230 If you look inside this object, the length of the array should match the number of clips the user has 114 00:08:48,230 --> 00:08:50,270 uploaded in the next lecture. 115 00:08:50,390 --> 00:08:52,460 We're going to store this data.