refactor - use of PureComponents to avoid useless re-rendering

.eslintrc.json

@@ -320,7 +320,7 @@
     "react/no-unknown-property": "error",
     "react/no-unused-prop-types": "off",
     "react/prefer-es6-class": "error",
-    "react/prefer-stateless-function": "error",
+    "react/prefer-stateless-function": [1, { "ignorePureComponents": true }],
     "react/prop-types": "off",
     "react/react-in-jsx-scope": "error",
     "react/react-default-props": "off",

fittrackee_client/src/components/Activities/ActivitiesFilter.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 
-export default function ActivitiesList (props) {
-  const { loadActivities, sports, updateParams } = props
+export default class ActivitiesFilter extends React.PureComponent {
+  render() {
+    const { loadActivities, sports, updateParams } = this.props
     return (
       <div className="card">
         <div className="card-body activity-filter">
@@ -174,3 +175,4 @@ export default function ActivitiesList (props) {
       </div>
     )
   }
+}

fittrackee_client/src/components/Activities/ActivitiesList.jsx

@@ -4,8 +4,9 @@ import { Link } from 'react-router-dom'
 
 import { getDateWithTZ } from '../../utils'
 
-export default function ActivitiesList (props) {
-  const { activities, sports, user } = props
+export default class ActivitiesList extends React.PureComponent {
+  render() {
+    const { activities, sports, user } = this.props
     return (
       <div className="card  activity-card">
         <div className="card-body">
@@ -59,3 +60,4 @@ export default function ActivitiesList (props) {
       </div>
     )
   }
+}

fittrackee_client/src/components/NavBar/index.jsx

@@ -4,8 +4,9 @@ import { Link } from 'react-router-dom'
 
 import { apiUrl } from '../../utils'
 
-
-function NavBar(props) {
+class NavBar extends React.PureComponent {
+  render() {
+    const { user } = this.props
     return (
       <header>
         <nav className="navbar navbar-expand-lg navbar-light bg-light">
@@ -22,7 +23,10 @@ function NavBar(props) {
             >
               <span className="navbar-toggler-icon" />
             </button>
-          <div className="collapse navbar-collapse" id="navbarSupportedContent">
+            <div
+              className="collapse navbar-collapse"
+              id="navbarSupportedContent"
+            >
               <ul className="navbar-nav mr-auto">
                 <li className="nav-item">
                   <Link
@@ -34,7 +38,7 @@ function NavBar(props) {
                     Dashboard
                   </Link>
                 </li>
-              {props.user.isAuthenticated && (
+                {user.isAuthenticated && (
                   <li className="nav-item">
                     <Link
                       className="nav-link"
@@ -46,7 +50,7 @@ function NavBar(props) {
                     </Link>
                   </li>
                 )}
-              {props.user.isAuthenticated && (
+                {user.isAuthenticated && (
                   <li className="nav-item">
                     <Link
                       className="nav-link"
@@ -58,7 +62,7 @@ function NavBar(props) {
                     </Link>
                   </li>
                 )}
-              {/* {props.user.admin && ( */}
+                {/* {user.admin && ( */}
                   {/* <li className="nav-item"> */}
                     {/* <Link */}
                       {/* className="nav-link" */}
@@ -72,7 +76,7 @@ function NavBar(props) {
                 {/* )} */}
               </ul>
               <ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
-              {!props.user.isAuthenticated && (
+                {!user.isAuthenticated && (
                   <li className="nav-item">
                     <Link
                       className="nav-link"
@@ -84,7 +88,7 @@ function NavBar(props) {
                     </Link>
                   </li>
                 )}
-              {!props.user.isAuthenticated && (
+                {!user.isAuthenticated && (
                   <li className="nav-item">
                     <Link
                       className="nav-link"
@@ -96,15 +100,15 @@ function NavBar(props) {
                     </Link>
                   </li>
                 )}
-              {props.user.picture === true && (
+                {user.picture === true && (
                   <img
                     alt="Avatar"
-                  src={`${apiUrl}users/${props.user.id}/picture` +
+                    src={`${apiUrl}users/${user.id}/picture` +
                     `?${Date.now()}`}
                     className="img-fluid App-nav-profile-img"
                   />
                 )}
-              {props.user.isAuthenticated && (
+                {user.isAuthenticated && (
                   <li className="nav-item">
                     <Link
                       className="nav-link"
@@ -112,11 +116,11 @@ function NavBar(props) {
                         pathname: '/profile',
                       }}
                     >
-                    {props.user.username}
+                      {user.username}
                     </Link>
                   </li>
                 )}
-              {props.user.isAuthenticated && (
+                {user.isAuthenticated && (
                   <li className="nav-item">
                     <Link
                       className="nav-link"
@@ -135,6 +139,7 @@ function NavBar(props) {
       </header>
     )
   }
+}
 
 export default connect(
   state => ({