React devs might find this archived course helpful to reference, but this course has been updated! We now recommend you take the Firebase Fundamentals course.
Transcript from the "Routing" Lesson
[00:00:00]
>> Steve Kinney: We went through all that work of creating a user profile. And right now it has that created at, and that's it, right. That user profile document. What I would love to do is, we change this in the dashboard, right. We don't actually have a way to let the user change their display name or their profile picture.
[00:00:21] And like we said before, that user profile page can be used for a whole bunch of stuff. It can be used for sorting literally anything we want. It's just a NoSQL document. You can tack on anything you want on there. So we give us a lot of opportunities to expand stuff, but we need a way to change that.
[00:00:37] So what we're gonna do is we're gonna implement React Radar to give ourselves another page that we can go to. So, we can go visit user profile page from there, we're gonna be able to update display name, and we're also gonna hook into Firebase's storage system so that we can actually allow the user to upload a new photo and then use that instead.
[00:00:58] So, when they upload a new photo, what we'll do is we'll take that. And then we'll replace the photo URL on their user profile document. And that's what we're using now. We hydrated this lovely picture of yours truly from the Google OAuth API. The email sign ups didn't have one of those, right?
[00:01:17] So this'll give us the ability to upload, which'll let us play with another Fire-based API. And then also change that user profile document. All right, so let's make a new file. This one we'll call UserProfile.jsx. We're gonna keep this one pretty simple for right now. We'll say class UserProfile extends Component.
[00:01:51] And I'll render, and let's just make sure everything works so it'll return a div.
>> Steve Kinney: This is totally a user profile page.
>> Steve Kinney: All right, and then we will just export default.
>> Steve Kinney: That user profile. All right, so now we want to hook up React Router. That is gonna be yet another provider on this stack of providers.
[00:02:26] It's gonna be great. And we will
>> Steve Kinney: Import BrowserRouter as Router.
>> Steve Kinney: From react-router-dom.
>> Steve Kinney: Cool, and then we just stack another one on here. It's fine. Don't worry about it. This isn't at all getting ridiculous.
>> Steve Kinney: All right, and now with React Router basically allows the URL to control which components that we see.
[00:03:03] That's all it really does. And so here where we're showing posts, what we're gonna do is we're gonna bring in some useful helpers here. From React Router, we're gonna import a switch, a route and a link.
>> Steve Kinney: And what we'll do here is we will implement the switch.
[00:03:32]
>> Steve Kinney: So the switch is gonna look at the URL and then try to figure out what to do.
>> Steve Kinney: If the route is an exact match,
>> Steve Kinney: To just the root path, show me those posts again.
>> Steve Kinney: Otherwise, if the route is an exact path to /profile,
>> Steve Kinney: Show me that user profile page.
[00:04:14]
>> Steve Kinney: And one thing that I'm just gonna do, for my own sanity, is I'm gonna put a link
>> Steve Kinney: Which is the same thing as an a tag, but for React Router, back to the main page and in that current user component I'm going to say, hey, if you click on their name it'll take us to that profile page.
[00:04:43] So just so we can get back and forth.
>> Steve Kinney: Cool. Link. That'll go to profile.
>> Steve Kinney: All right, let's see if any of that works, click on that, totally user profile page, click on the title, we're totally going back to the main page. Very validating.
>> Steve Kinney: All right, we've made our point, we can navigate back and forth.
[00:05:26] And this is mostly because my UI is getting a little busy here. Give us a safe space to do some extra stuff here. Otherwise it would just be conditional after conditional picking what components to render, nobody needs that in their life.