import React, { Component } from 'react';
import { Link } from 'react-router'

export default class NavBar extends Component {

    constructor(props) {
        super(props);

        this.state = {
            authenticated: true
        }
    }

    render() {
        return (
            <ul className="nav__list">

                { this.renderNavItems() }

            </ul>
        )
    }

    renderNavItems() {
        if (this.state.authenticated) {
            return (
                <span>
                    <li className="nav__item">
                        <Link to="/florence/collections" activeClassName="selected" className="nav__link">Collections</Link>
                    </li>

                    <li className="nav__item">
                        <a className="nav__link">Publishing queue</a>
                    </li>

                    <li className="nav__item">
                        <a className="nav__link">Reports</a>
                        </li>

                        <li className="nav__item">
                        <a className="nav__link">Users and access</a>
                    </li>

                    <li className="nav__item">
                        <a className="nav__link">Teams</a>
                    </li>

                    <li className="nav__item">
                        <a className="nav__link">Logout</a>
                    </li>
                </span>
            )
        } else {
            return (
                <li className="nav__item">
                    <a className="nav__link">Login</a>
                </li>
            )
        }
    }

}
import React, { Component } from 'react';
import { Link } from 'react-router'
import { connect } from 'react-redux'

class NavBar extends Component {

    constructor(props) {
        super(props);

    }

    render() {
        return (
            <ul className="nav__list">

                { this.renderNavItems() }

            </ul>
        )
    }

    renderNavItems() {
        if (this.props.isAuthenticated) {
            return (
                <span>
                    <li className="nav__item">
                        <Link to="/florence/collections" activeClassName="selected" className="nav__link">Collections</Link>
                    </li>

                    <li className="nav__item">
                        <a className="nav__link">Publishing queue</a>
                    </li>

                    <li className="nav__item">
                        <a className="nav__link">Reports</a>
                        </li>

                        <li className="nav__item">
                        <a className="nav__link">Users and access</a>
                    </li>

                    <li className="nav__item">
                        <a className="nav__link">Teams</a>
                    </li>

                    <li className="nav__item">
                        <a className="nav__link">Logout</a>
                    </li>
                </span>
            )
        } else {
            return (
                <li className="nav__item">
                    <a className="nav__link">Login</a>
                </li>
            )
        }
    }

}

function mapStateToProps(state) {
    const isAuthenticated = state.state.user.isAuthenticated;

    return {
        isAuthenticated
    }
}
export default connect(mapStateToProps)(NavBar);
Use mapStateToProps to allow checking if user is authenticated
Use mapStateToProps to allow checking if user is authenticated


Former-commit-id: 8f66bdcc2058c4aae92d764b31de7b1fdb464422
Former-commit-id: c730a300e5db246064d2bb91eb5f8b5b15339e6c
Former-commit-id: 12c0fab3a752627d4ae1bd9d2d4123a10b38bb84