So really simple stuff actually, and I'll show you how to do it now. So let's close the terminal and let's go to our headernavbarReducer and let's get rid of this initial state. Well, let's change it back to an empty array.

headernavbarReducer.js

const INITIAL_STATE = {
    headerLinks: [],
    navbarLinks: []
}

Excellent, all right so let's get out of here now and we need to dispatch these actions with our action.payload. Okay so really simple, we basically just need to take that data and say hey that data is now action.payload so we just need to dispatch or return an action creator that contains the data we want with headerLinks and headernavbarLinks.

So let's close out of all this junk and let's open up, so we don't really want anything until we open up this page right, so when we go to the account route. So we login and we're brought to account. So we want to do it on this component which we haven't created yet. So let's go to our components and let's create a new folder and let's call it, account and then in there we'll create purchaseHistory.js and then we'll create accountInformation.js. Okay and then in here we just want to import React and component from react and class account information extends Component and render a div in here okay, and then we'll export it.

accountInformation.js

import React, { Component } from 'react';

class AccountInformation extends Component {
    render () {
        return {
            <div>
                account info
            </div>
        }
    }
}

export default AccountInformation;

So now what we need to do is we need to copy this and put it in purchaseHistory and then we need to rename this to purchaseHistory.

purchaseHistory.js

import React, { Component } from 'react';

class PurchaseHistory extends Component {
    render () {
        return {
            <div>
                purchase history
            </div>
        }
    }
}

export default PurchaseHistory;

Okay cool, now we have these two components. What we need to do, is we need to put them in our routes, we want a route for purchase history or really what we want is a route for just like a parent component okay. So we'll make another component in here and call it account.js. Okay so paste that again in here and rename it to just account.

account.js

import React, { Component } from 'react';

class Account extends Component {
    render () {
        return {
            <div>

            </div>
        }
    }
}

export default Account;

Okay, and then we're basically going to navigate through our links right. We're going to do the same thing we're doing it our navbar right. So in our navbar.js we're going to go over our navbarLinks right, and then we're going to if it's active we're going to display green text. We're going to do the same thing except for if it's active we're going to display a certain component.

So let's go ahead and go to account and let's say, here's what we'll do, we'll say in brackets here this.renderContent and then we'll write a function up here called renderContent. Here's what we'll do, we'll just say this.props.navbarLinks.map, and then in account we'll I'm getting ahead of myself here I don't want to do this yet, for now we'll just return an h1.

account.js

import React, { Component } from 'react';

class Account extends Component {
    renderContent () {
        return <h1> content </h1>
    }

    render() {
        return {
            <div>
                { this.renderContent() }
            </div>
        }
    }
}

export default Account;

What we really need to do is just link up this route first. So we've got account.js let's go ahead and link it up in our bootstrap.js. So in our bootstrap.js we need to create another route called account and in here we need a component that is account so let's import account from component's account/account.

bootstrap.js

import Account from './components/account/account';

<Route path='/account' exact component={Account}/>

So now with this code what we should see is it should say something about account, okay it says content.

So what we need to do is we need to set our items up here, okay so we need to develop the action to set this. So since we got those components created, it's a little side track from exactly what I wanted to show you with the actions. So, what we'll do is we'll commit our code and then do that in the next video.

Terminal

git status
git add .
git commit -m "built base structure for account components"

Okay, I'll see you in the next video.

Resources

Source code