Firebase with React, v2 Changing User Profile Data

Transcript from the "Changing User Profile Data" Lesson

[00:00:00]
>> Steve Kinney: What do I do on this user profile page? Well, really the reason we're implementing is an excuse for me to do file uploads, so I can show you how easy it is to upload files and store them in Fireface. That is really the whole reason we're doing this, but we'll also let them change the display name because we know the people who sign up with the email address and password aren't privileged enough to have display names by default.

[00:00:22] So we will also allow them to do that as well. And the side thing that I wanna teach you, as we do this, is basically kind of remember that this dot collection, dot doc, basically how to start extracting some of that in your component, to make it more workable.

[00:00:39] So that you don't have these giant pyramids of doom that start eking their way right. The moment you have to scroll left and right if your font is not size 24 like mine is, like you have a problem. So we're gonna start to break stuff out and hopefully see some patterns for working with some of these things.

[00:00:57] Now, that is going to be a little bit of typing coming up especially cuz I gotta make input fields and input fields in react just take too much work. So let's go on this journey together.
>> Steve Kinney: I have the user profile page. Ahead of myself this is it, right down in all of its glory.

[00:01:16] It's not great.
>> Steve Kinney: Now I imagine on this page, there's gonna be an input field for the display name, there's gonna be a file input for choosing a file from the file system and then a submit button. That's kind of the UI that I'm imagining right now. Is that offensive to anyone?

[00:01:35] All right, I'm seeing nods, so I think we're all on board for that. Which is, file inputs in react you can't actually store instate, you have to use a ref. So the only thing we're gonna need to store in state is that new display name. So we'll make it displayName.

[00:01:54] We'll start that off as an empty string. Awesome and I'm gonna need to hold on to a reference to that image input at some point. That's not imageInput. So we'll define that here as null for now, and on the component match we'll go ahead and get it. All right, cool.

[00:02:18] Now, we'll have it just like the normal handle change listener for the display input
>> Steve Kinney: Probably just copy and paste that from somewhere, but. Name and value from the event.target, filed under things that I should totally make a editor shortcut for.
>> Steve Kinney: All right, and we'll do the same thing with a handleSubmit.

[00:03:02]
>> Steve Kinney: event.preventDefault, so that we don't accidentally dump the page. We'll grab the display name on the state. Now if there is a display name we want to update the user reference, right? Like go find slash users, slash uid and we wanna go change something about it, we wanna update that file, right?

[00:03:33] So, before I get too carried away, one of the things that I really like to do in this case to give myself some computer properties so I'm not like typing too much. I can say like, get uid, let's give me a ES6 computer property or I can say, return auth-

[00:03:53]
>> Steve Kinney: .currentUser.uid. So now I don't have to think about that anymore. I'll say get userRef.
>> Steve Kinney: And that'll return
>> Steve Kinney: Firestore.doc nope.
>> Steve Kinney: Users
>> Steve Kinney: it just basically building off the other one. So, this will get you that uid shortcut from before. So it gave me a reference there.

[00:04:35] And so I can just use this in my component and not have to think about this too much. Now, I can say in here
>> Steve Kinney: If we have a new displayName, then go ahead and just do this.userRef, update, this.state. We could even do displayName here, just in case.

[00:05:10] This update will take anything from that object and merge it in. So I may be a little bit more defensive there in case I change stuff later. All right, so these need some backticks, thank you, Visual Studio.
>> Steve Kinney: Now we'll simply just replace this here and this is where the fun comes.

[00:05:34] So we'll say const displayName,
>> Steve Kinney: this.state. All right,
>> Steve Kinney: Grab that.
>> Steve Kinney: Say onSubmit.
>> Steve Kinney: this.handleSubmit.
>> Steve Kinney: Give ourselves an input. Type text. The value will be displayName. Name will be displayName and on change. This .handleChange the value, did I do the value already? Yeah, I did, sweet.

[00:06:54] We'll give it a placeholder, though.
>> Steve Kinney: Cool.
>> Speaker 1: Should we do a catch there maybe? Catch, what if the database would scream at us back that something's required or something like the display name, or-
>> Steve Kinney: The application'll blow up right now?
>> Speaker 1: Yeah, I don't know.
>> Steve Kinney: We should fix that.

[00:07:19] [LAUGHS] Remind me when we get back up to that handle, Seb that we should totally fix that. You're right, that's a good catch.
>> Steve Kinney: We'll take that file and this is gonna need a ref, and this.imageInput.
>> Steve Kinney: Reference, cool. And then last thing we need to do.
>> Steve Kinney: Here's the submit button.

[00:08:03]
>> Steve Kinney: I'll see how that looks okay. Looks like the auto complete bit me again. Nope.
>> Steve Kinney: Cool, go here. I've got this displayName now. Let's try it out. Nothing changes till I refresh, then you can see the name changed.