1
00:00:04,590 --> 00:00:09,870
Welcome back to class everyone Johnny B here with devil slopes dot com and this does and we are going

2
00:00:09,870 --> 00:00:16,730
to pull down the firestorm of data that we are holding in our comments collection and display them.

3
00:00:16,840 --> 00:00:21,290
Right so in the last lesson we figured out how to add our comments.

4
00:00:21,390 --> 00:00:23,330
So now we need to display them.

5
00:00:23,400 --> 00:00:29,960
So it's going to be very similar to what we did in our main Visi where we had our collection of thoughts

6
00:00:30,270 --> 00:00:32,760
and we create a listener.

7
00:00:32,880 --> 00:00:33,570
Let's see here.

8
00:00:33,570 --> 00:00:34,410
Here is our thoughts.

9
00:00:34,410 --> 00:00:42,240
A listener of type firelit listener registrations were going to create a listener and then we sit that

10
00:00:42,240 --> 00:00:52,350
listener and we add a snapshot listener and then we pass the snapshot to a parse data function in our

11
00:00:52,350 --> 00:01:01,020
thought cell here where we go through and we loop through all of the documents in the snapshot and parse

12
00:01:01,020 --> 00:01:07,560
out and pull out the data that we need create a new thought and add it to the thoughts array.

13
00:01:07,560 --> 00:01:08,780
And that is returned.

14
00:01:08,910 --> 00:01:13,170
So those are going to be very similar except anywhere you see thought is going to be replaced with commande

15
00:01:13,200 --> 00:01:14,270
pretty much OK.

16
00:01:14,550 --> 00:01:16,060
So let's get to it.

17
00:01:16,230 --> 00:01:25,650
Jumping into our comments Visi is go create our listener variable here soon to say our comment listener

18
00:01:26,010 --> 00:01:31,080
is of type fire listener.

19
00:01:31,410 --> 00:01:36,450
Fire listener registration that go up and in view viewed it up here.

20
00:01:36,480 --> 00:01:38,750
We are going to add it.

21
00:01:38,900 --> 00:01:42,850
You did appear we're going to add it.

22
00:01:42,870 --> 00:01:46,940
And then before I forget in view to disappear we need to remove it.

23
00:01:47,150 --> 00:01:47,420
OK.

24
00:01:47,430 --> 00:01:49,560
So here we have a comment.

25
00:01:49,600 --> 00:01:51,390
Listener to remove.

26
00:01:51,780 --> 00:01:57,190
And that's just to avoid any memory leaks or anything and anything like that.

27
00:01:57,190 --> 00:01:59,430
All right and so here in view did appear what are we going to do.

28
00:01:59,520 --> 00:02:02,350
We're going to say comment.

29
00:02:02,390 --> 00:02:04,480
Well the scenario is equal to.

30
00:02:04,740 --> 00:02:11,730
We're going to say fire store thought and then we're going to get a reference to our thoughts or our

31
00:02:11,730 --> 00:02:16,830
comments collection and to that we've got to go through the thoughts collection down to the thought

32
00:02:17,880 --> 00:02:23,560
that we are selected and then into the comments subcollection.

33
00:02:23,770 --> 00:02:28,030
So we're going to say a collection path and this is thoughts ref.

34
00:02:28,080 --> 00:02:30,770
We're going to go one layer deeper into the document.

35
00:02:30,900 --> 00:02:39,480
And this is a self thought that document I.D. and then I'm going to do a return and a dot and then one

36
00:02:39,480 --> 00:02:45,490
more layer which is collection path and this is our comments ref.

37
00:02:45,930 --> 00:02:51,390
And then we are going to say Dot and snapshot list here.

38
00:02:51,750 --> 00:02:54,980
And we're going to get our completion handler here.

39
00:02:54,980 --> 00:03:01,470
We're going to have a snapshot and we're going to have an optional error as well and close this bottom

40
00:03:01,470 --> 00:03:05,100
pane here and I'm going to unwrap that snapshot.

41
00:03:05,460 --> 00:03:12,950
Some say guard let snapshot equal snap shot else.

42
00:03:12,950 --> 00:03:14,530
So if this doesn't work then there was an error.

43
00:03:14,550 --> 00:03:16,450
So we're going to say Debug.

44
00:03:16,680 --> 00:03:28,450
Print say error fetching comments and then I'm going to print out that error.

45
00:03:29,310 --> 00:03:30,140
OK.

46
00:03:30,630 --> 00:03:39,610
And then we are also going to return to this function over if it was successful then we have a snapshot

47
00:03:39,610 --> 00:03:46,820
that we can use and what we're going to do is we are going to go ahead and jump into our comment that

48
00:03:46,840 --> 00:03:52,960
swift file here and we have this function that we copied over from our thought that's a file and we're

49
00:03:52,960 --> 00:03:54,260
going to come into it.

50
00:03:54,490 --> 00:03:57,160
And we're just going to modify it for our comment.

51
00:03:57,160 --> 00:04:03,340
All right so instead of a an array of thoughts we're going to make an array of comments and instead

52
00:04:03,340 --> 00:04:09,400
of thought class we are going to have a common cause and right here instead of returning an array of

53
00:04:09,400 --> 00:04:18,670
thoughts we are returning an array of comments and see here that looks good that looks good if you're

54
00:04:18,670 --> 00:04:22,520
going to return comments here.

55
00:04:22,690 --> 00:04:32,170
We're going to say comments penned and we'll leave that as it is for now and let's see here and here

56
00:04:32,170 --> 00:04:37,830
we're going to return comments OK.

57
00:04:38,230 --> 00:04:38,560
All right.

58
00:04:38,570 --> 00:04:40,610
So data is good.

59
00:04:40,720 --> 00:04:42,650
Username is good.

60
00:04:42,650 --> 00:04:44,690
Time stamp is also good.

61
00:04:44,890 --> 00:04:47,740
And we don't need these the last three here.

62
00:04:47,990 --> 00:04:53,780
And instead of thought text we want the comment text.

63
00:04:54,220 --> 00:04:59,600
And this is a comment text and that looks good.

64
00:05:00,140 --> 00:05:03,110
So I'm going to delete up to here.

65
00:05:03,370 --> 00:05:09,310
So instead of a new thought we are going to instantiate a new comment and that is equal to a comment

66
00:05:09,780 --> 00:05:11,020
that initialized it.

67
00:05:11,200 --> 00:05:20,490
And we're going to initialize it from the user name the time stamp and the comment text area.

68
00:05:20,570 --> 00:05:22,100
Now we have a new comment.

69
00:05:22,300 --> 00:05:30,010
And so what we're going to do is we're going to say comments that append a new element and a new element

70
00:05:30,010 --> 00:05:33,740
that we are pending is new comment.

71
00:05:33,760 --> 00:05:39,280
All right and just to run through what we have done over here in our comments Visi and we were going

72
00:05:39,280 --> 00:05:46,030
to call a comment that parsed and data and we're going to pass into it a snapshot and this snapshot

73
00:05:46,060 --> 00:05:54,860
contains all of the comments in our comments document our comments collection.

74
00:05:54,880 --> 00:06:00,090
Right now we have two documents in our comments collection for this particular document.

75
00:06:00,430 --> 00:06:04,340
And so we were going to pass that snapshot into this function here.

76
00:06:04,420 --> 00:06:13,120
If we jump to it we then create an empty array of comments and this parse data function returns an array

77
00:06:13,120 --> 00:06:18,120
of comments and we go through the process of unwrapping the snapshot.

78
00:06:18,290 --> 00:06:25,060
Then we look through the documents in the snap and we extract the data from each one looking for the

79
00:06:25,060 --> 00:06:27,670
user name time stamp and comment text.

80
00:06:27,670 --> 00:06:35,260
We then instantiate a new comment from our comment initialiser and append that comment to our array

81
00:06:35,260 --> 00:06:36,060
right here.

82
00:06:36,070 --> 00:06:41,980
And finally we return that array back into our comments.

83
00:06:42,010 --> 00:06:48,950
AVC right here setting it equal to our array of comments right here.

84
00:06:49,210 --> 00:06:54,780
And we then use to that we then use in our table view methods.

85
00:06:54,990 --> 00:06:55,580
OK.

86
00:06:55,810 --> 00:07:02,740
So right here before we do this in the event that another comment is added instead of going through

87
00:07:02,740 --> 00:07:08,860
the whole process and adding even more Commines Plus the 1 to our array we're going to remove the comments

88
00:07:08,860 --> 00:07:11,490
from I say self-talk Commines dot remove.

89
00:07:11,840 --> 00:07:14,540
So we want remove all.

90
00:07:15,100 --> 00:07:23,660
And then after that we say self-taught table view dot relo data and then that should display the data.

91
00:07:23,660 --> 00:07:27,260
And unless I forgot something which is possible this should work.

92
00:07:27,260 --> 00:07:29,040
So go ahead and run it.

93
00:07:29,050 --> 00:07:35,010
All right so let's go to our serious category and click on our thought that has some comments.

94
00:07:36,250 --> 00:07:37,730
And oh there we go.

95
00:07:37,840 --> 00:07:38,620
This work.

96
00:07:38,710 --> 00:07:39,780
Let's see here.

97
00:07:39,890 --> 00:07:40,940
Johnny Be Good.

98
00:07:40,960 --> 00:07:47,670
Looks like I've missed something up here so let's go and check that out here in our comment cell.

99
00:07:47,950 --> 00:07:49,270
Oh right here.

100
00:07:49,270 --> 00:07:53,060
This should be a time stamp.

101
00:07:54,160 --> 00:07:56,530
Time stamp text.

102
00:07:56,700 --> 00:07:58,360
That text is equal to the time stamp.

103
00:07:58,360 --> 00:07:59,620
All right let's try that again.

104
00:07:59,620 --> 00:08:01,720
All right going back to our serious category.

105
00:08:01,780 --> 00:08:04,860
Clicking on our first one here and there we go.

106
00:08:05,030 --> 00:08:09,530
So now we have our username our time stamp and our comment.

107
00:08:09,600 --> 00:08:10,030
All right.

108
00:08:10,030 --> 00:08:10,660
Awesome.

109
00:08:10,660 --> 00:08:15,690
So let's go and try this trying out a live.

110
00:08:15,760 --> 00:08:22,300
When I press this and this should populate who there we go.

111
00:08:22,340 --> 00:08:23,220
All right.

112
00:08:23,290 --> 00:08:26,080
And so you can see that this isn't quite ordered right.

113
00:08:26,140 --> 00:08:32,490
So let's go ahead and fix that back in our comments AVC as he hears it.

114
00:08:32,520 --> 00:08:34,210
And this to a new line.

115
00:08:34,570 --> 00:08:38,470
And then here I'm going to add another one and say Dot horder.

116
00:08:38,530 --> 00:08:47,230
And we want to order by string and the string that we were ordering by is false.

117
00:08:47,240 --> 00:08:47,880
There you go.

118
00:08:48,070 --> 00:08:49,360
Let's try it again.

119
00:08:49,490 --> 00:08:53,520
Right let's go ahead and click on a new one let's add a comment.

120
00:08:53,580 --> 00:08:59,340
I'm going to say Sleeping is the best and I had it.

121
00:08:59,800 --> 00:09:00,240
And boom.

122
00:09:00,250 --> 00:09:00,890
There we go.

123
00:09:00,910 --> 00:09:01,670
Come back out.

124
00:09:01,690 --> 00:09:03,960
Now this is one.

125
00:09:04,450 --> 00:09:05,940
This is at three now.

126
00:09:05,950 --> 00:09:07,660
So now we have three.

127
00:09:07,690 --> 00:09:09,500
That looks good.

128
00:09:09,520 --> 00:09:11,390
All right guys I think this is working.

129
00:09:11,830 --> 00:09:14,820
So now we have a whole Commons feature built out.

130
00:09:14,850 --> 00:09:17,200
Now anyone can add comment.

131
00:09:17,230 --> 00:09:24,790
Anyone can add a comment and it gets added right away with your user name and the time stamp was go

132
00:09:24,790 --> 00:09:28,770
ahead and log out and create a new user with a different name.

133
00:09:28,810 --> 00:09:33,790
Here I'm going to say be at b dot com password is 1 2 3 4 5 6.

134
00:09:33,790 --> 00:09:41,300
User name is Bella create the user sign in

135
00:09:46,800 --> 00:09:48,940
and then come over here.

136
00:09:50,170 --> 00:09:56,600
Add a comment here new comment from Bella added.

137
00:09:56,950 --> 00:10:00,250
And now we have a different user posting here.

138
00:10:00,250 --> 00:10:02,980
All right so this is a great way to go put yourself on the back.

139
00:10:02,980 --> 00:10:07,580
We have this app is becoming more and more full featured.

140
00:10:07,630 --> 00:10:13,930
We can add posts we can authenticate we can log in and now we can add comments on individual posts.

141
00:10:13,930 --> 00:10:15,890
So it's coming along very nicely.

142
00:10:16,000 --> 00:10:19,480
Before we finish up I want to address that keyboard issue.

143
00:10:19,850 --> 00:10:28,930
So if we click on one of our comments and we click here and we have the key the software keyboard toggled

144
00:10:29,680 --> 00:10:31,150
then you'll see that our keyboard.

145
00:10:31,180 --> 00:10:35,650
It covers up our textfield and we can't see what we are writing right.

146
00:10:36,010 --> 00:10:37,170
So that's no good.

147
00:10:37,480 --> 00:10:44,680
So we want to do is we want to be able to make it so that when we enter our textfield that the whole

148
00:10:44,680 --> 00:10:49,750
view is actually going to shift up and keep that textfield on top of the keyboard.

149
00:10:50,080 --> 00:10:56,750
All right and it's kind of a little bit complicated and it's outside of the scope of this course.

150
00:10:56,800 --> 00:11:01,850
So what we did is I just included a helper File here in our assets.

151
00:11:01,900 --> 00:11:07,310
So if you go ahead and take a look in your assets folder and look for the file keyboard a bound view

152
00:11:07,540 --> 00:11:15,100
swift and if you just drag that into your project and put it in utilities and I'm going to say finish

153
00:11:15,790 --> 00:11:20,230
and then make sure that the targeting membership is checked.

154
00:11:20,590 --> 00:11:23,230
And what this does is let's just take a look.

155
00:11:23,750 --> 00:11:31,210
It's an extension for a view with a function bind to keyboard and basically what it does is it listens

156
00:11:31,210 --> 00:11:35,450
for whenever the keyboard is shown and hidden.

157
00:11:35,770 --> 00:11:42,250
And what it does is it will whichever of you that you bind this to the keyboard will keep it right on

158
00:11:42,250 --> 00:11:43,610
top of the keyboard.

159
00:11:43,610 --> 00:11:43,870
All right.

160
00:11:43,900 --> 00:11:45,180
So it's pretty cool.

161
00:11:45,310 --> 00:11:52,330
And what we're going to do is here in the comments Visi and view to load all we're going to say is self

162
00:11:52,400 --> 00:12:00,560
taught view that bind to keyboard and then let's run this and see how it looks.

163
00:12:01,960 --> 00:12:09,160
I can click on one of these and when I click into the add comment I've got to toggle the software keyboard.

164
00:12:09,350 --> 00:12:10,020
There we go.

165
00:12:10,220 --> 00:12:14,130
So you see that the entire view kind of just slid up.

166
00:12:14,180 --> 00:12:14,430
All right.

167
00:12:14,440 --> 00:12:16,260
And that's that's pretty good.

168
00:12:16,580 --> 00:12:18,260
But now when we finish

169
00:12:20,860 --> 00:12:24,440
nothing happens it doesn't go away so don't fix that here.

170
00:12:24,460 --> 00:12:31,390
When we had come and tapped in our completion down here once it's all done all we're gonna do is we're

171
00:12:31,390 --> 00:12:37,900
going to say self-taught had come in tech start to resign first responder and let's run that again.

172
00:12:39,650 --> 00:12:46,970
And come into our comments and click on it and then slides up and then we can add another comment and

173
00:12:47,030 --> 00:12:49,220
added And then we slide back down.

174
00:12:49,220 --> 00:12:49,580
All right.

175
00:12:49,580 --> 00:12:50,960
Perfect.

176
00:12:50,960 --> 00:12:55,010
All right so that pretty much takes care of that keyboard issue.

177
00:12:55,160 --> 00:13:01,370
And you are able to use this file in any of your projects that you want to write.

178
00:13:01,400 --> 00:13:06,280
All right so the last thing that we have for this course and this app is securing it.

179
00:13:06,290 --> 00:13:12,880
Right now we still have this open to anybody to modify and write and read to our data so the next lesson

180
00:13:12,890 --> 00:13:18,170
we're going to talk about security rules and how to lock it down so that you can specify exactly what

181
00:13:18,170 --> 00:13:20,600
you want your users to be able to read and write.

182
00:13:20,600 --> 00:13:20,910
All right.

183
00:13:20,930 --> 00:13:22,950
So we'll talk about that next time and I'll see you then.