1 00:00:04,960 --> 00:00:10,090 Everyone and welcome back the class Johnny be here with slopes and in the last lesson we did a little 2 00:00:10,090 --> 00:00:18,750 bit of a project set up getting our thoughts and comments classes up to date as well as adding our options 3 00:00:18,760 --> 00:00:19,790 images here. 4 00:00:19,960 --> 00:00:25,630 And we hooked it up in our a fat cell but I forgot to hook it up in the common cell So this guy didn't 5 00:00:25,630 --> 00:00:26,580 do that here. 6 00:00:26,590 --> 00:00:32,860 I went up all option click on the comment cell to bring up our assistant editor and I'm just going to 7 00:00:32,860 --> 00:00:41,340 control and drag into our thought cell here and I'm going to call this Options menu and say connect. 8 00:00:41,580 --> 00:00:43,380 Right now it's good. 9 00:00:43,390 --> 00:00:48,630 All right so let's go and check out our cell does file here. 10 00:00:49,060 --> 00:01:01,480 And what we're going to work on is making it so that we can tap on that Options menu image and have 11 00:01:01,560 --> 00:01:02,690 something happen. 12 00:01:02,740 --> 00:01:03,250 OK. 13 00:01:03,400 --> 00:01:07,340 So first off we're going to need a tap gesture recognizer. 14 00:01:07,510 --> 00:01:15,550 But the other second key part to this is a protocol delegate that we are going to code so that we can 15 00:01:15,580 --> 00:01:23,420 pass information from the thought or comment to sell to its controlling controller. 16 00:01:23,520 --> 00:01:24,030 OK. 17 00:01:24,400 --> 00:01:27,090 So that is what we're going to work on here. 18 00:01:27,100 --> 00:01:32,880 First let's start with just the tap gesture recognizers that's a little bit simpler and let's see here 19 00:01:32,890 --> 00:01:36,730 I'm going to get rid of this old comment that we have here. 20 00:01:37,940 --> 00:01:42,430 We're going to do is we're going to start out here in our configure cell we're going to start out with 21 00:01:42,430 --> 00:01:47,040 the options menu hidden. 22 00:01:47,890 --> 00:01:51,980 So going to start out with a hit and then don't hear me. 23 00:01:52,030 --> 00:01:54,570 Give us some space here. 24 00:01:55,750 --> 00:02:04,600 We are only going to show it and add the gesture recognizer if the person that is logged it in was the 25 00:02:04,600 --> 00:02:06,850 person that made that post. 26 00:02:06,850 --> 00:02:13,960 All right so this is why we need to have the user id part of the thought class because now we can say 27 00:02:14,080 --> 00:02:22,870 if thought that user ID is equal to and then we're just going to get the user id for the person that 28 00:02:22,870 --> 00:02:23,970 is locked in here. 29 00:02:24,100 --> 00:02:28,920 We can say Current User ID. 30 00:02:29,650 --> 00:02:35,650 So if the person that is logged in made this post then we will show the options menus when we say Options 31 00:02:35,650 --> 00:02:38,680 menu is hidden is equal to false. 32 00:02:38,710 --> 00:02:43,270 So it will be shown and then we can add the texture recognizer. 33 00:02:43,360 --> 00:02:48,200 So say the options menu dot is user interaction enabled. 34 00:02:48,310 --> 00:02:53,240 So first we have to make sure that the images user interactive will stay true. 35 00:02:53,560 --> 00:02:56,920 And then they will create the type gesture recognizable say. 36 00:02:57,010 --> 00:03:09,790 Let tappy cool UI UI gesture recognizer and will initialize it and the target is self and the action 37 00:03:10,570 --> 00:03:16,720 is a function that we haven't created yet so it's going to create that real quick with select or function. 38 00:03:16,720 --> 00:03:23,680 We have to expose it to the objective c framework so I'm going to say an objective c funk and say thought 39 00:03:24,280 --> 00:03:30,980 options tapped OK then we'll fill that out here in a second. 40 00:03:31,160 --> 00:03:41,500 But here we can say pound or hash tag selector and then we call that function that we just created thoughts 41 00:03:41,510 --> 00:03:42,790 option tapped. 42 00:03:43,400 --> 00:03:51,570 And then finally we are going to see options menu dot add gesture recognizer and tap. 43 00:03:51,860 --> 00:03:52,430 All right. 44 00:03:52,450 --> 00:03:52,940 There we go. 45 00:03:53,090 --> 00:03:55,070 So run through this again. 46 00:03:55,160 --> 00:04:00,200 The person that is logged in is the same person that created the post. 47 00:04:00,260 --> 00:04:03,140 Then we're going to show the options menu. 48 00:04:03,660 --> 00:04:10,580 Set the interaction enabled equal to true and add the tap gesture recognizer which calls this function 49 00:04:10,580 --> 00:04:11,950 here. 50 00:04:12,020 --> 00:04:19,790 Now we want to be able to if we look at our mockup whenever we click on these option image we want to 51 00:04:19,790 --> 00:04:22,100 be able to put up this alert. 52 00:04:22,430 --> 00:04:27,550 So this alert this is added from the view controller. 53 00:04:27,560 --> 00:04:29,180 And right now we're in the thought cell. 54 00:04:29,180 --> 00:04:31,690 So how do we get that information. 55 00:04:31,730 --> 00:04:36,720 The thought that we have tapped on how do we get that information to the controller. 56 00:04:36,950 --> 00:04:43,880 Well we're going to use the protocol and delegate pattern to protocols and delegates are super useful 57 00:04:45,050 --> 00:04:48,500 for handling functions and passing data around. 58 00:04:48,650 --> 00:04:50,570 And it's pretty easy to implement. 59 00:04:50,640 --> 00:04:56,120 How we got to do is we're going to create our own protocol and we're going to name this one thought 60 00:04:57,130 --> 00:04:58,000 delegate. 61 00:04:58,360 --> 00:04:58,900 OK. 62 00:04:59,120 --> 00:05:06,300 And then all we can do is we can write our own functions that this delegate has to conform to. 63 00:05:06,500 --> 00:05:14,440 So if you look at things like our main Visi these are protocols that the main Visi is conforming to. 64 00:05:14,540 --> 00:05:23,030 And when we add these protocols there are specific methods that we have to conform to such as the table 65 00:05:23,030 --> 00:05:23,640 view. 66 00:05:23,660 --> 00:05:30,980 So for a wide number of rows and section These are methods that are required for the for these protocols 67 00:05:30,980 --> 00:05:31,700 to work. 68 00:05:31,910 --> 00:05:37,010 So we're going to do is we have created our own protocol and we're going to write our own method that 69 00:05:37,010 --> 00:05:38,430 has to. 70 00:05:38,790 --> 00:05:42,790 If a controller or a class conforms to this protocol. 71 00:05:42,890 --> 00:05:45,730 It has to implement these methods. 72 00:05:45,920 --> 00:05:53,340 So we're going to say fat options tapped and then we can provide arguments. 73 00:05:53,510 --> 00:05:58,120 We can say thought of class thought OK. 74 00:05:58,390 --> 00:05:59,550 It's going to save that. 75 00:05:59,900 --> 00:06:09,650 And then if we come over to the I mean see if we implement this protocol which was thought that looked 76 00:06:09,650 --> 00:06:16,570 good then we should get an error here telling us that it needs to implement the here we go. 77 00:06:16,610 --> 00:06:18,980 So maybe this does not conform to the protocol. 78 00:06:19,250 --> 00:06:26,420 And do you want to have protocol stubs if we say fix then it automatically throws this stub in here. 79 00:06:26,450 --> 00:06:28,300 That is our thought options tapped. 80 00:06:28,340 --> 00:06:28,620 All right. 81 00:06:28,630 --> 00:06:37,040 And so here we are going to receive the thought that we could go on over in our thought so once we actually 82 00:06:37,100 --> 00:06:38,290 finish up over here. 83 00:06:38,480 --> 00:06:40,240 So that is pretty cool. 84 00:06:40,250 --> 00:06:48,690 So this is where we create the alert to handle the lesion. 85 00:06:49,270 --> 00:06:49,880 Okay. 86 00:06:49,970 --> 00:06:50,650 Very good. 87 00:06:50,960 --> 00:06:54,590 All right so back into our thought cell that swift How do we finish up here. 88 00:06:54,590 --> 00:07:03,470 Well what we've got to do is first we need to have a delegate very well so when I say Private our delegate 89 00:07:03,920 --> 00:07:06,250 of type Fard and delegate. 90 00:07:06,350 --> 00:07:12,800 And this is going to be an optional and then down here in our configure cell we are going to receive 91 00:07:13,210 --> 00:07:22,280 a delegate of type thought delegate and then here we're going to say self that delegate is equal to 92 00:07:22,280 --> 00:07:29,000 the delegate that is passed into the configure cell function and this delegate is actually going to 93 00:07:29,000 --> 00:07:32,870 be the let's go ahead and add that here in Maine visi. 94 00:07:32,900 --> 00:07:36,070 So in Maine Visi now we need to adjust our. 95 00:07:36,520 --> 00:07:41,040 Let's see here configure cell function right here. 96 00:07:41,200 --> 00:07:45,340 So now we are expecting a delegate. 97 00:07:45,940 --> 00:07:48,150 Oh I need to save our thoughts sell first. 98 00:07:48,150 --> 00:07:49,440 Want to save here. 99 00:07:49,630 --> 00:07:55,760 And then in Maine Visi here this is going to be a delegate and we're going to pass in self. 100 00:07:55,860 --> 00:08:04,170 So the delegate for this is actually the main Visi is going to save that from back into thought so. 101 00:08:04,200 --> 00:08:05,380 So that is all good. 102 00:08:05,380 --> 00:08:15,450 Now lastly all we need to do here is in the thought options tapped we just say delegate it thought options 103 00:08:15,490 --> 00:08:23,670 tapped and then we passed in the thought which is our variable appear that we set when we configure 104 00:08:23,670 --> 00:08:34,290 the cell so now when we click on one of these the the just your recognizer picks it up and calls are 105 00:08:34,290 --> 00:08:41,310 Slichter function here which then sets the delegate calls the delegate function which is picked up here 106 00:08:41,310 --> 00:08:45,030 in our main Visi her right here and the thought option's tapped. 107 00:08:45,240 --> 00:08:47,930 And let's just check this out this real quick. 108 00:08:47,940 --> 00:08:53,660 I'm going to say print dot dot we'll go with a user name. 109 00:08:53,810 --> 00:08:54,200 OK. 110 00:08:54,210 --> 00:08:57,550 And I'll run this and test it out. 111 00:08:57,690 --> 00:08:58,220 All right. 112 00:08:58,220 --> 00:09:05,210 Assume just going to click here and we should see printed out and look like it will work. 113 00:09:05,250 --> 00:09:08,530 So let's go ahead and check out what I missed. 114 00:09:09,570 --> 00:09:10,680 Ok silly me. 115 00:09:10,680 --> 00:09:15,360 This should be a UI tap gesture recognize her name. 116 00:09:15,380 --> 00:09:19,710 We go and try that again. 117 00:09:19,710 --> 00:09:21,680 All right it's going to come and is serious. 118 00:09:21,810 --> 00:09:28,080 And the first thing that you'll notice is that I have some comments here that were added by a different 119 00:09:28,530 --> 00:09:31,140 account than the one that I am currently logged in with. 120 00:09:31,260 --> 00:09:36,250 And you'll see that those do not have the options image showing. 121 00:09:36,270 --> 00:09:42,330 So our check here we're checking the thought Don't use your I.D. against the currently logged in user 122 00:09:42,330 --> 00:09:43,480 ID is working. 123 00:09:43,620 --> 00:09:44,800 So that's good news. 124 00:09:44,820 --> 00:09:51,810 And then if we click here then sure enough we do see printed out down here the user name. 125 00:09:52,060 --> 00:09:53,320 So that is good. 126 00:09:53,700 --> 00:09:57,450 All right so here in Maine we see where we are printing this out. 127 00:09:57,540 --> 00:10:05,760 This is where we are going to work on the alert to handle deleting thoughts here and here in the future 128 00:10:06,230 --> 00:10:11,160 but right now let's go ahead and repeat what we just did for the comment to sell. 129 00:10:11,160 --> 00:10:11,790 All right. 130 00:10:12,180 --> 00:10:17,420 So jumping into the comment to sell I'm going to give us some space down here. 131 00:10:17,430 --> 00:10:24,220 Close this bottom pain and just like we did in the thought sell I'm going to start out here in the configure 132 00:10:24,270 --> 00:10:35,440 sell by setting the options menu that is hidden equal to true and those go ahead and do our check. 133 00:10:36,090 --> 00:10:45,860 So we're going to say if the comment that user ID is equal to the path. 134 00:10:45,940 --> 00:10:53,070 No I think we need to import firebase here so import firebase. 135 00:10:53,240 --> 00:10:53,460 All right. 136 00:10:53,460 --> 00:10:54,140 Here we go. 137 00:10:54,360 --> 00:11:03,440 So off and off that current user that you ID. 138 00:11:04,680 --> 00:11:12,180 So if the currently logged in user is the owner of the commande then we will say Options menu that is 139 00:11:13,020 --> 00:11:16,550 hidden is equal to false. 140 00:11:16,980 --> 00:11:24,190 And then we'll go ahead and an hour just to recognize when we say let tappy equal the UI tap gesture 141 00:11:24,220 --> 00:11:32,130 to at this time make sure tap at the target which is self and the selector which we can add right now. 142 00:11:32,190 --> 00:11:44,090 So I'm going to say at objective c and this is going to be called the phunk comment options tapped. 143 00:11:44,370 --> 00:11:56,190 And adding our selector when do hash tag and say selector and then pass into the comments comments options 144 00:11:56,190 --> 00:11:56,930 tapped. 145 00:11:56,970 --> 00:11:57,860 There you go. 146 00:11:58,590 --> 00:12:06,630 And then we need to add the gesture recognizes and with say Options menu dot and gesture recognizer 147 00:12:06,810 --> 00:12:09,490 and the recognizer is tap. 148 00:12:09,810 --> 00:12:14,120 All right next up we are going to need to create a another protocol. 149 00:12:14,400 --> 00:12:20,840 So here I'm going to say protocol and the name is going to be Calment delegate. 150 00:12:21,180 --> 00:12:26,550 And we're going to have our requirements so we're going to have one function that is going to be called 151 00:12:26,910 --> 00:12:30,190 comment options tapped. 152 00:12:30,650 --> 00:12:36,690 And we're going to pass in as an argument the comment and that is of type comment. 153 00:12:37,110 --> 00:12:39,270 Very nice. 154 00:12:39,560 --> 00:12:43,400 So right here we're going to need a couple of variables. 155 00:12:43,400 --> 00:12:50,240 First off we're going to need to be able to keep track of the comment at the State of the entire comment 156 00:12:50,280 --> 00:13:01,740 cells going to save our or private move are comment type comment and here and configure So we're going 157 00:13:01,740 --> 00:13:08,700 to set that we're going to say self that comment is equal to comment and then we're going to need a 158 00:13:08,700 --> 00:13:09,140 delegate. 159 00:13:09,140 --> 00:13:20,310 So when I say private var delegate type comment delegate don't make that optional. 160 00:13:20,310 --> 00:13:29,640 And then here in our configure so all arguments passed into it we were going to say delegate delegate 161 00:13:30,540 --> 00:13:34,390 type comment and delegate and optional. 162 00:13:34,590 --> 00:13:40,410 And then here will say self-taught delegate is equal to the delegate that is passed into it. 163 00:13:40,500 --> 00:13:46,280 And if you remember from our thought cell that is going to be our comments AVC. 164 00:13:46,850 --> 00:13:52,890 All right so let's go ahead and work on how our comments of D.C. now to get that information from our 165 00:13:52,890 --> 00:14:02,790 comments well we need to implement our comment delegate and we'll go ahead and use the automatic fix 166 00:14:02,790 --> 00:14:05,590 here to implement that method. 167 00:14:05,640 --> 00:14:09,600 So we're going to select and say fix and there we go. 168 00:14:10,050 --> 00:14:15,660 So here is where we are going to be adding a layer. 169 00:14:16,220 --> 00:14:16,940 OK. 170 00:14:17,580 --> 00:14:19,510 So we need to. 171 00:14:19,560 --> 00:14:24,930 Only other thing we need to do in here we need to adjust our configure cell we need to be able to pass 172 00:14:24,930 --> 00:14:28,100 in the delegate which is self. 173 00:14:28,190 --> 00:14:30,820 Meaning this comments of the sea. 174 00:14:31,410 --> 00:14:32,900 And now let's see here. 175 00:14:32,910 --> 00:14:40,830 Jumping back into our comment cell in our comments option tapped we are going to then call that delegate 176 00:14:40,860 --> 00:14:47,070 and say common options tapped and we will pass in to the comment. 177 00:14:47,460 --> 00:14:53,640 And just to make sure that this is working so far let's go ahead and print out in the comments Visi 178 00:14:54,120 --> 00:15:03,040 up at the top in our comment options tapped the one required method for the comment delegate protocol. 179 00:15:03,150 --> 00:15:13,350 We are going to say print comment dot username and we will run this and test it out and we come over 180 00:15:13,350 --> 00:15:20,160 here and right here I have some comments already if you don't have any comments go ahead and just create 181 00:15:20,160 --> 00:15:25,710 your comments and then go ahead and test this so if I click on it we should see printed out down here 182 00:15:25,710 --> 00:15:27,000 J.B. which we do. 183 00:15:27,060 --> 00:15:27,320 All right. 184 00:15:27,330 --> 00:15:28,680 Perfect. 185 00:15:28,680 --> 00:15:30,360 So that is working. 186 00:15:30,480 --> 00:15:31,380 Very nice. 187 00:15:32,490 --> 00:15:33,090 All right cool. 188 00:15:33,090 --> 00:15:36,980 So now we have it working to wear on both our comments and our thoughts. 189 00:15:36,990 --> 00:15:44,280 We have a gesture recognizer on this image that only shows up if the logged in user is the owner of 190 00:15:44,280 --> 00:15:46,050 that thought or comment. 191 00:15:46,200 --> 00:15:54,480 And then when we click on it we have a protocol and a delegate that works so that we can actually work 192 00:15:54,480 --> 00:16:01,650 here inside the controller to take action when that is clicked and we have the comment or thought respectively 193 00:16:02,370 --> 00:16:03,660 available to us to work with. 194 00:16:03,660 --> 00:16:04,160 All right. 195 00:16:04,410 --> 00:16:13,500 So in the next lesson we're going to work on actually creating these alerts and doing some fire story 196 00:16:13,500 --> 00:16:14,160 deleting. 197 00:16:14,160 --> 00:16:14,480 All right. 198 00:16:14,520 --> 00:16:16,570 So we're going to learn how to handle that. 199 00:16:16,680 --> 00:16:17,730 So hope you're excited for that. 200 00:16:17,740 --> 00:16:19,630 And we'll see you in the next one.