1
00:00:07,600 --> 00:00:11,290
Yo-Yo Ma code homeys I'm not really that cool.

2
00:00:11,290 --> 00:00:17,860
Hey guys this is Caleb with Dev slopes and in this video we're going to set up our group feed Visi to

3
00:00:17,860 --> 00:00:20,810
present when selected from groups AVC.

4
00:00:21,010 --> 00:00:26,050
We're going to initialize it with data and we're going to go ahead and get user names for the group

5
00:00:26,320 --> 00:00:28,370
so that we can pass them straight in.

6
00:00:28,390 --> 00:00:30,030
It'll be really cool.

7
00:00:30,040 --> 00:00:34,000
Let's go ahead and let's initialize that data.

8
00:00:34,180 --> 00:00:40,600
So we're going to actually go ahead and go into groups Visi And just so you remember let me pull open

9
00:00:40,600 --> 00:00:44,050
the storyboard here and show you what is what.

10
00:00:44,650 --> 00:00:46,380
Let's take a look see.

11
00:00:49,970 --> 00:00:50,240
All right.

12
00:00:50,240 --> 00:00:56,180
So currently we have groups Visi and we're going to set it so that when a table cell is tapped it's

13
00:00:56,180 --> 00:01:02,120
going to go ahead and present this view controller but we're going to load it up with the group's title

14
00:01:02,120 --> 00:01:04,590
The group member names et cetera et cetera.

15
00:01:04,640 --> 00:01:10,700
And so what we're actually needing to do first is we need to give this a storyboard IDs that we can

16
00:01:10,700 --> 00:01:13,170
present it when we select a table view.

17
00:01:13,220 --> 00:01:20,690
So let's go ahead and just copy group feed VC its identity name and paste that in as its storyboard

18
00:01:20,690 --> 00:01:21,460
ID.

19
00:01:21,650 --> 00:01:23,930
And now we are good to go to present it.

20
00:01:23,930 --> 00:01:30,680
So let's head back to groups AVC and we're going to go ahead and conform to another protocol method

21
00:01:30,740 --> 00:01:32,510
of UI table if you delegate.

22
00:01:32,510 --> 00:01:36,430
And it is did select row at index path.

23
00:01:36,440 --> 00:01:42,830
So for whatever cell we select it's going to allow us to basically present the group that we want which

24
00:01:42,830 --> 00:01:44,090
is really cool.

25
00:01:44,090 --> 00:01:46,880
So let's go ahead and let's decide how we're going to do this.

26
00:01:46,910 --> 00:01:54,920
I think first we should create a group Visi or group feed VC rather then we should initialize some data

27
00:01:54,920 --> 00:02:00,380
for it and then we should present it to the view controller so before we actually initialize any data

28
00:02:00,390 --> 00:02:05,390
let's just see if we can present the view controller as it is let's use guard let just because we may

29
00:02:05,390 --> 00:02:12,590
not return a value in this would keep our out from crashing if we forgot to use the identifier or something

30
00:02:12,590 --> 00:02:13,630
like that.

31
00:02:13,640 --> 00:02:14,530
So let's go ahead and type.

32
00:02:14,540 --> 00:02:24,660
Guard let a group feed VC equals storyboard instantiate view controller with with identifier.

33
00:02:24,950 --> 00:02:29,240
And of course we just set it as group feed visi.

34
00:02:29,450 --> 00:02:34,640
Now of course to get it to actually instantiate as the right view controller we need to optionally cast

35
00:02:34,640 --> 00:02:39,450
it as a group feed Visi else.

36
00:02:39,470 --> 00:02:42,910
If that doesn't work we're going to just return and get out of this function.

37
00:02:43,070 --> 00:02:44,090
So that's cool.

38
00:02:44,090 --> 00:02:54,500
Now we have a group feed Visi and all we need to do is just call present and pass in Group B B C animated

39
00:02:54,500 --> 00:02:57,920
is true and the completion block we don't care.

40
00:02:58,010 --> 00:03:02,120
So let's go ahead let's just build and run this and let's see if it presents The View Controller properly

41
00:03:02,210 --> 00:03:04,490
like we are hoping that it does.

42
00:03:04,970 --> 00:03:10,070
And then we're going to go ahead and set it up so that we can actually pass in data will initialize

43
00:03:10,070 --> 00:03:16,010
some data and pass it in so that we can give it a group title and a group description and all that good

44
00:03:16,010 --> 00:03:17,570
stuff will pass it over.

45
00:03:17,570 --> 00:03:18,670
So here we go.

46
00:03:18,670 --> 00:03:22,780
If I select a group it presents our group that's amazing.

47
00:03:22,790 --> 00:03:25,630
Although Look we're having some trouble here.

48
00:03:25,700 --> 00:03:30,740
It would appear that our top bar there is kind of out of place.

49
00:03:30,740 --> 00:03:32,310
That's not good.

50
00:03:32,390 --> 00:03:33,830
Let's go fix that.

51
00:03:33,830 --> 00:03:38,560
So go in the main storyboard and let's see what the issue is.

52
00:03:42,180 --> 00:03:45,840
It looks like we may have lost some constraints here.

53
00:03:45,840 --> 00:03:53,910
Looks like we have leading space trailing space top space height constraint and bottom space that looks

54
00:03:53,910 --> 00:03:54,650
good.

55
00:03:54,750 --> 00:04:01,080
Perhaps we have missed something here we align the center with is here the button is here maybe the

56
00:04:01,080 --> 00:04:03,400
button lost its top constraint.

57
00:04:03,710 --> 00:04:06,090
Ah yes it would appear that it has.

58
00:04:06,090 --> 00:04:14,480
So let's give it a top constraint and I believe for the buttons no you know what that looks good.

59
00:04:14,550 --> 00:04:19,590
Let's give it a top constraint to lock it in place there and once it is there that should move everything

60
00:04:19,590 --> 00:04:19,890
down.

61
00:04:19,890 --> 00:04:23,040
But the main point guys is that this is presenting.

62
00:04:23,100 --> 00:04:24,190
It looks great.

63
00:04:24,300 --> 00:04:30,650
If I open send message let's make sure that it actually slides up over the table view there.

64
00:04:30,660 --> 00:04:31,840
All right looks good.

65
00:04:31,980 --> 00:04:33,060
Awesome.

66
00:04:33,060 --> 00:04:36,960
And let's toggle it again let's just make sure that it follows.

67
00:04:36,990 --> 00:04:37,320
Beautiful.

68
00:04:37,320 --> 00:04:37,530
OK.

69
00:04:37,540 --> 00:04:38,570
So that's great.

70
00:04:38,700 --> 00:04:41,400
And it's passing in the two default users that I set up here.

71
00:04:41,400 --> 00:04:47,490
But now let's go write a function that will allow us to initialize the proper group when we select the

72
00:04:47,490 --> 00:04:53,730
table view to do that we're going to start in-groups VC because this is where we download our groups

73
00:04:53,760 --> 00:04:59,760
after all and we have our group array which you can see here we can pull out a group at the index path

74
00:04:59,820 --> 00:05:04,870
and that's actually the same way that we're going to pass a group to group feed visi.

75
00:05:04,950 --> 00:05:12,060
Now before we can call it here in groups we see we need to go to group feed Visi which you can do that

76
00:05:12,060 --> 00:05:15,450
by clicking on group BVC or control command.

77
00:05:15,450 --> 00:05:20,660
Clicking on any instance will take you straight to the definition of that which is kind of cool anyway.

78
00:05:20,670 --> 00:05:26,850
So we're going to create a little function up at the top here and we're going to call it phunk in knit

79
00:05:26,970 --> 00:05:36,450
group data and we're going to make it basically take a group we're going to say for what for group.

80
00:05:36,570 --> 00:05:43,960
Maybe we'll just call it in data for group that's a better definition and it's going to be of type group.

81
00:05:44,050 --> 00:05:45,080
OK.

82
00:05:45,090 --> 00:05:49,950
So that looks awesome and all we're going to need to do is to create a variable in here that's going

83
00:05:49,950 --> 00:05:51,180
to hold our group.

84
00:05:51,180 --> 00:05:57,600
So just call it var group of type group and we're going to optionally we're going to cast that optional

85
00:05:57,630 --> 00:06:02,910
here because at the initialization of the view controller we're not sure if we have a value yet but

86
00:06:02,970 --> 00:06:08,120
we do set it in our initialiser So just to be safe we're going to call self-direct group and we're going

87
00:06:08,120 --> 00:06:12,210
to set it to be equal to the group we pass in from our data function.

88
00:06:12,210 --> 00:06:18,630
Now the cool thing is now that we have our group if you remember a group has a title description key

89
00:06:18,930 --> 00:06:21,530
member count and an array of members.

90
00:06:21,540 --> 00:06:27,630
So when we initialize a group and pass it over we're going to have access to all of that good stuff.

91
00:06:27,630 --> 00:06:35,240
So what we're going to do is we're going to call you will appear super view will appear.

92
00:06:35,520 --> 00:06:42,300
Course it's animated and we're going to set our title label and our members label to include all of

93
00:06:42,300 --> 00:06:44,170
the information that we want.

94
00:06:44,190 --> 00:06:51,460
So what we're going to do is we're first going to go ahead and set group title label dot text.

95
00:06:51,930 --> 00:06:55,040
Text is equal to group.

96
00:06:55,260 --> 00:07:01,160
The one that we have in our view control or no group dot group title when we select it.

97
00:07:01,160 --> 00:07:03,300
It'll pass it in and set the label.

98
00:07:03,330 --> 00:07:10,970
Next we're going to go ahead and we're going to set members label text to be equal to group members.

99
00:07:10,980 --> 00:07:17,400
Remember that's an array of strings and we can use dot joined and we can use a separator to basically

100
00:07:17,400 --> 00:07:22,860
turn those into a really nice string with commas separating each element.

101
00:07:22,860 --> 00:07:23,730
Very very cool.

102
00:07:23,730 --> 00:07:25,830
So that'll set up all of our members properly.

103
00:07:25,840 --> 00:07:30,330
That'll save us a lot of time and resources and we don't need to go to firebase to download all of the

104
00:07:30,330 --> 00:07:34,340
information and convert IDs to usernames et cetera et cetera.

105
00:07:34,410 --> 00:07:38,550
We can just take the one from the group that we've already downloaded and we can just join them with

106
00:07:38,550 --> 00:07:39,210
a comma.

107
00:07:39,210 --> 00:07:41,430
Super super cool.

108
00:07:41,430 --> 00:07:42,070
Very good.

109
00:07:42,090 --> 00:07:45,870
OK so now let's think what do we need to do.

110
00:07:46,050 --> 00:07:48,880
We can pop up our view controller.

111
00:07:48,960 --> 00:07:51,220
OK let's go in and just see how that works.

112
00:07:51,260 --> 00:07:52,420
You can pop it up.

113
00:07:52,440 --> 00:07:56,660
We have a back button which needs to actually dismiss the view controller.

114
00:07:56,980 --> 00:07:58,790
Oh it appears that it does but it's hiding.

115
00:07:58,860 --> 00:07:59,220
OK good.

116
00:07:59,220 --> 00:08:00,390
It works.

117
00:08:00,390 --> 00:08:04,540
When we rebuild it remember we fix the constraints so it should show.

118
00:08:05,190 --> 00:08:11,580
Now I think all we need to do is to go initialize this from groups of b c when we pass it with did select

119
00:08:11,580 --> 00:08:12,570
road and X path.

120
00:08:12,570 --> 00:08:21,870
So let's do that now beneath our constant group feed Visi call group feed Visi data for group.

121
00:08:21,870 --> 00:08:25,810
And just like up here we're going to pull out the groups array.

122
00:08:25,950 --> 00:08:29,960
Sorry the item from the group's array at the index path that we select.

123
00:08:30,000 --> 00:08:33,940
So I'm going to copy this and actually just pass that in because that's the group we need.

124
00:08:33,990 --> 00:08:36,300
Once it's initialized we're going to present the view controller.

125
00:08:36,300 --> 00:08:37,500
So let's build and run this.

126
00:08:37,500 --> 00:08:46,010
And let's see if we properly pass the data that we want and of course it's going to give me a simulator

127
00:08:46,070 --> 00:08:49,790
error let's build and run it again after quitting.

128
00:08:49,790 --> 00:08:50,360
Here we go.

129
00:08:50,360 --> 00:08:54,100
Looks like it's loading up and showing up.

130
00:08:54,170 --> 00:08:56,620
Whoops I made it jumbo size down there.

131
00:08:56,630 --> 00:08:57,220
OK.

132
00:08:57,500 --> 00:08:58,010
Awesome.

133
00:08:59,000 --> 00:09:02,510
Here we go building running.

134
00:09:02,720 --> 00:09:03,680
And let's check it out.

135
00:09:03,680 --> 00:09:08,090
So if I click nerd herd the title pops in as nerd herd.

136
00:09:08,090 --> 00:09:09,650
Very cool.

137
00:09:09,980 --> 00:09:11,280
Oh take a look.

138
00:09:11,300 --> 00:09:13,150
We get a user ID.

139
00:09:13,160 --> 00:09:16,270
I totally forgot that we only download the user ID.

140
00:09:16,270 --> 00:09:21,390
So in fact we do need a function to convert these into the proper emails.

141
00:09:21,410 --> 00:09:26,420
But I'm glad that the title is passing in properly and we can dismiss it with our back button.

142
00:09:26,630 --> 00:09:33,860
So let's go into our data service and let's create a function that can convert IDs into emails.

143
00:09:34,100 --> 00:09:34,730
Let's do it.

144
00:09:34,730 --> 00:09:38,390
So let's go ahead and beneath get IDs for usernames.

145
00:09:38,630 --> 00:09:46,100
Let's create a function called phunk get usernames or have a let's call it get e-mails for.

146
00:09:46,330 --> 00:09:54,290
Well no it's call for group and we'll pass in the group because we have every group has a an array of

147
00:09:54,290 --> 00:09:55,170
IDs.

148
00:09:55,370 --> 00:09:58,220
Now of course we'll need a handler to return this back.

149
00:09:58,220 --> 00:10:04,490
It's going to be escaping and we're going to use a function here and we're going to call back an empty

150
00:10:04,490 --> 00:10:05,050
function.

151
00:10:05,060 --> 00:10:07,220
But what do we need to pass back.

152
00:10:07,250 --> 00:10:09,490
We need to pass back an array of strings right.

153
00:10:09,500 --> 00:10:10,620
An array of usernames.

154
00:10:10,640 --> 00:10:13,710
So let's actually just actually call them e-mails instead.

155
00:10:14,060 --> 00:10:18,950
And we're going to go ahead and return an array of strings that contains all of our e-mails.

156
00:10:18,950 --> 00:10:20,090
Let's call this e-mail array.

157
00:10:20,090 --> 00:10:21,550
That's a little more specific.

158
00:10:21,570 --> 00:10:27,150
So just like before we create an empty array we create a snapshot.

159
00:10:27,170 --> 00:10:30,500
We loop through it and add the proper items to the array.

160
00:10:30,500 --> 00:10:33,620
Then we pass it back with our handler it's going to be the same thing here.

161
00:10:33,860 --> 00:10:39,900
So let's call this var e-mail array equals an array of string.

162
00:10:39,980 --> 00:10:46,370
And we're going to initialize it like so with parentheses then we're going to go ahead and observe all

163
00:10:46,400 --> 00:10:47,300
users.

164
00:10:47,300 --> 00:10:47,790
OK.

165
00:10:47,960 --> 00:10:52,620
Because we're going to pass in the IDs from the group and we're going to return their e-mails.

166
00:10:52,640 --> 00:11:00,920
So go ahead and monitor ref users observe observe single event because when we do this we only really

167
00:11:00,920 --> 00:11:04,090
care that it goes through once and returns all the proper emails.

168
00:11:04,100 --> 00:11:08,720
So then it's going to be of type value because we're looking at all the values in our firebase snapshot

169
00:11:09,230 --> 00:11:12,220
and this will just be called email snapshot.

170
00:11:12,750 --> 00:11:18,650
No it's more of a user snapshot because it comes from our user child in firebase.

171
00:11:18,650 --> 00:11:25,580
So we're going to use guard let create a snapshot instance like so guard let users snapshot and moving

172
00:11:25,580 --> 00:11:31,220
quickly because we've already done this like five times so I'm going to just go ahead and move on you

173
00:11:31,220 --> 00:11:33,200
know what I'm doing here.

174
00:11:33,350 --> 00:11:38,270
Kate guard let users snapshot and if we don't have that we're just going to return.

175
00:11:38,720 --> 00:11:39,500
Very cool.

176
00:11:39,800 --> 00:11:43,170
But assuming we do we have a user snapshot we're going to go ahead.

177
00:11:43,190 --> 00:11:48,830
Go ahead and a for loop through them by typing for a user and user snapshot.

178
00:11:49,550 --> 00:11:53,420
And now what we're going to do is we're going to check our group.

179
00:11:53,570 --> 00:11:54,150
OK.

180
00:11:54,380 --> 00:11:58,450
We're going to check our group and we're going to go into the member's array of our group.

181
00:11:58,490 --> 00:12:03,880
We're going to check to see if that group contains the same key in the users.

182
00:12:03,890 --> 00:12:08,250
And if it does we're going to pull down the e-mail and then append it to our e-mail.

183
00:12:08,270 --> 00:12:17,210
So if our group members that's an array of string if you remember properly contains If it contains the

184
00:12:17,210 --> 00:12:22,280
user key because remember the members like we just saw in our simulator.

185
00:12:22,280 --> 00:12:23,360
It just shows the key.

186
00:12:23,360 --> 00:12:29,720
So if the members contains the key from the user snapshot then what we're going to do is we're going

187
00:12:29,720 --> 00:12:33,050
to go ahead and we're going to append the e-mail of that user.

188
00:12:33,050 --> 00:12:36,390
So go ahead and type e-mail or write a.

189
00:12:36,710 --> 00:12:42,350
And you know what let's actually create a constant to hold that users e-mail by typing let e-mail equals

190
00:12:42,350 --> 00:12:44,990
a user child snapshot.

191
00:12:44,990 --> 00:12:47,940
Remember every user has an e-mail child.

192
00:12:48,200 --> 00:12:51,840
We want to pull out the value and cast that as a string.

193
00:12:51,920 --> 00:12:53,760
So now we have their e-mail.

194
00:12:53,780 --> 00:12:56,110
We're going to append it and that's it.

195
00:12:56,120 --> 00:13:01,090
It'll cycle through it'll append all the proper e-mails and at the very end we call our handler.

196
00:13:01,580 --> 00:13:05,800
We give it e-mail away because it's now full of the e-mails we need.

197
00:13:05,900 --> 00:13:11,600
Now we're going to go ahead and head back to group feed VDC and let's check out where we set up our

198
00:13:11,600 --> 00:13:12,950
members title.

199
00:13:13,000 --> 00:13:15,270
OK members label dot text.

200
00:13:15,280 --> 00:13:18,460
It only showed the IDs right.

201
00:13:18,470 --> 00:13:19,740
We need the user names.

202
00:13:19,760 --> 00:13:26,330
So in order to actually get those We're going to call data service instance and we're going to do get

203
00:13:26,450 --> 00:13:35,510
e-mails get e-mails for group will pass in the group and check it out guys we get an array back of returned

204
00:13:36,080 --> 00:13:37,720
e-mails.

205
00:13:37,730 --> 00:13:42,310
Now what we can do is we can actually use this same concept.

206
00:13:42,320 --> 00:13:46,220
We'll just go ahead and get rid of that and we'll cut this and paste it.

207
00:13:46,310 --> 00:13:53,600
Members labeled text and all we need to do is to give it returned e-mails and we're going to join them

208
00:13:53,600 --> 00:13:55,570
all.

209
00:13:56,060 --> 00:13:57,910
Oh what's the problem.

210
00:13:58,230 --> 00:14:03,010
Turned emails comes back as the right thing right.

211
00:14:03,010 --> 00:14:04,600
Members label that text.

212
00:14:04,780 --> 00:14:09,470
Oh you know what it might need to be self-taught members labeled that text.

213
00:14:09,750 --> 00:14:11,170
They were passing in a group.

214
00:14:11,420 --> 00:14:14,700
You know what the group needs to be force rapped because it's optional.

215
00:14:14,900 --> 00:14:20,750
So for us rap the group now we can do returned e-mails and we're going to use joint.

216
00:14:20,810 --> 00:14:22,740
We've already done this before.

217
00:14:22,800 --> 00:14:23,240
Whoops.

218
00:14:23,280 --> 00:14:28,910
We weren't joined with a separator of string and we're going to separate each element with a comma and

219
00:14:28,910 --> 00:14:29,870
a space.

220
00:14:29,870 --> 00:14:36,230
So now when this load just going to convert all of the e-mails and it's going to go ahead and convert

221
00:14:36,230 --> 00:14:41,570
all the IDs and turn them into emails then we're going to set members label to include all of them and

222
00:14:41,570 --> 00:14:44,990
they're joined and separated with a comma and a space.

223
00:14:44,990 --> 00:14:50,710
Now of course it's telling me that I need to call self because that is a part of this.

224
00:14:50,960 --> 00:14:56,240
Now it's giving me another error and oh it's just asking us to force on Rappa which we already did let's

225
00:14:56,240 --> 00:15:01,610
build and run this let's see if that fixes our problem with e-mails and let's go into the simulator.

226
00:15:01,610 --> 00:15:03,200
Let's take a look.

227
00:15:03,260 --> 00:15:04,030
Here we go.

228
00:15:04,030 --> 00:15:07,010
Select a group and look at that.

229
00:15:07,010 --> 00:15:08,030
There's all the e-mails.

230
00:15:08,030 --> 00:15:08,900
That's awesome.

231
00:15:08,900 --> 00:15:10,380
They all show up.

232
00:15:10,460 --> 00:15:11,030
Cool cool.

233
00:15:11,030 --> 00:15:13,010
So they're converted right away.

234
00:15:13,010 --> 00:15:14,030
They show up right away.

235
00:15:14,030 --> 00:15:15,770
And guys this is awesome.

236
00:15:15,770 --> 00:15:22,010
We have our users showing up in the actual group that we added them to including ourselves remember

237
00:15:22,010 --> 00:15:23,810
Batman at Gotham dot net.

238
00:15:23,840 --> 00:15:25,730
So so cool.

239
00:15:25,760 --> 00:15:29,850
Now that's done we have downloaded all the users we've passed in the data.

240
00:15:29,930 --> 00:15:32,080
We know what group we're in now.

241
00:15:32,090 --> 00:15:36,460
We're going to do is we're going to set it up so that we can send messages into our group.

242
00:15:36,560 --> 00:15:42,950
Using this textfield here and having them show up in real time only in our group it's going to be really

243
00:15:42,950 --> 00:15:43,630
really cool.

244
00:15:43,640 --> 00:15:44,710
Let's head on over guys.

245
00:15:44,720 --> 00:15:46,180
We are almost done.

246
00:15:46,190 --> 00:15:48,030
We are so close to being finished.

247
00:15:48,080 --> 00:15:49,740
Let's keep going.