caremyway-client/src/components/Navbar.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Dropdown, Menu } from "semantic-ui-react";

import { getSelfUserRequest } from "../actions/user/saga.actions";
import { sendLogoutRequest } from "../actions/auth/saga.actions";

class Navbar extends Component {
  componentWillMount() {
    const { dispatch, userToken, selfUser } = this.props;
    // If the user token exists and the self user object isn't loaded, dispatch
    if (userToken && Object.keys(selfUser).length === 0) {
      dispatch(getSelfUserRequest());
    }
  }

  dispatchLogoutRequest = () => {
    this.props.dispatch(sendLogoutRequest());
  };

  render() {
    const { userToken, selfUser } = this.props;
    return (
      <NavbarView
        isAuthenticated={!!userToken}
        dispatchLogoutRequest={this.dispatchLogoutRequest}
        selfUser={selfUser}
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    userToken: state.auth.userToken,
    selfUser: state.user.selfUser
  };
}

const NavbarView = ({ isAuthenticated, dispatchLogoutRequest, selfUser }) => (
  <Menu>
    <Menu.Item as={Link} to="/">
      Caremyway
    </Menu.Item>
    <Menu.Item as={Link} to="/about">
      About
    </Menu.Item>
    {!isAuthenticated && (
      <Menu.Menu position="right">
        <Menu.Item as={Link} to="/auth/login">
          Login
        </Menu.Item>
        <Menu.Item as={Link} to="/auth/register">
          Register
        </Menu.Item>
      </Menu.Menu>
    )}
    {!!isAuthenticated && (
      <Menu.Menu position="right">
        <Dropdown item text="Account">
          <Dropdown.Menu>
            <Dropdown.Item as={Link} to="/user/profile">
              My Profile
            </Dropdown.Item>
            {selfUser.client && (
              <Dropdown.Item as={Link} to="/user/profile/client/worktypes">
                Work Types
              </Dropdown.Item>
            )}
            {selfUser.client && (
              <Dropdown.Item as={Link} to="/user/profile/client/providers">
                Providers
              </Dropdown.Item>
            )}
            {selfUser.client && (
              <Dropdown.Item as={Link} to="/user/profile/client/shifts">
                Shifts
              </Dropdown.Item>
            )}
            {selfUser.provider && (
              <Dropdown.Item as={Link} to="/user/profile/provider/clients">
                Clients
              </Dropdown.Item>
            )}
            {selfUser.provider && (
              <Dropdown.Item as={Link} to="/user/profile/provider/shifts">
                Shifts
              </Dropdown.Item>
            )}
            <Dropdown.Item as={Link} to="/auth/settings">
              Settings
            </Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item onClick={dispatchLogoutRequest}>
              Logout
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Menu.Menu>
    )}
  </Menu>
);

export default connect(mapStateToProps)(Navbar);