Next thing we need to do is fix this, well add in some links here at least, and then add in some functionality. Let's look at our design and see what it wants, okay in here it wants shop and logout. So let's go to our code and let's simply go into our account.js and set that.

Okay, so let's write another array, let's say constant headerLinks is equal to an array. And we want an id on each of these of zero for that one, and then we'll say title is shop I believe and then we want an onClick of history.push logout. Or what we can do rather, this is probably a better approach so we don't have to import history in every single file.

What we can do, is we can just say route or we can say path, and then what we can do is say we want this to go to the shop okay and let's put a slash. We could implement the slash in the component but it's nice to make it look more like a route when we're typing it.

Now let's copy this and do one for log out and we'll just have it push to the home screen for now. Now what we need to do is make the title Logout, put the id is one and we're good.

account.js

const headerLinks = [
    {
        _id: 0,
        title: 'Shop',
        plath: '/shop'
    },
    {
        _id: 1,
        title: 'Logout',
        path: '/'
    }
]

Now let's pass it into headerLinks so let's say headerLinks and we're good.

account.js

this.props.setHeaderLinks(headerLinks);
this.props.setNavbarLinks(navbarLinks);

Now what we need to do is we need to go to our application in Chrome and we need to check it out. Okay, it looks like we need to reload the page, looks like we've got our links. So shop it says trying to switch tabs.

We obviously need to change that and that. So let's go into our code and let's go into header.js and instead of saying tying to switch tab just say history.push and then we'll pass in link.path. Okay, super simple. Now all we need to do is say import history so I'll say import history from ../../history. Awesome this should work, let's go try it out.

header.js

import history from '../../history';

<a className='header__link' key={index} onClick={() => history.push(link.path)}>
    {link.title}
</a>

All right let's hit shop, and that brings us to shop and you'll see Logout brings us to our login screen again. Now that's all functional, everything's working although now we have a problem and it's that we can see everything here like we still have our taps.

So what we need to do is basically go back to our sign in components sign in and sign up and send them back to nothing. So let's go do that really quick, let's go into signup.js and on componentDidMount, now let's just say we're going to have to import connect from react-redux and sign up is equal to connect and no mapStateToProps but then we want our actions and signup.

Now this is probably a really good high order component we could build. We can basically extend this functionality to class we want to do. Say without links or something right, but we're not going to spend the time to do that. Okay, let's import the actions and let's call this, so this.props.setHeaderLinks it's going to be an empty array this.props.setNavbarLinks empty array.

signup.js

import React, { Component } from 'react';

import SignUpForm from './signupForm';
import PageTitle from '../pageTitle';

import { connect } from 'react-redux';
import * as actions from '../../actions';

class SignUp extends Component {

    componentDidMount() {
        this.props.setHeaderLinks([]);
        this.props.setNavbarLinks([]);
    }

    onSubmit = (fields) => {
        console.log(fields);
    }

    render() {
        return (
            <div className='sign-up'>
                <PageTitle className='sign-up__page-title' title='Register' />
                <SignUpForm onSubmit={this.onSubmit} className='sign-up__form' />
            </div>
        )
    }
}

SignUp = connect(null, actions)(SignUp);

export default SignUp;

Again this will be a great moment to go and build a high order component to basically just say hey this component does not require links.

Okay, so let's go to our application and let's go to localhost:3000 go to login, we have our information, now let's go to sign up and they're gone okay, Logout, sign up and gone. So what we need to do now, is we just need to basically put this all in our signing now. So let's copy our componentDidMount, now let's head over to signin.js and paste it in here.

signin.js

componentDidMount() {
    this.props.setHeaderLinks([]);
    this.props.setNavbarLinks([]);
}

Let's go back to signup.js let's take our connect in actions and let's put it in signin.js in the same place

import * as actions from '../../actions';

And at the bottom let's just connect it with connect. Okay, so same thing down here except for obviously with SignIn, okay so super simple, just go out and get that all in, it's the same exact thing we did in signup, but we're doing that with SignIn, let's try it out now. We can go back, let's login right, we have our information here we can switch between our components, let's log out and you'll see it's gone, create an account and you'll see it's gone and we're good.

So all we need to do now is basically develop these components, PurchaseHistory and AccountInformation and then move on to the shop. So yeah we're good to go, let's go ahead and commit our code and then hop into components.

Terminal

git status
git add .
git commit -m "finished header feature"

I'll see you in the next video

Resources

Source code