How to Build a Profile Settings Page in React

[00:00 - 00:14] Welcome back to the next section. So we've got in the last two lessons, we've got the menu, the header, this main section and the sidebar finished.

[00:15 - 00:28] Now we're going to work on the remaining form section over here on the right hand side. I'm just like we did yesterday.

[00:29 - 00:48] We're going to go ahead and move the whole sidebar, the whole side panel over into a separate component just to make things a little bit easier. So let's copy everything.

[00:49 - 01:05] We'll open up a new create a new file, we'll call it side panel. And don't forget to fork it.

[01:06 - 01:22] And make sure you also put the correct name ending side panel JS. And then what we're going to do is just get rid of all the parts that have nothing to do with the actual side panel.

[01:23 - 01:39] Yep, so anything from the settings pane up and down. And we don't need the placeholder.

[01:40 - 01:57] And instead of calling it app, we're going to call it side panel. And then just clean up things, things that have nothing to do with the actual side panel.

[01:58 - 02:11] We'll just delete those. Perfect.

[02:12 - 02:45] And if we go back into this app, we can refactor our app to look like this. And we'll just import the side panel from the side panel.

[02:46 - 03:01] We can get rid of the side menu items since that's only for that. And let's go ahead and delete that for right now.

[03:02 - 03:12] Perfect. So let's go ahead and let's get rid of this placeholder.

[03:13 - 03:22] It's refreshed, just to make sure everything's working correctly. Okay.

[03:23 - 03:36] And let's add just a few different sections over here. So we're going to create a profile section, a privacy section, and then the two buttons.

[03:37 - 03:56] And we'll just kind of put some placeholder stuff in there for now. Now the thing we're missing right now is our borders dividing the sections, these two sections.

[03:57 - 04:13] And to do to put that on here, let's create a wrapper that goes around everything and call it the form panel. So we'll go const form panel.

[04:14 - 04:22] In fact, I've got it already created. It's just style that div and we're going to go border inline start.

[04:23 - 04:38] We're going to give it a light gray border. That's going to give us that border like we see here.

[04:39 - 04:58] Now, let's take a look at the rest of this. You notice here, we have a border on the top of each of these components, but not on this.

[04:59 - 05:19] So this border is pretty much based on the layout. So what it makes sense that when we have a border that's for layout purposes, even though according to the encapsulated CSS, typically we say, hey, border is part of the actual component self.

[05:20 - 05:44] When the border is for layout purposes, that's the exception. A good rule of thumb is to think, hey, if the border is if the border is only desired in this scenario, but if we were to pull out this as a separate component and put it somewhere else in our app, do we still want that border?

[05:45 - 05:53] If we do, then it deserves to be in this component. Otherwise it should be set by the parent.

[05:54 - 06:14] So let's go ahead and we're going to use a selector made famous by Hayden Pick ering called the lobotomize owl selector. And let's go ahead and I'm just going to create it first and then I'll walk you through it.

[06:15 - 06:20] What it is. So this was already there, but now we have we've seen this before.

[06:21 - 06:24] This is the direct child selector. We've seen this.

[06:25 - 06:38] This is the wild card selector. And then when we put them together with this plus sign in between, this means any element that has a previous element, select that.

[06:39 - 06:59] So we're talking about any element that's a direct child to this form panel that also has a previous sibling. Another way of saying that basically is basically everything but the first child because the first child doesn't have a previous sibling.

[07:00 - 07:14] So this won't be selected because it doesn't have a sibling that comes before it, but this child and this child will be selected. And then what we're doing was we're giving the block start the top border top.

[07:15 - 07:31] We're giving it a one pixel solid light gray. And you can see we're creating that border in between elements, but we don't have a border up here we have to deal with.

[07:32 - 07:58] So nice thing we're going to do is we're going to worry about just this profile pane and we'll worry about these privacy in this button group last in the next lesson. So let's go ahead and let's add some more markup to this profile section.

[07:59 - 08:09] So we have a section has a header. Oh, yep, and we need to have a low we're bringing in this logo.

[08:10 - 08:35] So let's go ahead and import that in. And what we have is a header with our profile H2 same profile with a subheading .

[08:36 - 09:00] And then we have a bunch of input groups there are all the inputs with the label all surrounded by a label and this when you do an input inside of a label like this, you don't have to provide an ID. But when the input is outside of the label, then you have to do an ID and an HTML for the ID.

[09:01 - 09:14] But when it's inside when the input is a child of the label itself, then you don't have to. So we're doing that for the username, the about for the photo.

[09:15 - 09:32] And we're just using a logo for now as a placeholder, the first name last name URL and company. So let's go ahead and start tackling this layout piece by piece.

[09:33 - 09:46] The section that this is all wrapped in needs some padding. So let's go ahead and use the pad box as a section.

[09:47 - 10:07] And let's give it a large large padding. And then the next thing we want to do is stack our header.

[10:08 - 10:27] We want this to stack and have a consistent getter in between. So let's use our we will and then we also have this upper section and this lower section also needs to be stacked with a with a large cutter.

[10:28 - 10:57] So first of all, let's go ahead and do the header first. We're going to have a this.

[10:58 - 11:18] We're going to inject a stack around inside this pad box here. We're going to give this stack a large getter.

[11:19 - 11:38] So we have a stack here and then each one of these sections is being stacked just to point these out. In fact, just to make it a little bit easier to see these three sections are being stacked on top of each other.

[11:39 - 12:02] So we have a large getter here and then a large getter here. So next thing we want to do is let's just tackle this top area.

[12:03 - 12:12] Let's go ahead and stack the username and this about section. These two user groups need to be stacked on top of each other.

[12:13 - 12:48] So let's do that and with the magic of our copy and paste, I've got that taken care of. Now the other thing we need to do is we need to split this photo section over onto this right hand side.

[12:49 - 13:22] So let's add an extra layer around it and put a split with a large getter and we're going to say fraction auto end. If you remember, that says, hey, this ending section, this section on the right hand side, I want to give it, let it take up as much room as it wants and then leave the rest for here.

[13:23 - 13:36] So we have a split around everything. The left hand side is wrapped in a stack and then we still have this label for our photo on this side.

[13:37 - 13:46] And that's looking pretty good. Now our input groups, you can see they're not really stacking.

[13:47 - 14:15] They're not doing what we would like. So we could do this, we can make this a stack as a label, give it a getter, small, and that works.

[14:16 - 14:26] You can see we're already starting to get some looks the way we want it to. But I don't want to have to do this over and over again.

[14:27 - 14:42] And we could, this is a really good opportunity to refactor this into a much more simple component. So we're going to create a thing called an input group.

[14:43 - 14:53] And it's going to be a component called input group that takes a label and children. And then we're going to return a stack as a label.

[14:54 - 15:03] Oops. And the value that gets put in this label will go here and then whatever is the children will be placed inside.

[15:04 - 15:30] So this will give us the control so that we can always have a label, but we can put whatever we want inside of it. So now we could go ahead and refactor this top section of our profile pane like this.

[15:31 - 15:50] And it just is a little bit simpler and easier to use because we can have our input group give it a label of username and then just put the input in tax area. And if we need to, we have a span and everything gets stacked exactly how we want.

[15:51 - 15:57] So we're like, we've made some major improvements here. Now let's go ahead and tackle this bottom section.

[15:58 - 16:10] And if we look at this, what we need, you can see here, we basically have two columns. Each, these three are taking one column, but this takes up two columns.

[16:11 - 16:25] So for that, let's go ahead and install and import the columns component. So I'm bedrock layout columns.

[16:26 - 16:40] And we're going to import both the columns and column component. And we've already got input groups for these.

[16:41 - 16:59] So let's go ahead and just refactor this whole bottom section like this. So we're going to wrap everything in this columns component.

[17:00 - 17:05] We're going to have it, it take up two columns by default. Everything takes up just one column.

[17:06 - 17:23] So this, these first two, we're not wrapping it in a column at all. And this bottom one, we're not wrapping in a column, but the second, this, sorry, the third one, we're wrapping in a column component and saying span two columns.

[17:24 - 17:31] And that way we can get this URL to take up the entire width. Awesome.

[17:32 - 17:36] So now let's, we've got all the layout we need for this profile section. It's looking great.

[17:37 - 17:48] We just need to clean up some styles. One of those is we have this secondary color on some of these things.

[17:49 - 17:59] So let's create a component called sub label. We're going to just bring that up here.

[18:00 - 18:08] And then we can use that in these sub label areas. Oops.

[18:09 - 18:20] There we go. Now we have that kind of grayer secondary color.

[18:21 - 18:39] Now, the other thing is our inputs are generic and ugly. So let's create a input that fits the, the mock a little bit better.

[18:40 - 18:47] So we got style that input. We're going to have a given a border radius of 0.25 RAM.

[18:48 - 19:02] I like gray border and a text color of 30, 33. So we're going to replace all these inputs.

[19:03 - 19:33] And then this text area, we're going to use input, but then we're going to use it as a text area. So we still have, can you have that consistent styling, but then by saying it, saying it's an input as a text area, it will still be a text area and it does exactly what we want.

[19:34 - 19:36] And there we go. We've got all the styles for our profile section.

[19:37 - 19:38] It's laid out. It's looking great.

[19:39 - 19:48] Look over here, you can see we're, we're, we're almost there. We've basically achieved the layout.

[19:49 - 19:59] We just have one more section and then this button and then we're done. So down at the bottom of this lesson, you can click on the code sandbox.

[20:00 - 20:04] And in the next lesson, we're going to handle our final two areas, the privacy and the