caremyway-client/src/components/Navbar.jsx
Alexander Wong 63b523a8a4
shift stub
2018-04-18 13:05:56 -06:00

101 lines
2.8 KiB
JavaScript

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>
)}
<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);