Hey everybody this is Caleb with deps slopes and in this video we're going to set up our table view
cells when we add a group to show the checkmark when we tap on it.
Hide the checkmark when we tap on it again and we're going to also be able to add those users that we
select into their own array and then we'll pass that in to create a group in the next video.
But for this one we're going to set up the table view cell to show and hide the checkmark as well as
add the users to an array.
So go ahead and open up your X code project and we're going to start in user cell now in and use your
cell.
There is a function called Set selected that allows us to configure the view for the selected state.
So go ahead and get rid of that boilerplate code.
And here's what we're going to do.
Inset selected We're going to basically use the selected boolean to determine whether or not the check
image view is hidden or showing.
So we can use if selected.
Meaning if we've tapped on the cell check check image is hidden is hidden equals false meaning it's
showing else meaning if it is not selected go ahead and type check image is hidden equals true.
All righty.
So that's going to allow us to tap on the cell and show the check image as well as tap on the cell and
hide it.
So let's go and build and run.
And let's just see if that worked.
When we use our table view so it'll pull open our simulator here we're going to build a break point.
Let's go into the groups we see let's create a group and let's search for somebody.
How about SI.
OK.
And if I tap the check shows up if I tap again it's well OK.
So it's still there.
So that's not good.
So that's not working.
It appears that selected is a status that only works when a cell is actually tapped on.
But you know what what we should do is we should create a boolean that will flip flop and that will
allow us to show and hide it at will.
So let's go ahead and let's create a boolean called showing.
And let's set it to be equal to false by default just because all these cells are not showing by default
until we select them.
And let's go ahead and let's set showing to be used as kind of our boolean check to see whether or not
the image view should actually be hidden.
So if it's selected meaning if we tap on it and if showing is false We're going to go ahead and we're
going to show the image view.
Right.
If it's selected if we tap on it and if showing is false meaning if it's not showing we're going to
show it then we're going to set showing to be equal to true.
OK.
That's where we're going to get interesting here.
So let's get rid of that.
Let's go ahead and
yes sorry we got to move this up because this is we're checking if it's showing we're going to go ahead
or sorry if it's selected and it's not showing.
We're going to show it then set showing the true meaning showing is now true.
So if I tap on it again showing is true that means it will be selected but it'll break down through
here.
Then check image that is hidden meaning it should hide.
And that means we should also set set showing to be false.
All right.
It's pretty easy and it looks like we were missing a bracket.
There let's go ahead and add it.
We should have a bracket for there.
Yep should have a bracket.
OK everything's good.
OK.
So let's go ahead and build and run.
And let's see if that fixes our problem with selecting and showing and hiding the check image view having
this little variable in here should be pretty helpful.
So click groups click new.
Let's search for someone.
OK so everybody is selected so that's not good.
Oh but you know what if we go back to create groups see I believe that we passed in everybody is selected
by default.
Yes we did.
OK so that's why.
So let's select somebody and unselect them select unselect.
Ok cool.
So our variable is working it's going to let us monitor and set up the check status of some of these
people.
So that's awesome.
That's great.
Looks like that's taken care of.
Now we just need to set up how we can configure these cells to know whether or not they are selected
or not.
So let's go ahead and let's dive into doing that.
What we're going to actually use is we're going to use did select wrote index path to Table View function
and this function is basically called whenever a table cell is selected.
Right at a certain index path.
So this cell for instance is selected at index path 1 right because we started 0 then 1 and 2.
So this is a certain index path.
This is a certain index path and we're going to use that to basically create a temporary array in this
view controller for all the people we select because we obviously aren't going to want all these users
in our array but we might want some of them so we can tap on one and add it to our RE tap on another
add it to our right.
So let's go up to the top and let's create that by typing var chosen user array.
It's going to be of type string because it's just going to be email values.
And this is going to be an array that will hold all the emails that we choose to let into that array.
Now in order to actually use this in did select row it index path we're going to need to first create
a cell.
Right because we're going to need to pull the e-mail from the cell.
So let's go ahead and do that by typing.
Guard let cell equals table view dequeue reusable cell identifier we've done this before.
And of course these cells here on this screen are user cells.
Now we're going to need to force cast it as a user cell to actually create an instance of user's cell.
And so assuming that does not work we're going to type.
Else and we'll just return.
OK.
I'd like to put a space on either side just for aesthetics.
But anyway so this assumes we get a cell returned.
Now we're only using this for the values inside meaning the text value of the e-mail label.
So let's go ahead and let's just say that we open the app.
All of these are unselected.
Let me set them as unselected here so we see what it would sort of look like.
OK.
So nothing is selected.
I select a user it becomes check.
That's great.
But what I want to do is basically to add it to a chosen user array.
OK but I need to also think I need to make sure that that user is not already there.
Now from the beginning of the app that user would not be but what if I tapped on it again I could add
it twice so I'm going to basically check to see if the chosen user array does not already have that
user.
Then we can add them.
So we're going to type if chosen user array contains and we can use that to basically check to see if
it contains this e-mail.
So let's go ahead and type cell dot e-mail label dot text and we have to force unwrap it since it is
coming in optionally so contains basically just checks to see if the Saray contains this value if it
contains the cell email text.
We can do something but what we are checking actually is if it does not contain because that's the only
way that we're going to add it as if it is not already there.
So go ahead and type the exclamation mark there to basically use the logical not to flip it.
So if chosen user array does not contain are seldom e-mail that text we're going to go ahead and we're
going to it so chosen user array append cell e-mail label dot text.
Ok so then the chosen user array has our e-mail but we need to display it here on this label.
Now let's go ahead and let's scroll up to see what we named it Group Member label.
Oh and you know what it looks like we have actually improperly set up this Iby outlet.
So let's go fix that in the storyboard
k it looks like oh yeah we named the stack for you the wrong thing.
So let's go ahead let's select the stack.
You remove create groups Visi and we can actually just go ahead and open up the assistant editor here
open up automatic and just a second got the spinning pinwheel of doom.
We'll just wait for it for a second.
And we'll go to Automattic create groups we see very good.
And you can see here you I stack is not correct it's really a label and we can drag that and drop it
on the proper label.
OK close the assistant editor click groups AVC.
And now we can go in and use group member labels so let's scroll down and what we're going to do is
whenever we tap on the user if I tap on Marty at great Scott dotcom I want him to show up here.
I want his email to appear there.
So what I'm going to do is actually really cool.
I'm going to set the text to be equal to this array.
But we're going to do something really cool to pull out the values and make them look nice.
So go ahead and type group member label dot text and that's going to be equal to chosen user array.
Now there's something we can do called joined with separator.
Select that and I'll show you what it is.
Returns a new string by concatenating the elements of the sequence adding the given separator between
each element.
So check this out right now.
Our email array looks like this.
We have strings in an array.
If we do joined with separator we can add this separator a comma and a space between every one.
And it's going to go ahead and create a nice single string with our separator.
So go ahead and put some quotes put a comma and a space.
And now every single time we tap on a user and they're added to the array are our group text labels
going to update with a list of all the peoples names with commas and everything it's really really cool
actually.
So that's great.
Now what if they are already in the array.
We need to remove them.
So if we added Marty at Great Scott his name would be here.
But what if we wanted to remove him.
That would mean if the chosen user array does contain this email we need to pull them out.
But as you know arrays do not have the ability to be pulled out by a certain name or a key that's a
dictionary.
So we need to basically use a handy dandy swift feature called Filter and we're going to basically filter
our array to keep everybody that it's not us.
So let's say we added Marti at Great Scott market slopes and Harvey Dunscombe if I wanted to remove
Mark I would filter the whole array to keep everybody except for Mark.
So here's how we're going to do that.
We're going to go ahead and call chosen user right.
OK.
And we're going to set it to be equal to the same thing chosen user array and you're probably thinking
like what why would you do that.
But the reason for that is because we can call filter and it's going to return to us a modified array.
Now we need to put some curly brackets and then inside of this filter we can use a temporary variable.
Now if you think about a for loop you could say for x in a number of houses and you could say X dot
area equals 1000 square feet.
So you could use X as a temporary variable to cycle through an array filter is kind of like a for loop
except for the temporary variable you can just use dollar sign zero.
And that's like a temporary placeholder variable that's used now for this case.
We want to remove or we want to keep everybody that is not the current cell.
So if I wanted to remove Mark I could click on it since Mark would be already in our chosen user array.
I can filter everybody and I can keep everybody that it's not him.
So for instance in this instance Mark would be seldom email able text so chosen user or a filter means
what we're going to do is we're going to filter and return back everybody that is not equal to the current
cell e-mail label dot text.
OK.
We'll return everybody that's not equal to that.
And then the chosen user array will be updated with everybody except for the person who we tapped.
Very cool.
So next we need to think.
Let's say that right now it says add people to your group.
What if I only added one person Marty at Great Scott dotcom shows up.
But what if I changed my mind if I undid it at this point the array would be empty and this group member
label text would just show up as an empty string and it would the whole label would actually hide because
we're in a stack view we need to basically check to see if there is greater than one greater than or
equal to one.
It should show the name.
But if there is less than that then we should show ad people to group.
So go ahead and type if chosen user count is greater than or equal to one meaning if there is at least
one person we should definitely show the chosen user.
So go ahead and copy and paste that there.
And we're using the chosen user joined with commas.
Otherwise meaning if there are zero people there group member label text should be equal to add people
to your group so that what it says.
Yeah add people to your group.
Now there's another thing that's really important we have a done button here but we have not added anybody
to our group.
So the done button should not be visible.
We should only make it visible once we've added somebody to our group so let's go ahead let's hide it
from the get go.
View will appear.
Phew.
I can't type today.
You will appear superdog you will appear and pass animated.
Then we're going to go ahead and just get the done button that is hidden is true.
OK.
Next we're going to set it so that it appears when we add somebody so when we tap on somebody we append
them to our array.
The Done button should definitely be showing.
So done buttons is hidden is false.
And then the only other time that it should show again is if we remove everybody from our group.
So done button is hidden equals true.
OK.
So you know we've done a lot of code writing without checking to see if this works let's go ahead and
build and run.
Let's go see if we properly are adding people and let's say let's give a shot let's go look to see if
we can add people and remove them et cetera et cetera.
OK.
Group's new group let's search for calm.
Let's click on Marty.
Great Scott.
Looks like he's showing up as user at break point.
That's kind of weird.
Let's go ahead and remove him.
OK good.
So the button shows and hides let's add market depth slopes.
Harvey it didn't.
Let's try to add two people.
OK.
When we try to add two people it's showing and hiding and they're all going away.
So it's not actually working.
They're not showing up the right way.
So we need to go do some work here to add them in.
And I'm just kind of wondering why it is that we are not getting everybody like we should be.
It appears that we are not actually getting the proper cell.
We're not really getting a value from any of these cells.
And I wonder.
Oh you know what.
Shoot.
I just realized what the deal is.
Guys we are cueing a reusable cell we need to actually download the real cell and we can do that by
calling cell for road index path.
Gosh let's do that.
So cell phone index path is going to let us get the actual cell pull the actual value and add it to
our array.
That's the problem we were pulling down a blank cell.
Let's go ahead and let's build and run this again and let's go see if that fixed our problem.
That is a big problem actually because dequeue reuseable cell is pulling down a temporary cell but we
need to actually pull down the cell that's been downloaded.
So let's go try that again type com and let's tap Marty it.
Great Scott there he is.
Let's tap market dove slopes.
Hey he added Harvey Dent and he added but we can't see him.
So it looks like we need to fix that label and set it so that the font can scale down to the appropriate
size.
So let's go set that right now.
OK so just click on the label click fixed font size and set it to minimum font size and size 8 should
be good.
Let's build and run it just to make sure that it's working.
One more time.
And guys that's pretty awesome.
It looks like we are successfully adding people into our chosen user array displaying them in that label.
And let's just go see it again let's make sure it worked.
Let's just search Dotcom's everybody has dot com.
Marty.
Mark Harvey Hey look at that.
Even me.
And if I uncheck it you'll see that it removes the person that we asked.
Really cool.
Wow that is so so awesome.
So it looks like it's adding everybody in.
And if I wanted to even remove Evan Yes and it goes back exactly how we wanted it to add people to your
group.
Super super cool the only thing the only thing that we still need to fix is we need to basically set
the cell so that it is unchecked by default and then we can tap on it and check it properly.
So let's go into create groups visi.
Let's go to configure cell because remember we are configuring the cell by default to be selected.
And that's not going to work.
Basically what we're going to do is we're going to check the index path of the cell and we're going
to compare it to the chosen user array to see if the chosen use or array is already selected.
Because if they're in the chosen user array they should not be or they should show as selected.
So let's go ahead and let's type if chosen user array contains email array index path that row k if
it contains them.
Then we're going to set up the cell to be selected right because if they're in the chosen use array
if we've already tapped on them they should be configured as selected.
If they're not meaning else we should configure this cell as false because they're not selected they're
not in our chosen users array.
And as soon as the table views reloaded all of the cells will show the proper checkmark So let's go
build and run this let's see if it worked.
And we should be good to move on to the next video where we're going to actually create our group upload
it to firebase and add ourselves in.
So let's go try it click on groups new group let's add.
Maybe.
OK.
So nobody is selected.
That's great.
If I select somebody who appears checked if I select Harvey.
He appears that's checked.
And you know what let's actually get rid of this and try it again to see if they stay checked.
They do.
Harvey staes checked.
Let's add homini and let's go back and search dotcom looks like everybody is here.
Awesome.
Very cool so the checkmarks stay they stay properly configured.
We can add everybody into our tray and in the next video we're going to actually set it so that we can
push our group up to firebase and save it.
They're super super cool guys.
Amazing work.
Let's move on to the next video.