From ab8d6409565e7b0dcd5d1bf8ad049064c4ecc4b3 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 9 Jan 2019 12:45:05 +0100
Subject: [PATCH] refactor to avoid useless re-rendering in NavBar

---
 .../src/components/NavBar/index.jsx           | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

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