I'm gonna switch over to our application and make sure I refresh it because I've stopped and restarted the server since the last video. And just to perform a few cleanup items, let's remove this logged in text because we now have a better way of seeing that state so I'm gonna go into the app component. And down in the JSX, I'm gonna take this loggedInStatus and delete that and just verify that that is now working, and yes, it is and that is back to looking good.

Now don't worry if the sign out looks ugly, that is on purpose. Later on, in the course we're going to integrate Font Awesome and we're gonna have this nice little sign-out link so don't worry about that right now. The next thing that I wanna do is create a portfolio manager container so this is gonna be the component that wraps up all of the functionality for our portfolio manager.

It's going to hold the form, it's going to update the state, those kinds of things. So let's create that and then we can also move our blog link out of those authorized items or those authorized routes function and then we can put the portfolio manager in there and then eventually we'll put the blog manager when we build that. So let's start that and let's do that in this guide.

So I'm going to first create that file so if you go into portfolio. Well actually let's go here, let's see the best spot for it before we just start writing code, it's usually good to take a look at that. We can see all of the different items we have here and we have two places that I think it would be logical to put our portfolio manager container.

We could put it in the portfolio directory here, but we also have this pages directory and I think actually it makes more sense to put it in here because I look at a page as an actual page of the application that a user would go to and all of these other directories are more like partials. So if you look inside a portfolio, we have the portfolio-container, we have portfolio-detail and portfolio-item. When we get to build out the portfolio-detail, it technically is a page so we'll most likely move it into the pages as well.

Now if you're building out a very large application that has hundreds of pages, then we would get even more detail so we would do something like pages and then we'd create another directory inside of pages called portfolio, and then we could put multiple portfolio pages in there.

But this application isn't quite big enough to really require that. So I'm gonna go inside of pages and I will create something called portfolio-manager.js and this is gonna be our container component and I'm gonna use my user snippet and now we have our class component. Because this is going to manage state, it's gonna have to have a few different component lifecycle methods so this should be a class component.

So I'm going to call this PortfolioManager and then inside of here let's just put an h1 tag in here just so we can test it out to make sure it's working and then so I don't get prettier, giving me any annoying kind of folding where it puts the div and PortfolioManager on one line, I'm just going to put it there twice and now we have the right kinda structure that we're looking for.

portfolio-manager.js

import React, { Component } from "react";

export default class PortfolioManager extends Component {
  render() {
    return (
      <div>
        <h1>PortfolioManager</h1>
        <h1>PortfolioManager</h1>
      </div>
    );
  }
}

And so with all of this in place, we can now go back to the app component, and let's add the route to the portfolio manager. So I'm gonna scroll all the way up to the top to import it first so right above PortfolioDetail, but you could put it anywhere you want. I'm gonna say PortfolioManager and this is inside of pages and then portfolio-manager, hit save, and then we are going to add a route.

import PortfolioManager from "./pages/portfolio-manager";

So coming down into our switch statement and you can put this anywhere that you want. We have this spot right here right next to the portfolio. I usually like to keep similar features next to each other so I'm gonna put it here, but you notice we also have this authorizedPages function, but I don't wanna put it in there first because if something's broken, I don't wanna worry about it being in the authorizedPages, I first wanna just make sure that this works.

So let's just create this route, I'm going to have it point to portfolio-manager and this is going to be the PortfolioManager component, hit save and now we should be able to go to it.

<Route path="/portfolio-manager" component={PortfolioManager} />

We won't see it in the navbar yet, we still need to add it there, but if I... let me hit refresh. Now if I go to /portfolio-manager, you can see we have our two h1 tags so that's working.

So now that we have that, now let's add it into our authorized check so I'm gonna get rid of it from the route definitions and now we're gonna put it inside of this array. So right now remember I told you that we had the blog there just for the purpose of being able to have something we could test out for our authorized pages, but now we can get rid of this and we can put it down where belongs because we want everyone to access the blog, not just people that are logged in which will pretty much just be you.

So I'm going to take the blog and I can put it anywhere, I'll just put it right after this contact me. So now we have updated our authorizedPages function so it should only show or only create that portfolio manager route if the user's logged in. So let's test this out first, and so right now we can see we still have access to it.

If I click sign out, it has redirected us to the homepage which is the behavior we'd expect. Now if I try to go to portfolio manager, it can't find that page so it's working so we have our route guard in place and now it's actually guarding the correct route.

So the very last thing that we're gonna do in this guide is to add this into the navbar. So let's go into the navigation container here and then let's go and see and we already have a dynamicLink for this so let's see exactly how we can build this in. So if you go down into the JSX, you can see that we have this dynamicLink right here and we're passing in these values up top.

We still have them hardcoded into the dynamicLink so let's update that and let's also add the blog so it's no longer in that conditional. So I'm going to create a new navLink here. This is gonna point to blog and it's gonna be called Blog. And then here in this dynamicLink, I want to have this point to the portfolio-manager and it's gonna be called portfolio manager.

And then moving all the way up here, you can see we still have this hardcoded because we only had one before. Now let's actually make it into something dynamic. So now instead of just hard coding blog in here, I'm going to call LinkText and then inside of the to, I'm not going to be saying /blog, I'm going to just pass in the route directly.

navigation-container.js

<div className="nav-link-wrapper">
  <NavLink to={route} activeClassName="nav-link-active">
    {linkText}
  </NavLink>
</div>

Okay, so now that we have all of this, this should work, let's go test this out. So we are not logged in and so we no longer see that route, but we do have access to the blog so that is all working properly. And if we log in, now we see... Oh, it says LinkText. I forgot one little thing, linkText needs to be wrapped up in curly brackets, okay, now hit save, and now it says, portfolio manager.

So this is working exactly the way we would want it to. It's giving us the right type of behavior and it is hidden both visually to the user if they're not signed in, but also on the route side. So now that we have that portfolio manager in place, now we can start building out that grid.

So as you saw right here we have a two-column grid. We have a large layout here, a large column on the left-hand side, and then a smaller one on the right-hand side. So in the next guide, we're gonna start building that out.

Resources

• Source Code