1

00:00:07,630 --> 00:00:11,320

Yo-Yo Ma code homeys I'm not really that cool.



2

00:00:11,320 --> 00:00:17,890

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,920 --> 00:00:20,880

present when selected from groups AVC.



4

00:00:21,070 --> 00:00:26,110

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,380 --> 00:00:28,440

so that we can pass them straight in.



6

00:00:28,440 --> 00:00:30,090

It will be really cool.



7

00:00:30,100 --> 00:00:34,000

Let's go ahead and let's initialize that data.



8

00:00:34,240 --> 00:00:40,660

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,660 --> 00:00:44,170

the storyboard here and show you what is what.



10

00:00:44,710 --> 00:00:50,010

Let's take a look see.



11

00:00:50,030 --> 00:00:50,300

All right.



12

00:00:50,300 --> 00:00:56,240

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,240 --> 00:01:02,180

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,180 --> 00:01:04,660

The group member names et cetera et cetera.



15

00:01:04,700 --> 00:01:10,760

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,760 --> 00:01:13,280

present it when we select a table view.



17

00:01:13,280 --> 00:01:20,750

So let's go ahead and just copy group feed Visi its identity name and paste that in as its storyboard



18

00:01:20,750 --> 00:01:21,450

ID.



19

00:01:21,710 --> 00:01:23,980

And now we are good to go to present it.



20

00:01:23,990 --> 00:01:30,740

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,800 --> 00:01:32,430

of UI table if you delegate.



22

00:01:32,570 --> 00:01:36,500

And it is did select row at index path.



23

00:01:36,500 --> 00:01:42,890

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,890 --> 00:01:44,120

is really cool.



25

00:01:44,150 --> 00:01:46,940

So let's go ahead and let's decide how we're going to do this.



26

00:01:46,970 --> 00:01:54,980

I think first we should create a group Visi or group feed VC rather than we should initialize some data



27

00:01:54,980 --> 00:01:57,710

for it and then we should present it to the view controller.



28

00:01:57,710 --> 00:02:02,720

So before we actually initialize any data let's just see if we can present the view controller as it



29

00:02:02,720 --> 00:02:07,880

is let's use guard let just because we may not return a value in this would keep our app from crashing



30

00:02:07,880 --> 00:02:13,690

if we forgot to use the identifier or something like that.



31

00:02:13,700 --> 00:02:14,590

So let's go ahead and type.



32

00:02:14,600 --> 00:02:24,730

Guard let a group feed VC equals storyboard instantiate view controller with or with identifier.



33

00:02:25,010 --> 00:02:29,270

And of course we just set it as group feed visi.



34

00:02:29,510 --> 00:02:34,700

Now of course to get it to actually instantiate as the right view controller we need to optionally cast



35

00:02:34,700 --> 00:02:39,510

it as a group feed Visi else.



36

00:02:39,530 --> 00:02:42,780

If that doesn't work we're going to just return and get out of this function.



37

00:02:43,130 --> 00:02:44,150

So that's cool.



38

00:02:44,150 --> 00:02:54,560

Now we have a group feed Visi and all we need to do is just call present and pass in group VBC animated



39

00:02:54,560 --> 00:02:58,070

is true and the completion block we don't care.



40

00:02:58,070 --> 00:03:02,180

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,270 --> 00:03:08,270

like we are hoping that it does and then we're going to go ahead and set it up so that we can actually



42

00:03:08,270 --> 00:03:15,020

pass in data will initialize some data and pass it in so that we can give it a group title and a group



43

00:03:15,020 --> 00:03:17,630

description and all that good stuff will pass it over.



44

00:03:17,630 --> 00:03:18,730

So here we go.



45

00:03:18,730 --> 00:03:22,850

If I select a group it presents our group that's amazing.



46

00:03:22,850 --> 00:03:25,690

Although Look we're having some trouble here.



47

00:03:25,760 --> 00:03:30,800

It would appear that our top bar there is kind of out of place.



48

00:03:30,800 --> 00:03:32,430

That's not good.



49

00:03:32,450 --> 00:03:33,890

Let's go fix that.



50

00:03:33,890 --> 00:03:38,600

So go in the main story board and let's see what the issue is.



51

00:03:42,230 --> 00:03:45,590

It looks like we may have lost some constraints here.



52

00:03:45,920 --> 00:03:53,960

Looks like we have leading space trailing space top space height constraint and bottom space that looks



53

00:03:53,960 --> 00:03:54,760

good.



54

00:03:54,830 --> 00:04:00,580

Perhaps we have missed something here we align the center which is here the button is here.



55

00:04:00,740 --> 00:04:03,520

Maybe the button lost its top constraint.



56

00:04:03,790 --> 00:04:06,140

Ah yes it would appear that it has.



57

00:04:06,140 --> 00:04:13,430

So let's give it a top constraint and I believe for the buttons.



58

00:04:13,430 --> 00:04:14,560

No you know what that looks good.



59

00:04:14,630 --> 00:04:19,640

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,640 --> 00:04:19,940

down.



61

00:04:19,940 --> 00:04:23,100

But the main point guys is that this is presenting.



62

00:04:23,150 --> 00:04:24,240

It looks great.



63

00:04:24,350 --> 00:04:30,730

If I open send message let's make sure that it actually slides up over the table view there.



64

00:04:30,740 --> 00:04:31,890

All right looks good.



65

00:04:32,030 --> 00:04:33,090

Awesome.



66

00:04:33,140 --> 00:04:37,010

And let's toggle it again let's just make sure that it follows.



67

00:04:37,040 --> 00:04:37,370

Beautiful.



68

00:04:37,370 --> 00:04:37,610

OK.



69

00:04:37,650 --> 00:04:38,530

That's great.



70

00:04:38,780 --> 00:04:41,450

And it's passing in the default users that I set up here.



71

00:04:41,470 --> 00:04:47,570

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,570 --> 00:04:53,780

table view to do that we're going to start in-groups AVC because this is where we download our groups



73

00:04:53,840 --> 00:04:54,710

after all.



74

00:04:54,860 --> 00:05:00,350

And we have our groups array which you can see here we can pull out a group at the index path and that's



75

00:05:00,350 --> 00:05:04,970

actually the same way that we're going to pass a group to group feed visi.



76

00:05:05,030 --> 00:05:12,140

Now before we can call it here in groups Visi we need to go to group feed Visi which you can do that



77

00:05:12,140 --> 00:05:15,500

by clicking on group VBC or control command.



78

00:05:15,500 --> 00:05:20,690

Clicking on any instance will take you straight to the definition of that which is kind of cool anyway



79

00:05:20,720 --> 00:05:26,910

so we're going to create a little function up at the top here and we're going to call it phunk in knit



80

00:05:27,020 --> 00:05:36,500

group data and we're going to make it basically take a group we're going to say for wups for group.



81

00:05:36,620 --> 00:05:40,550

Maybe we'll just call it in data for group that's a better definition.



82

00:05:41,240 --> 00:05:44,010

And it's going to be of type group.



83

00:05:44,080 --> 00:05:44,820

OK.



84

00:05:45,170 --> 00:05:50,000

So that looks awesome and all we're going to need to do is to create a variable in here that's going



85

00:05:50,000 --> 00:05:56,810

to hold our group so just call it var group of type group and we're going to optionally we're going



86

00:05:56,810 --> 00:06:01,670

to cast it optional here because at the initialization of the view controller we're not sure if we have



87

00:06:01,670 --> 00:06:07,250

a value yet but we do set it in our initializers So just to be safe we're going to call self-talk group



88

00:06:07,790 --> 00:06:12,290

and we're going to set it to be equal to the group we pass in from our data function.



89

00:06:12,290 --> 00:06:18,680

Now the cool thing is now that we have our group if you remember a group has a title description key



90

00:06:19,010 --> 00:06:21,610

member count and an array of members.



91

00:06:21,620 --> 00:06:27,680

So when we initialize a group and pass it over we're going to have access to all of that good stuff.



92

00:06:27,680 --> 00:06:35,310

So what we're going to do is we're going to call view will appear super view will appear.



93

00:06:35,570 --> 00:06:42,350

Course it's animated and we're going to set our title label and our members label to include all of



94

00:06:42,350 --> 00:06:44,230

the information that we want.



95

00:06:44,240 --> 00:06:50,670

So what we're going to do is we're first going to go ahead and set group title label dot text.



96

00:06:50,680 --> 00:06:55,080

This text is equal to group.



97

00:06:55,310 --> 00:07:01,180

The one that we have in our view controller no group dot group title when we select it.



98

00:07:01,190 --> 00:07:03,380

It'll pass it in and set the label.



99

00:07:03,380 --> 00:07:11,020

Next we're going to go ahead and we're going to set members label text to be equal to group members.



100

00:07:11,030 --> 00:07:17,450

Remember that's an array of strings and we can use dot joined and we can use a separator to basically



101

00:07:17,450 --> 00:07:22,770

turn those into a really nice string with commas separating each element.



102

00:07:22,940 --> 00:07:23,810

Very very cool.



103

00:07:23,810 --> 00:07:25,880

So that'll set up all of our members properly.



104

00:07:25,890 --> 00:07:30,380

That'll save us a lot of time and resources and we don't need to go to firebase to download all of the



105

00:07:30,380 --> 00:07:34,420

information and convert IDs to usernames et cetera et cetera.



106

00:07:34,460 --> 00:07:38,630

We can just take the one from the group that we've already downloaded and we can just join them with



107

00:07:38,630 --> 00:07:39,460

a comma.



108

00:07:39,470 --> 00:07:41,490

Super super cool.



109

00:07:41,510 --> 00:07:42,120

Very good.



110

00:07:42,140 --> 00:07:45,920

OK so now let's think what do we need to do.



111

00:07:46,100 --> 00:07:48,890

We can pop up our view controller.



112

00:07:49,010 --> 00:07:51,230

OK let's go in and just see how that works.



113

00:07:51,270 --> 00:07:52,470

You can pop it up.



114

00:07:52,490 --> 00:07:56,730

We have a back button which needs to actually dismiss the view controller.



115

00:07:57,030 --> 00:07:58,860

Oh it appears that it does but it's hiding.



116

00:07:58,940 --> 00:08:00,470

Ok good it works.



117

00:08:00,470 --> 00:08:04,600

When we rebuild it remember we fixed the constraints so it should show.



118

00:08:05,240 --> 00:08:10,890

Now I think all we need to do is to go initialize this from groups AVC when we pass it with.



119

00:08:11,120 --> 00:08:12,620

Did select wrote index path.



120

00:08:12,620 --> 00:08:14,690

So let's do that now.



121

00:08:14,990 --> 00:08:21,740

Beneath our constant group feed Visi call group feed VC data for group.



122

00:08:21,920 --> 00:08:25,880

And just like up here we're going to pull out the groups array.



123

00:08:26,010 --> 00:08:30,010

Sorry the item from the group's array at the index path that we select.



124

00:08:30,050 --> 00:08:34,070

So I'm going to copy this and actually just pass that in because that's the group we need.



125

00:08:34,070 --> 00:08:36,350

Once it's initialized we're going to present the view controller.



126

00:08:36,350 --> 00:08:37,570

So let's build and run this.



127

00:08:37,580 --> 00:08:46,050

And let's see if we properly pass the data that we want and of course it's going to give me a simulator



128

00:08:46,140 --> 00:08:49,840

error lets build and run it again after quitting.



129

00:08:49,860 --> 00:08:50,430

Here we go.



130

00:08:50,430 --> 00:08:53,930

Looks like it's loading up and showing up.



131

00:08:54,210 --> 00:08:56,670

Whoops I made it jumbo sized down there.



132

00:08:56,670 --> 00:08:57,340

OK.



133

00:08:57,540 --> 00:08:59,070

Awesome.



134

00:08:59,070 --> 00:09:02,560

Here we go building running.



135

00:09:02,790 --> 00:09:03,720

And let's check it out.



136

00:09:03,720 --> 00:09:08,130

So if I click nerd herd the title pops in as nerd herd.



137

00:09:08,130 --> 00:09:09,870

Very cool.



138

00:09:10,030 --> 00:09:11,350

I'll take a look.



139

00:09:11,370 --> 00:09:13,220

We get a user ID.



140

00:09:13,230 --> 00:09:20,070

I totally forgot that we only download the user id so in fact we do need a function to convert these



141

00:09:20,130 --> 00:09:21,440

into the proper emails.



142

00:09:21,450 --> 00:09:26,480

But I'm glad that the title is passing in properly and we can dismiss it with our back button.



143

00:09:26,700 --> 00:09:34,150

So let's go into our data service and let's create a function that can convert IDs into emails.



144

00:09:34,170 --> 00:09:34,800

Let's do it.



145

00:09:34,800 --> 00:09:38,510

So let's go ahead and beneath get IDs for usernames.



146

00:09:38,700 --> 00:09:46,200

Let's create a function called phunk get usernames or have a let's call it get e-mails for.



147

00:09:46,410 --> 00:09:54,330

Well no it's call for group and we'll pass in the group because we have every group has a an array of



148

00:09:54,360 --> 00:09:55,410

IDs.



149

00:09:55,410 --> 00:09:58,260

Now of course we'll need a handler to return this back.



150

00:09:58,260 --> 00:10:04,530

It's going to be escaping and we're going to use a function here and we're going to call back an empty



151

00:10:04,530 --> 00:10:05,080

function.



152

00:10:05,100 --> 00:10:07,270

But what do we need to pass back.



153

00:10:07,290 --> 00:10:09,530

We need to pass back an array of strings right.



154

00:10:09,540 --> 00:10:10,700

An array of user names.



155

00:10:10,710 --> 00:10:13,750

So let's actually just actually call them e-mails instead.



156

00:10:14,100 --> 00:10:19,020

And we're going to go ahead and return an array of strings that contains all of our e-mails.



157

00:10:19,020 --> 00:10:20,160

Let's call this e-mail Ira.



158

00:10:20,160 --> 00:10:21,610

That's a little more specific.



159

00:10:21,630 --> 00:10:29,070

So just like before we create an empty array we create a snapshot we loop through it and add the proper



160

00:10:29,070 --> 00:10:30,570

items to the array.



161

00:10:30,570 --> 00:10:33,900

Then we pass it back with our handler it's going to be the same thing here.



162

00:10:33,930 --> 00:10:39,920

So let's call this var e-mail array equals an array of string.



163

00:10:40,050 --> 00:10:46,440

And we're going to initialize it like so with parentheses then we're going to go ahead and observe all



164

00:10:46,470 --> 00:10:47,240

users.



165

00:10:47,370 --> 00:10:47,890

OK.



166

00:10:48,030 --> 00:10:52,710

Because we're going to pass in the IDs from the group and we're going to return their e-mails.



167

00:10:52,710 --> 00:11:00,960

So go ahead and monitor refusers observe observe single event because when we do this we only really



168

00:11:00,960 --> 00:11:04,140

care that it goes through once and returns all the proper emails.



169

00:11:04,170 --> 00:11:08,790

So then it's going to be of type value because we're looking at all the values in our firebase snapshot



170

00:11:09,300 --> 00:11:12,240

and this will just be called email snapshot.



171

00:11:12,770 --> 00:11:18,720

No it's more of a user snapshot because it comes from our user child in firebase.



172

00:11:18,720 --> 00:11:25,620

So we're going to use guard let create a snapshot instance like so guard let users snapshot and moving



173

00:11:25,620 --> 00:11:31,290

quickly because we've already done this like five times so I'm going to just go ahead and move on you



174

00:11:31,290 --> 00:11:32,920

know what I'm doing here.



175

00:11:33,410 --> 00:11:38,420

Kate guard let users snapshot and if we don't have that we're just going to return.



176

00:11:38,790 --> 00:11:39,490

Very cool.



177

00:11:39,840 --> 00:11:43,200

But assuming we do we have a user snapshot we're going to go ahead.



178

00:11:43,230 --> 00:11:48,880

Go ahead and a for loop through them by typing for a user and user snapshot.



179

00:11:49,620 --> 00:11:53,440

And now what we're going to do is we're going to check our group.



180

00:11:53,600 --> 00:11:54,390

OK.



181

00:11:54,420 --> 00:11:58,560

We're going to check our group and we're going to go into the member's array of our group.



182

00:11:58,560 --> 00:12:03,920

We're going to check to see if that group contains the same key in the users.



183

00:12:03,930 --> 00:12:08,330

And if it does we're going to pull down the e-mail and then append it to our e-mail.



184

00:12:08,340 --> 00:12:17,250

So if our group members that's an array of string if you remember properly contains If it contains the



185

00:12:17,250 --> 00:12:22,140

user key because remember the members like we just saw in our simulator.



186

00:12:22,350 --> 00:12:23,430

It just shows the key.



187

00:12:23,430 --> 00:12:29,760

So if the members contains the key from the user snapshot then what we're going to do is we're going



188

00:12:29,760 --> 00:12:33,120

to go ahead and we're going to append the e-mail of that user.



189

00:12:33,120 --> 00:12:36,490

So go ahead and type e-mail or write append.



190

00:12:36,780 --> 00:12:37,550

And you know what.



191

00:12:37,550 --> 00:12:43,680

Let's actually create a constant to hold that user's e-mail by typing let e-mail equals a user child



192

00:12:43,680 --> 00:12:44,680

snapshot.



193

00:12:45,030 --> 00:12:47,980

Remember every user has an e-mail child.



194

00:12:48,270 --> 00:12:51,620

We want to pull out the value and cast that as a string.



195

00:12:51,990 --> 00:12:53,840

So now we have their e-mail.



196

00:12:53,850 --> 00:12:56,150

We're going to append it and that's it.



197

00:12:56,160 --> 00:12:57,000

It'll cycle through.



198

00:12:57,000 --> 00:13:03,270

It'll append all the proper e-mails and at the very end we call our handler we give it email because



199

00:13:03,270 --> 00:13:05,860

it's now full of the e-mails we need.



200

00:13:05,940 --> 00:13:11,670

Now we're going to go ahead and head back to group feed Visi and let's check out where we set up our



201

00:13:11,670 --> 00:13:15,340

members title K members label dot text.



202

00:13:15,340 --> 00:13:18,530

It only showed the IDs right.



203

00:13:18,540 --> 00:13:19,790

We need the user names.



204

00:13:19,800 --> 00:13:26,400

So in order to actually get those We're going to call data service instance and we're going to do get



205

00:13:26,520 --> 00:13:35,550

e-mails get e-mails for group will pass in the group and check it out guys we get an array back of returned



206

00:13:36,150 --> 00:13:37,760

e-mails.



207

00:13:37,770 --> 00:13:42,240

Now what we can do is we can actually use this same concept.



208

00:13:42,390 --> 00:13:46,270

We'll just go to and get rid of that and we'll cut this and paste it.



209

00:13:46,370 --> 00:13:53,510

Members label dot text and all we need to do is to give it returned e-mails and we're going to join



210

00:13:53,510 --> 00:13:55,610

them all.



211

00:13:56,120 --> 00:14:03,080

Oh what's the problem returned e-mails comes back as the right thing right.



212

00:14:03,080 --> 00:14:04,850

Members label dot text.



213

00:14:04,850 --> 00:14:11,200

Oh you know what it might need to be self-taught members label text they were passing in a group.



214

00:14:11,470 --> 00:14:14,780

You know what the group needs to be force rapped because it's optional.



215

00:14:14,960 --> 00:14:20,850

So force in rap the group now we can do returned e-mails and we're going to use joint.



216

00:14:20,870 --> 00:14:22,770

We've already done this before.



217

00:14:22,830 --> 00:14:23,260

Whoops.



218

00:14:23,290 --> 00:14:28,970

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,970 --> 00:14:29,920

a space.



220

00:14:29,930 --> 00:14:36,290

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,290 --> 00:14:41,630

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,630 --> 00:14:45,050

they're joined and separated with a comma and a space.



223

00:14:45,050 --> 00:14:50,770

Now of course it's telling me that I need to call self because that is a part of this.



224

00:14:51,020 --> 00:14:52,480

Now it's giving me another error.



225

00:14:52,700 --> 00:14:57,620

And oh it's just asking us to force on it which we already did let's build and run this let's see if



226

00:14:57,620 --> 00:15:01,600

that fixes our problem with emails and let's go into the simulator.



227

00:15:01,670 --> 00:15:03,260

Let's take a look.



228

00:15:03,320 --> 00:15:04,090

Here we go.



229

00:15:04,090 --> 00:15:07,070

Select a group and look at that.



230

00:15:07,070 --> 00:15:08,090

There's all the e-mails.



231

00:15:08,090 --> 00:15:08,960

That's awesome.



232

00:15:08,960 --> 00:15:10,430

They all show up.



233

00:15:10,520 --> 00:15:11,090

Cool cool.



234

00:15:11,090 --> 00:15:13,040

So they're converted right away.



235

00:15:13,070 --> 00:15:14,090

They show up right away.



236

00:15:14,090 --> 00:15:15,800

And guys this is awesome.



237

00:15:15,800 --> 00:15:22,070

We have our users showing up in the actual group that we added them to including ourselves remember



238

00:15:22,070 --> 00:15:23,870

Batman at Gotham dot net.



239

00:15:23,900 --> 00:15:25,790

So so cool.



240

00:15:25,820 --> 00:15:29,910

Now that's done we have downloaded all the users we've passed in the data.



241

00:15:29,990 --> 00:15:32,120

We know what group we're in now.



242

00:15:32,150 --> 00:15:36,510

We're going to do is we're going to set it up so that we can send messages into our group.



243

00:15:36,620 --> 00:15:43,010

Using this textfield here and having them show up in real time only in our group it's going to be really



244

00:15:43,010 --> 00:15:43,680

really cool.



245

00:15:43,700 --> 00:15:44,780

Let's head on over guys.



246

00:15:44,780 --> 00:15:46,240

We're almost done.



247

00:15:46,250 --> 00:15:48,100

We are so close to being finished.



248

00:15:48,140 --> 00:15:49,070

Let's keep going.