You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.1 KiB
77 lines
2.1 KiB
import React, { Component } from "react"; |
|
import { connect } from "react-redux"; |
|
import { Link } from "react-router-dom"; |
|
import { Dropdown, Menu } from "semantic-ui-react"; |
|
|
|
import { sendGetSelfUserRequest } 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(sendGetSelfUserRequest()); |
|
} |
|
} |
|
|
|
dispatchLogoutRequest = () => { |
|
this.props.dispatch(sendLogoutRequest()); |
|
}; |
|
|
|
render() { |
|
const { userToken } = this.props; |
|
return ( |
|
<NavbarView |
|
isAuthenticated={!!userToken} |
|
dispatchLogoutRequest={this.dispatchLogoutRequest} |
|
/> |
|
); |
|
} |
|
} |
|
|
|
function mapStateToProps(state) { |
|
return { |
|
userToken: state.auth.userToken, |
|
selfUser: state.user.selfUser |
|
}; |
|
} |
|
|
|
const NavbarView = ({ isAuthenticated, dispatchLogoutRequest }) => ( |
|
<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> |
|
<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);
|
|
|