Welcome back to class everyone Johnny B here with Dev slopes dot com and in this lesson we are going
to work on updating our comments.
So the last lesson we made is so that we can delete the comments if I just add a comment here and add
it.
We can now delete it but we want to also be able to edit it.
So that's what we're going to work on here.
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
on here this is the update Visi we're when we click on it it comment the this text field will be populated
with the existing commented text.
And then we have a button to update it and that will update the common text field and value in store
for us.
All right.
So let's get to it.
I'm going to open up our mean story board and we are going to had ourselves a new controller here.
All right.
So this is going to be handed down here when we search for a view controller and head that are right
here.
And we're going to need a controller File for us from when I right click on our controller folder and
see a new file.
And this is an Cuco touch class.
So see.
Next the controller is our subclass and we're going to call this a date comment visi.
I'm going to say next.
And create.
There we go.
All right.
Going to get rid of this stuff down here.
Save that and then jump back into storyboard and then with our new controller selected with the controller
selected going to the identity inspector and change the class to update comment visi.
All right and then let's add a segue here so here in the comments AVC I'm just going to control and
drag to our new ABC and say show and then I'm going to select the segue and give it an identifier here
and the attributes and Specter are going to call this to edit comment and then let's go ahead and just
start adding our UI elements here cause this bumping and zoom in and check out our mockup again.
It's like we just got a text view and a button.
Pretty simple so as to get text to add a text of you here and just set that up about right there and
you would have all this text and I will change the color to our dark gray.
Change the font to custom family is Avenir next and will drop the size down to about 14 and that will
do.
Right.
And then we're going to change the background color right here go with this light gray.
And then if you click on it right here we're going to drop the opacity down to about oh about 20 percent.
There you go.
And last the beginning to a button.
So that search for a button here and there that right on in here and for the button we're going to change
the text color to right.
We're going to change the background here.
Background color too.
If we could create here by green color to our orange and then we're going to change the height or the
width to 125 and the height to 40.
And let's see here and then we're going to change the text to say update.
Looks good.
All right so now we have our two UI elements that's going to constrain them.
When you say 20 from the left 20 from the top and 20 from the right and then the height.
Let's go with a hundred and fifty and then for the update button we're going to set the width and height
and the distance from the top.
This go with 16 and then we're going to center it horizontally and container it would go.
All right so now let's go ahead and make some IB.
Let's hook these up.
All right so I'm going to hold option and click on Update comments VC to open our assistant editor and
then here at the top we're going to make a little common for outlets and then learn to control and drag
from our text to you.
Here I'm just going to call this comment text.
I'm going to say connect on any one for the button.
I'm going to see update button and that's an outlet and when I say connect and I'm going to need an
action for it.
So here I'm going to control and drag and this is an action and we're going to call it update tapped
and I'm going to say connect you know it's good let's go and go back to our assists or our standard
editor here and we are done with our layout here.
So let's jumping to update comments the VC and real quick here in the lead.
So let's go ahead and round those corners for our UI elements like we've been doing and it's a common
text layer to corner a radius is equal to 10 and then update and Lerdo corner radius is equal to 10
as well.
We're going to get rid of this comment and then how this is going to work is when we click on one of
these options for each comment and we press the edit comment we're going to segue to this new view controller
and we're going to need to pass over to it.
The comment that we are editing as well as the thought that it is a child of because we are going to
need to get a reference to the to the comment and for that we're going to need the they thought to document
ID so that we can go from the thoughts collection to the thought document and we're going to need the
document ID for that.
And then down to the Commons collection and then down to the comment Id.
So we're going to need both of those.
So we're going to do is here in the comments visi.
Let's go to our let's hear it action.
So we're going to be doing here we we're just going to perform a segue.
We're going to take reform segue and the identifier that we said was to edit comment.
I believe let me double check that.
And you right here and the identifier is to edit comment here.
All right so to edit comment and then our sender I'm going to put no for now but our sender we're going
to set in our perform or prepare for segue.
So we need to make this self self-talk from segue.
All right so now we need to add our prepared for segue function.
So prepare for segue.
And so this function is called right before the segue occurs.
And so what we're going to do is here we're going to get the reference to our destination view controller
which is the update comments TVC and we are going to be able to set data in the destination view controller
from this view controller and we will pass over the thought and the comment.
So to do that we say if that destination is equal to a Segway that destination then we cast it as an
update comments VCAT.
So then we have a reference to the destination Serenus if left.
I want to call this comment data and this is going to be the sender and it is going to be a tuple.
OK so a tuple is you can kind of grouped together two or more elements inside of these parentheses here.
And we're going to call it comment and it's going to be a type comment.
So we're going to be passing a comment as well as a thought of type thought
and then we're going to set the destination and to do that we need to have something in our destination
VCs So let's go back to our update comments that you see here and we're going to need a variable here
and two variables.
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
tuple and it's going to be comment of type comment and thought up type thought and we're implicitly
unwrapping that.
All right there we go.
And jumping back into our comments we see now that we have a variable here we can set that variable
here we can say comment.
Data is equal to the comment data that we are sending for this variable rate here and then going back
up to our perform segue right here.
Perform segue now here for sender.
We just in comment and self-doubt thought perfect.
And that will send over both with the comment and the thought and then we will just dismiss the alleged
abuse alert that dismiss.
Animated is true and completion is now and save that and then we will jump into our update come into
VC and make sure that this is all working.
So here we will print out
we'll say Comment do town conduct comment dot comment text and let's try that out.
All right so let's find a comment here and click on it and say edit comment.
And it should take us to.
There we go.
Takes us to our update come into the sea and indeed we do get the comment printed out here.
So it looks like it is working.
All right so instead of printing out the document let's go ahead and set the comment text that text
equal to the commentated dot com and dot com and text and that will populate that field and then all
we've got to do here to update it is just say fire store what we need to import firebase so import
firebase Gunma import firebase.
All right.
So when we tap on the update button what is going to happen is we are going to take whatever the common
text that text currently has and we are going to update that field in the fire store document.
So we need to get a reference to our fire store document for this comment.
Determinacy first or dot fire store data collection and we're going to work our way down.
So we're going to start out the thoughts collection then we're going to go down one level to the thought
to document and that is why we passed over both of the comment and the thought.
We need to be able to get the thought so that's in the comment data.
I thought that document ID isn't going to do every turn and a dot to go down to the subcollection of
comments.
And then lastly we get the common data itself.
So document and comment data.
Comment that document ID and then we call update.
All right so were you one the one with the completion handler update fields and I press return again
and I'm going to put this on its own line.
It's going to say update data and the field that we want to update is comment text and the value that
we want to update it is the comment text that text.
And for our completion to replace that with error in code and we'll just do a check on the Erris We'll
see if that error is to error then we are going to say Debug.
Print.
And we were going to say unable to update comment.
And then we will print out the error to localize description else.
If we were successful in updating we're done here so we are just going to pop back to the previous comments
of VC and say self-taught navigation controller that pop the controller.
Animated is true.
So let's try this up.
All right so let's find a thought that has some comments on this one does.
And it currently says comment here.
So when you click on it and say edit comment and writes comment here and then I'm going to say now I'm
editing and say update.
And if all goes according to plan.
There we go.
So we have successfully edited a comment.
All right so let's take a look at this one more time at what is happening from the site of firestorm.
All we got to do is get a reference to the document that we want to update.
That's what all of this is right here.
Then we call update data and we tell the virus to request which field we want to update and the value
that we want to update it to.
And we have our completion handler and if there is an error then we debug printed else we are successful
and we just pop back to the comments AVC.
All right so that is how we can update our comments.
Pretty cool.
So in the next lesson we're going to take a look at some more advanced security rules because right
now we have it to where anyone can read and write to the comments as long as they are logged in.
But we want it to be so that only the people if they own that comment can actually do that.
And so that's why we're going to work on in the next lesson.
Hope you're excited for it and I'll see you then.