1
00:00:05,290 --> 00:00:10,780
Welcome back to class everyone Johnny B here with Dev slopes dot com and in this lesson we are going

2
00:00:10,780 --> 00:00:13,190
to work on updating our comments.

3
00:00:13,330 --> 00:00:20,560
So the last lesson we made is so that we can delete the comments if I just add a comment here and add

4
00:00:20,580 --> 00:00:21,170
it.

5
00:00:21,520 --> 00:00:26,450
We can now delete it but we want to also be able to edit it.

6
00:00:26,740 --> 00:00:28,340
So that's what we're going to work on here.

7
00:00:28,360 --> 00:00:36,730
So if we take a look at our mockup then we can see here this is our new AVC that we're going to work

8
00:00:36,730 --> 00:00:43,840
on here this is the update Visi we're when we click on it it comment the this text field will be populated

9
00:00:43,840 --> 00:00:46,720
with the existing commented text.

10
00:00:46,780 --> 00:00:54,100
And then we have a button to update it and that will update the common text field and value in store

11
00:00:54,100 --> 00:00:54,550
for us.

12
00:00:54,550 --> 00:00:54,890
All right.

13
00:00:54,940 --> 00:00:56,300
So let's get to it.

14
00:00:56,320 --> 00:01:03,650
I'm going to open up our mean story board and we are going to had ourselves a new controller here.

15
00:01:03,650 --> 00:01:04,030
All right.

16
00:01:04,060 --> 00:01:09,940
So this is going to be handed down here when we search for a view controller and head that are right

17
00:01:09,970 --> 00:01:11,930
here.

18
00:01:12,450 --> 00:01:17,710
And we're going to need a controller File for us from when I right click on our controller folder and

19
00:01:17,710 --> 00:01:20,080
see a new file.

20
00:01:20,080 --> 00:01:22,220
And this is an Cuco touch class.

21
00:01:22,250 --> 00:01:22,790
So see.

22
00:01:22,810 --> 00:01:29,550
Next the controller is our subclass and we're going to call this a date comment visi.

23
00:01:29,660 --> 00:01:31,050
I'm going to say next.

24
00:01:31,780 --> 00:01:34,460
And create.

25
00:01:34,460 --> 00:01:35,480
There we go.

26
00:01:35,500 --> 00:01:35,710
All right.

27
00:01:35,710 --> 00:01:40,130
Going to get rid of this stuff down here.

28
00:01:40,330 --> 00:01:47,780
Save that and then jump back into storyboard and then with our new controller selected with the controller

29
00:01:47,790 --> 00:01:54,990
selected going to the identity inspector and change the class to update comment visi.

30
00:01:55,390 --> 00:02:03,400
All right and then let's add a segue here so here in the comments AVC I'm just going to control and

31
00:02:03,400 --> 00:02:10,310
drag to our new ABC and say show and then I'm going to select the segue and give it an identifier here

32
00:02:10,330 --> 00:02:18,370
and the attributes and Specter are going to call this to edit comment and then let's go ahead and just

33
00:02:18,370 --> 00:02:26,310
start adding our UI elements here cause this bumping and zoom in and check out our mockup again.

34
00:02:26,560 --> 00:02:30,410
It's like we just got a text view and a button.

35
00:02:30,430 --> 00:02:42,840
Pretty simple so as to get text to add a text of you here and just set that up about right there and

36
00:02:42,870 --> 00:02:49,750
you would have all this text and I will change the color to our dark gray.

37
00:02:49,800 --> 00:03:01,110
Change the font to custom family is Avenir next and will drop the size down to about 14 and that will

38
00:03:01,130 --> 00:03:01,770
do.

39
00:03:02,030 --> 00:03:02,440
Right.

40
00:03:02,510 --> 00:03:08,260
And then we're going to change the background color right here go with this light gray.

41
00:03:08,310 --> 00:03:16,190
And then if you click on it right here we're going to drop the opacity down to about oh about 20 percent.

42
00:03:16,220 --> 00:03:17,130
There you go.

43
00:03:17,700 --> 00:03:19,760
And last the beginning to a button.

44
00:03:19,820 --> 00:03:26,790
So that search for a button here and there that right on in here and for the button we're going to change

45
00:03:26,790 --> 00:03:28,740
the text color to right.

46
00:03:28,770 --> 00:03:32,930
We're going to change the background here.

47
00:03:32,940 --> 00:03:34,570
Background color too.

48
00:03:34,980 --> 00:03:43,710
If we could create here by green color to our orange and then we're going to change the height or the

49
00:03:43,710 --> 00:03:51,510
width to 125 and the height to 40.

50
00:03:52,270 --> 00:03:57,320
And let's see here and then we're going to change the text to say update.

51
00:03:57,630 --> 00:03:59,210
Looks good.

52
00:03:59,220 --> 00:04:03,830
All right so now we have our two UI elements that's going to constrain them.

53
00:04:03,910 --> 00:04:12,120
When you say 20 from the left 20 from the top and 20 from the right and then the height.

54
00:04:12,160 --> 00:04:19,330
Let's go with a hundred and fifty and then for the update button we're going to set the width and height

55
00:04:19,990 --> 00:04:22,570
and the distance from the top.

56
00:04:22,570 --> 00:04:32,050
This go with 16 and then we're going to center it horizontally and container it would go.

57
00:04:32,440 --> 00:04:35,520
All right so now let's go ahead and make some IB.

58
00:04:35,560 --> 00:04:36,700
Let's hook these up.

59
00:04:36,700 --> 00:04:42,450
All right so I'm going to hold option and click on Update comments VC to open our assistant editor and

60
00:04:42,460 --> 00:04:48,640
then here at the top we're going to make a little common for outlets and then learn to control and drag

61
00:04:48,640 --> 00:04:49,730
from our text to you.

62
00:04:49,840 --> 00:04:53,420
Here I'm just going to call this comment text.

63
00:04:53,890 --> 00:04:57,770
I'm going to say connect on any one for the button.

64
00:04:57,980 --> 00:05:03,850
I'm going to see update button and that's an outlet and when I say connect and I'm going to need an

65
00:05:04,120 --> 00:05:05,110
action for it.

66
00:05:05,140 --> 00:05:12,670
So here I'm going to control and drag and this is an action and we're going to call it update tapped

67
00:05:13,460 --> 00:05:20,840
and I'm going to say connect you know it's good let's go and go back to our assists or our standard

68
00:05:20,870 --> 00:05:25,580
editor here and we are done with our layout here.

69
00:05:25,790 --> 00:05:30,170
So let's jumping to update comments the VC and real quick here in the lead.

70
00:05:30,190 --> 00:05:34,880
So let's go ahead and round those corners for our UI elements like we've been doing and it's a common

71
00:05:34,880 --> 00:05:45,290
text layer to corner a radius is equal to 10 and then update and Lerdo corner radius is equal to 10

72
00:05:45,320 --> 00:05:46,800
as well.

73
00:05:47,750 --> 00:05:53,450
We're going to get rid of this comment and then how this is going to work is when we click on one of

74
00:05:53,450 --> 00:06:02,630
these options for each comment and we press the edit comment we're going to segue to this new view controller

75
00:06:02,870 --> 00:06:05,270
and we're going to need to pass over to it.

76
00:06:05,360 --> 00:06:14,390
The comment that we are editing as well as the thought that it is a child of because we are going to

77
00:06:14,390 --> 00:06:21,050
need to get a reference to the to the comment and for that we're going to need the they thought to document

78
00:06:21,050 --> 00:06:26,600
ID so that we can go from the thoughts collection to the thought document and we're going to need the

79
00:06:26,600 --> 00:06:27,520
document ID for that.

80
00:06:27,530 --> 00:06:32,360
And then down to the Commons collection and then down to the comment Id.

81
00:06:32,480 --> 00:06:34,260
So we're going to need both of those.

82
00:06:34,310 --> 00:06:38,600
So we're going to do is here in the comments visi.

83
00:06:38,840 --> 00:06:42,120
Let's go to our let's hear it action.

84
00:06:42,240 --> 00:06:44,730
So we're going to be doing here we we're just going to perform a segue.

85
00:06:44,740 --> 00:06:52,960
We're going to take reform segue and the identifier that we said was to edit comment.

86
00:06:53,150 --> 00:06:55,190
I believe let me double check that.

87
00:06:55,970 --> 00:07:01,460
And you right here and the identifier is to edit comment here.

88
00:07:01,910 --> 00:07:07,280
All right so to edit comment and then our sender I'm going to put no for now but our sender we're going

89
00:07:07,280 --> 00:07:11,650
to set in our perform or prepare for segue.

90
00:07:11,700 --> 00:07:14,690
So we need to make this self self-talk from segue.

91
00:07:15,050 --> 00:07:18,500
All right so now we need to add our prepared for segue function.

92
00:07:18,530 --> 00:07:20,920
So prepare for segue.

93
00:07:21,100 --> 00:07:25,060
And so this function is called right before the segue occurs.

94
00:07:25,250 --> 00:07:30,410
And so what we're going to do is here we're going to get the reference to our destination view controller

95
00:07:30,410 --> 00:07:38,390
which is the update comments TVC and we are going to be able to set data in the destination view controller

96
00:07:38,390 --> 00:07:43,960
from this view controller and we will pass over the thought and the comment.

97
00:07:44,300 --> 00:07:54,260
So to do that we say if that destination is equal to a Segway that destination then we cast it as an

98
00:07:54,380 --> 00:07:57,080
update comments VCAT.

99
00:07:58,430 --> 00:08:02,030
So then we have a reference to the destination Serenus if left.

100
00:08:02,350 --> 00:08:11,460
I want to call this comment data and this is going to be the sender and it is going to be a tuple.

101
00:08:11,700 --> 00:08:19,210
OK so a tuple is you can kind of grouped together two or more elements inside of these parentheses here.

102
00:08:19,460 --> 00:08:23,510
And we're going to call it comment and it's going to be a type comment.

103
00:08:23,520 --> 00:08:28,580
So we're going to be passing a comment as well as a thought of type thought

104
00:08:31,660 --> 00:08:39,910
and then we're going to set the destination and to do that we need to have something in our destination

105
00:08:39,910 --> 00:08:44,830
VCs So let's go back to our update comments that you see here and we're going to need a variable here

106
00:08:44,880 --> 00:08:46,750
and two variables.

107
00:08:47,350 --> 00:08:54,830
And this is going to be our comment data and this is going to be of type and it's going to be a type

108
00:08:54,960 --> 00:09:05,830
tuple and it's going to be comment of type comment and thought up type thought and we're implicitly

109
00:09:05,890 --> 00:09:07,620
unwrapping that.

110
00:09:07,900 --> 00:09:08,960
All right there we go.

111
00:09:09,040 --> 00:09:15,730
And jumping back into our comments we see now that we have a variable here we can set that variable

112
00:09:16,120 --> 00:09:18,450
here we can say comment.

113
00:09:18,490 --> 00:09:26,710
Data is equal to the comment data that we are sending for this variable rate here and then going back

114
00:09:26,710 --> 00:09:31,310
up to our perform segue right here.

115
00:09:31,310 --> 00:09:34,100
Perform segue now here for sender.

116
00:09:34,720 --> 00:09:41,160
We just in comment and self-doubt thought perfect.

117
00:09:41,170 --> 00:09:47,240
And that will send over both with the comment and the thought and then we will just dismiss the alleged

118
00:09:47,270 --> 00:09:50,250
abuse alert that dismiss.

119
00:09:51,050 --> 00:09:58,100
Animated is true and completion is now and save that and then we will jump into our update come into

120
00:09:58,180 --> 00:10:00,820
VC and make sure that this is all working.

121
00:10:00,820 --> 00:10:02,710
So here we will print out

122
00:10:05,480 --> 00:10:16,400
we'll say Comment do town conduct comment dot comment text and let's try that out.

123
00:10:16,400 --> 00:10:22,520
All right so let's find a comment here and click on it and say edit comment.

124
00:10:22,700 --> 00:10:24,050
And it should take us to.

125
00:10:24,200 --> 00:10:25,030
There we go.

126
00:10:25,040 --> 00:10:30,320
Takes us to our update come into the sea and indeed we do get the comment printed out here.

127
00:10:30,320 --> 00:10:32,140
So it looks like it is working.

128
00:10:32,160 --> 00:10:39,680
All right so instead of printing out the document let's go ahead and set the comment text that text

129
00:10:39,770 --> 00:10:50,240
equal to the commentated dot com and dot com and text and that will populate that field and then all

130
00:10:50,240 --> 00:11:01,490
we've got to do here to update it is just say fire store what we need to import firebase so import

131
00:11:04,080 --> 00:11:09,480
firebase Gunma import firebase.

132
00:11:09,480 --> 00:11:09,750
All right.

133
00:11:09,750 --> 00:11:16,180
So when we tap on the update button what is going to happen is we are going to take whatever the common

134
00:11:16,190 --> 00:11:22,490
text that text currently has and we are going to update that field in the fire store document.

135
00:11:22,500 --> 00:11:28,520
So we need to get a reference to our fire store document for this comment.

136
00:11:28,590 --> 00:11:34,130
Determinacy first or dot fire store data collection and we're going to work our way down.

137
00:11:34,140 --> 00:11:38,850
So we're going to start out the thoughts collection then we're going to go down one level to the thought

138
00:11:38,850 --> 00:11:42,990
to document and that is why we passed over both of the comment and the thought.

139
00:11:43,020 --> 00:11:48,420
We need to be able to get the thought so that's in the comment data.

140
00:11:48,940 --> 00:11:57,720
I thought that document ID isn't going to do every turn and a dot to go down to the subcollection of

141
00:11:58,350 --> 00:11:59,490
comments.

142
00:11:59,970 --> 00:12:02,870
And then lastly we get the common data itself.

143
00:12:02,880 --> 00:12:06,840
So document and comment data.

144
00:12:07,080 --> 00:12:11,660
Comment that document ID and then we call update.

145
00:12:11,820 --> 00:12:17,280
All right so were you one the one with the completion handler update fields and I press return again

146
00:12:17,790 --> 00:12:20,330
and I'm going to put this on its own line.

147
00:12:20,340 --> 00:12:31,080
It's going to say update data and the field that we want to update is comment text and the value that

148
00:12:31,080 --> 00:12:37,910
we want to update it is the comment text that text.

149
00:12:38,520 --> 00:12:45,780
And for our completion to replace that with error in code and we'll just do a check on the Erris We'll

150
00:12:45,780 --> 00:12:52,640
see if that error is to error then we are going to say Debug.

151
00:12:52,650 --> 00:12:53,350
Print.

152
00:12:53,820 --> 00:12:58,820
And we were going to say unable to update comment.

153
00:12:59,130 --> 00:13:05,100
And then we will print out the error to localize description else.

154
00:13:05,100 --> 00:13:12,120
If we were successful in updating we're done here so we are just going to pop back to the previous comments

155
00:13:12,120 --> 00:13:18,850
of VC and say self-taught navigation controller that pop the controller.

156
00:13:18,910 --> 00:13:20,640
Animated is true.

157
00:13:21,280 --> 00:13:23,170
So let's try this up.

158
00:13:23,250 --> 00:13:27,360
All right so let's find a thought that has some comments on this one does.

159
00:13:27,660 --> 00:13:30,280
And it currently says comment here.

160
00:13:30,280 --> 00:13:37,410
So when you click on it and say edit comment and writes comment here and then I'm going to say now I'm

161
00:13:37,680 --> 00:13:40,170
editing and say update.

162
00:13:40,560 --> 00:13:42,130
And if all goes according to plan.

163
00:13:42,180 --> 00:13:42,750
There we go.

164
00:13:42,750 --> 00:13:46,460
So we have successfully edited a comment.

165
00:13:46,470 --> 00:13:52,350
All right so let's take a look at this one more time at what is happening from the site of firestorm.

166
00:13:52,650 --> 00:13:56,220
All we got to do is get a reference to the document that we want to update.

167
00:13:56,280 --> 00:13:58,550
That's what all of this is right here.

168
00:13:58,600 --> 00:14:07,560
Then we call update data and we tell the virus to request which field we want to update and the value

169
00:14:07,560 --> 00:14:09,490
that we want to update it to.

170
00:14:09,630 --> 00:14:16,530
And we have our completion handler and if there is an error then we debug printed else we are successful

171
00:14:16,560 --> 00:14:19,920
and we just pop back to the comments AVC.

172
00:14:19,920 --> 00:14:22,770
All right so that is how we can update our comments.

173
00:14:22,770 --> 00:14:23,670
Pretty cool.

174
00:14:24,000 --> 00:14:28,080
So in the next lesson we're going to take a look at some more advanced security rules because right

175
00:14:28,080 --> 00:14:35,200
now we have it to where anyone can read and write to the comments as long as they are logged in.

176
00:14:35,340 --> 00:14:41,500
But we want it to be so that only the people if they own that comment can actually do that.

177
00:14:41,520 --> 00:14:43,260
And so that's why we're going to work on in the next lesson.

178
00:14:43,260 --> 00:14:44,990
Hope you're excited for it and I'll see you then.