Navigation component handling logout

index.js

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-apollo';
import { push } from 'react-router-redux';
import { Link, IndexLink } from 'react-router';

import * as authActionCreators from 'actions/auth';
import { deleteToken } from 'mutations/auth';

import styles from './styles.css';

import dashboardIcon from './images/dashboard.svg';
import profileIcon from './images/profile.svg';
import coursesIcon from './images/courses.svg';

class Navigation extends Component {
  constructor() {
    super();
    this.onLogoutClick = this.onLogoutClick.bind(this);
  }

  onLogoutClick() {
    this.props.mutations.deleteToken(this.props.token)
      .then(({ errors, data }) => {
        if (data.deleteToken) {
          localStorage.removeItem('languafy.token');
          this.props.actions.logout();
          this.props.actions.push('/login');
        } else if (errors) {
          // TODO: Error Handling
        }
      });
  }

  render() {
    return (
      <nav className={styles.navigation} role="navigation">
        <ul className={styles.navigationList}>
          <li className={styles.navigationItem}>
            <IndexLink className={styles.navigationLink} activeClassName={styles.isActive} to="/">
              <svg className={styles.navigationLinkIcon}>
                <use xlinkHref={dashboardIcon} />
              </svg>
              Dashboard
            </IndexLink>
          </li>
          <li className={styles.navigationItem}>
            <Link className={styles.navigationLink} activeClassName={styles.isActive} to="/courses">
              <svg className={styles.navigationLinkIcon}>
                <use xlinkHref={coursesIcon} />
              </svg>
              Courses
            </Link>
          </li>
          <li className={styles.navigationItem}>
            <Link className={styles.navigationLink} activeClassName={styles.isActive} to="/profile">
              <svg className={styles.navigationLinkIcon}>
                <use xlinkHref={profileIcon} />
              </svg>
              Profile
            </Link>
          </li>
          <li className={styles.navigationItem}>
            {this.props.isAuthenticated
              ? <button className={styles.navigationLink} onClick={this.onLogoutClick}>
                Logout
              </button>
              : ''
            }
          </li>
        </ul>
      </nav>
    );
  }
}

Navigation.propTypes = {
  actions: React.PropTypes.object,
  isAuthenticated: React.PropTypes.bool,
  isAuthenticating: React.PropTypes.bool,
  location: React.PropTypes.object,
  mutations: React.PropTypes.object,
  token: React.PropTypes.string,
};


const mapStateToProps = (state) => ({
  isAuthenticating: state.auth.isAuthenticating,
  isAuthenticated: state.auth.isAuthenticated,
  statusText: state.auth.statusText,
  token: state.auth.token,
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({ ...authActionCreators, push }, dispatch),
});

const mapMutationsToProps = () => ({
  deleteToken,
});

const NavigationWithData = connect({
  mapStateToProps,
  mapDispatchToProps,
  mapMutationsToProps,
  options: { pure: false },
})(Navigation);

export default NavigationWithData;