Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor to avoid useless re-rendering in NavBar

Browse Source
This commit is contained in:
Sam
2019-01-09 12:45:05 +01:00
parent 18df5b994a
commit ab8d640956
1 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
fittrackee_client/src/components/NavBar/index.jsx
View File

@@ -6,7 +6,7 @@ import { apiUrl } from '../../utils'
class NavBar extends React.PureComponent { class NavBar extends React.PureComponent {
render() { render() {
const { user } = this.props const { id, isAuthenticated, picture, username } = this.props
return ( return (
<header> <header>
<nav className="navbar navbar-expand-lg navbar-light bg-light"> <nav className="navbar navbar-expand-lg navbar-light bg-light">
@@ -38,7 +38,7 @@ class NavBar extends React.PureComponent {
Dashboard Dashboard
</Link> </Link>
</li> </li>
{user.isAuthenticated && ( {isAuthenticated && (
<li className="nav-item"> <li className="nav-item">
<Link <Link
className="nav-link" className="nav-link"
@@ -50,7 +50,7 @@ class NavBar extends React.PureComponent {
</Link> </Link>
</li> </li>
)} )}
{user.isAuthenticated && ( {isAuthenticated && (
<li className="nav-item"> <li className="nav-item">
<Link <Link
className="nav-link" className="nav-link"
@@ -76,7 +76,7 @@ class NavBar extends React.PureComponent {
{/* )} */} {/* )} */}
</ul> </ul>
<ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex"> <ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
{!user.isAuthenticated && ( {!isAuthenticated && (
<li className="nav-item"> <li className="nav-item">
<Link <Link
className="nav-link" className="nav-link"
@@ -88,7 +88,7 @@ class NavBar extends React.PureComponent {
</Link> </Link>
</li> </li>
)} )}
{!user.isAuthenticated && ( {!isAuthenticated && (
<li className="nav-item"> <li className="nav-item">
<Link <Link
className="nav-link" className="nav-link"
@@ -100,15 +100,15 @@ class NavBar extends React.PureComponent {
</Link> </Link>
</li> </li>
)} )}
{user.picture === true && ( {picture === true && (
<img <img
alt="Avatar" alt="Avatar"
src={`${apiUrl}users/${user.id}/picture` + src={`${apiUrl}users/${id}/picture` +
`?${Date.now()}`} `?${Date.now()}`}
className="img-fluid App-nav-profile-img" className="img-fluid App-nav-profile-img"
/> />
)} )}
{user.isAuthenticated && ( {isAuthenticated && (
<li className="nav-item"> <li className="nav-item">
<Link <Link
className="nav-link" className="nav-link"
@@ -116,11 +116,11 @@ class NavBar extends React.PureComponent {
pathname: '/profile', pathname: '/profile',
}} }}
> >
{user.username} {username}
</Link> </Link>
</li> </li>
)} )}
{user.isAuthenticated && ( {isAuthenticated && (
<li className="nav-item"> <li className="nav-item">
<Link <Link
className="nav-link" className="nav-link"
@@ -142,7 +142,10 @@ class NavBar extends React.PureComponent {
} }
export default connect( export default connect(
state => ({ ({ user }) => ({
user: state.user, id: user.id,
isAuthenticated: user.isAuthenticated,
picture: user.picture,
username: user.username,
}) })
)(NavBar) )(NavBar)