From 18df5b994adb34324c3c0143b8da1a67e622bea7 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 9 Jan 2019 12:07:57 +0100
Subject: [PATCH] refactor - use of PureComponents to avoid useless
 re-rendering

---
 .eslintrc.json                                |   2 +-
 .../Activities/ActivitiesFilter.jsx           | 330 +++++++++---------
 .../components/Activities/ActivitiesList.jsx  |  36 +-
 .../src/components/NavBar/index.jsx           | 247 ++++++-------
 4 files changed, 312 insertions(+), 303 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 5bbb54c8..48b39fbf 100644
--- a/.eslintrc.json
+++ b/.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",
diff --git a/fittrackee_client/src/components/Activities/ActivitiesFilter.jsx b/fittrackee_client/src/components/Activities/ActivitiesFilter.jsx
index 0b9e2119..a78fa2e9 100644
--- a/fittrackee_client/src/components/Activities/ActivitiesFilter.jsx
+++ b/fittrackee_client/src/components/Activities/ActivitiesFilter.jsx
@@ -1,176 +1,178 @@
 import React from 'react'
 
-export default function ActivitiesList (props) {
-  const { loadActivities, sports, updateParams } = props
-  return (
-    <div className="card">
-      <div className="card-body activity-filter">
-        <form onSubmit={event => event.preventDefault()}>
-          <div className="form-group">
-            <label>
-              From:
-              <input
-                className="form-control col-md"
-                name="from"
-                onChange={e => updateParams(e)}
-                type="date"
-              />
-            </label>
-            <label>
-              To:
-              <input
-                className="form-control col-md"
-                name="to"
-                onChange={e => updateParams(e)}
-                type="date"
-              />
-            </label>
-          </div>
-          <div className="form-group">
-            <label>
-              Sport:
-              <select
-                className="form-control input-lg"
-                name="sport_id"
-                onChange={e => updateParams(e)}
-              >
-                <option value="" />
-                {sports.map(sport => (
-                  <option key={sport.id} value={sport.id}>
-                    {sport.label}
-                  </option>
-                ))}
-              </select>
-            </label>
-          </div>
-          <div className="form-group">
-            <label>
-              Distance (km):
-              <div className="container">
-                <div className="row">
-                  <div className="col-5">
-                    <input
-                      className="form-control"
-                      min={0}
-                      name="distance_from"
-                      onChange={e => updateParams(e)}
-                      step="1"
-                      type="number"
-                    />
-                  </div>
-                  <div className="col-2 align-middle text-center">to</div>
-                  <div className="col-5">
-                    <input
-                      className="form-control"
-                      min={0}
-                      name="distance_to"
-                      onChange={e => updateParams(e)}
-                      step="1"
-                      type="number"
-                    />
+export default class ActivitiesFilter extends React.PureComponent {
+  render() {
+    const { loadActivities, sports, updateParams } = this.props
+    return (
+      <div className="card">
+        <div className="card-body activity-filter">
+          <form onSubmit={event => event.preventDefault()}>
+            <div className="form-group">
+              <label>
+                From:
+                <input
+                  className="form-control col-md"
+                  name="from"
+                  onChange={e => updateParams(e)}
+                  type="date"
+                />
+              </label>
+              <label>
+                To:
+                <input
+                  className="form-control col-md"
+                  name="to"
+                  onChange={e => updateParams(e)}
+                  type="date"
+                />
+              </label>
+            </div>
+            <div className="form-group">
+              <label>
+                Sport:
+                <select
+                  className="form-control input-lg"
+                  name="sport_id"
+                  onChange={e => updateParams(e)}
+                >
+                  <option value="" />
+                  {sports.map(sport => (
+                    <option key={sport.id} value={sport.id}>
+                      {sport.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            </div>
+            <div className="form-group">
+              <label>
+                Distance (km):
+                <div className="container">
+                  <div className="row">
+                    <div className="col-5">
+                      <input
+                        className="form-control"
+                        min={0}
+                        name="distance_from"
+                        onChange={e => updateParams(e)}
+                        step="1"
+                        type="number"
+                      />
+                    </div>
+                    <div className="col-2 align-middle text-center">to</div>
+                    <div className="col-5">
+                      <input
+                        className="form-control"
+                        min={0}
+                        name="distance_to"
+                        onChange={e => updateParams(e)}
+                        step="1"
+                        type="number"
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
-            </label>
-          </div>
-          <div className="form-group">
-            <label>
-              Duration:
-              <div className="container">
-                <div className="row">
-                  <div className="col-5">
-                    <input
-                      className="form-control"
-                      name="duration_from"
-                      onChange={e => updateParams(e)}
-                      pattern="^([0-9]*[0-9]):([0-5][0-9])$"
-                      placeholder="hh:mm"
-                      type="text"
-                    />
-                  </div>
-                  <div className="col-2 align-middle text-center">to</div>
-                  <div className="col-5">
-                    <input
-                      className="form-control"
-                      name="duration_to"
-                      onChange={e => updateParams(e)}
-                      pattern="^([0-9]*[0-9]):([0-5][0-9])$"
-                      placeholder="hh:mm"
-                      type="text"
-                    />
+              </label>
+            </div>
+            <div className="form-group">
+              <label>
+                Duration:
+                <div className="container">
+                  <div className="row">
+                    <div className="col-5">
+                      <input
+                        className="form-control"
+                        name="duration_from"
+                        onChange={e => updateParams(e)}
+                        pattern="^([0-9]*[0-9]):([0-5][0-9])$"
+                        placeholder="hh:mm"
+                        type="text"
+                      />
+                    </div>
+                    <div className="col-2 align-middle text-center">to</div>
+                    <div className="col-5">
+                      <input
+                        className="form-control"
+                        name="duration_to"
+                        onChange={e => updateParams(e)}
+                        pattern="^([0-9]*[0-9]):([0-5][0-9])$"
+                        placeholder="hh:mm"
+                        type="text"
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
-            </label>
-          </div>
-          <div className="form-group">
-            <label>
-              Average speed (km/h):
-              <div className="container">
-                <div className="row">
-                  <div className="col-5">
-                    <input
-                      className="form-control"
-                      min={0}
-                      name="ave_speed_from"
-                      onChange={e => updateParams(e)}
-                      step="1"
-                      type="number"
-                    />
-                  </div>
-                  <div className="col-2 align-middle text-center">to</div>
-                  <div className="col-5">
-                    <input
-                      className="form-control"
-                      min={0}
-                      name="ave_speed_to"
-                      onChange={e => updateParams(e)}
-                      step="1"
-                      type="number"
-                    />
+              </label>
+            </div>
+            <div className="form-group">
+              <label>
+                Average speed (km/h):
+                <div className="container">
+                  <div className="row">
+                    <div className="col-5">
+                      <input
+                        className="form-control"
+                        min={0}
+                        name="ave_speed_from"
+                        onChange={e => updateParams(e)}
+                        step="1"
+                        type="number"
+                      />
+                    </div>
+                    <div className="col-2 align-middle text-center">to</div>
+                    <div className="col-5">
+                      <input
+                        className="form-control"
+                        min={0}
+                        name="ave_speed_to"
+                        onChange={e => updateParams(e)}
+                        step="1"
+                        type="number"
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
-            </label>
-          </div>
-          <div className="form-group">
-            <label>
-              Max speed (km/h):
-              <div className="container">
-                <div className="row">
-                  <div className="col-5">
-                    <input
-                      className="form-control"
-                      min={0}
-                      name="max_speed_from"
-                      onChange={e => updateParams(e)}
-                      step="1"
-                      type="number"
-                    />
-                  </div>
-                  <div className="col-2 align-middle text-center">to</div>
-                  <div className="col-5">
-                    <input
-                      className="form-control"
-                      min={0}
-                      name="max_speed_to"
-                      onChange={e => updateParams(e)}
-                      step="1"
-                      type="number"
-                    />
+              </label>
+            </div>
+            <div className="form-group">
+              <label>
+                Max speed (km/h):
+                <div className="container">
+                  <div className="row">
+                    <div className="col-5">
+                      <input
+                        className="form-control"
+                        min={0}
+                        name="max_speed_from"
+                        onChange={e => updateParams(e)}
+                        step="1"
+                        type="number"
+                      />
+                    </div>
+                    <div className="col-2 align-middle text-center">to</div>
+                    <div className="col-5">
+                      <input
+                        className="form-control"
+                        min={0}
+                        name="max_speed_to"
+                        onChange={e => updateParams(e)}
+                        step="1"
+                        type="number"
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
-            </label>
-          </div>
-          <input
-            className="btn btn-primary btn-lg btn-block"
-            onClick={() => loadActivities()}
-            type="submit"
-            value="Filter"
-          />
-        </form>
+              </label>
+            </div>
+            <input
+              className="btn btn-primary btn-lg btn-block"
+              onClick={() => loadActivities()}
+              type="submit"
+              value="Filter"
+            />
+          </form>
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
diff --git a/fittrackee_client/src/components/Activities/ActivitiesList.jsx b/fittrackee_client/src/components/Activities/ActivitiesList.jsx
index acb586ad..ad5187ab 100644
--- a/fittrackee_client/src/components/Activities/ActivitiesList.jsx
+++ b/fittrackee_client/src/components/Activities/ActivitiesList.jsx
@@ -4,13 +4,14 @@ import { Link } from 'react-router-dom'
 
 import { getDateWithTZ } from '../../utils'
 
-export default function ActivitiesList (props) {
-  const { activities, sports, user } = props
-  return (
-    <div className="card  activity-card">
-      <div className="card-body">
-        <table className="table">
-          <thead>
+export default class ActivitiesList extends React.PureComponent {
+  render() {
+    const { activities, sports, user } = this.props
+    return (
+      <div className="card  activity-card">
+        <div className="card-body">
+          <table className="table">
+            <thead>
             <tr>
               <th scope="col" />
               <th scope="col">Workout</th>
@@ -20,12 +21,12 @@ export default function ActivitiesList (props) {
               <th scope="col">Ave. speed</th>
               <th scope="col">Max. speed</th>
             </tr>
-          </thead>
-          <tbody>
-            { sports && activities.map((activity, idx) => (
+            </thead>
+            <tbody>
+            {sports && activities.map((activity, idx) => (
               // eslint-disable-next-line react/no-array-index-key
               <tr key={idx}>
-                <td >
+                <td>
                   <img
                     className="activity-sport"
                     src={sports
@@ -34,11 +35,11 @@ export default function ActivitiesList (props) {
                     alt="activity sport logo"
                   />
                 </td>
-                <td >
+                <td>
                   <Link to={`/activities/${activity.id}`}>
                     {activity.title}
                   </Link>
-                  </td>
+                </td>
                 <td>
                   {format(
                     getDateWithTZ(activity.activity_date, user.timezone),
@@ -53,9 +54,10 @@ export default function ActivitiesList (props) {
                 <td className="text-right">{activity.max_speed} km/h</td>
               </tr>
             ))}
-          </tbody>
-        </table>
+            </tbody>
+          </table>
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
diff --git a/fittrackee_client/src/components/NavBar/index.jsx b/fittrackee_client/src/components/NavBar/index.jsx
index a5acaac5..e9d2467e 100644
--- a/fittrackee_client/src/components/NavBar/index.jsx
+++ b/fittrackee_client/src/components/NavBar/index.jsx
@@ -4,136 +4,141 @@ import { Link } from 'react-router-dom'
 
 import { apiUrl } from '../../utils'
 
-
-function NavBar(props) {
-  return (
-    <header>
-      <nav className="navbar navbar-expand-lg navbar-light bg-light">
-        <div className="container">
-          <span className="navbar-brand">FitTrackee</span>
-          <button
-            className="navbar-toggler"
-            type="button"
-            data-toggle="collapse"
-            data-target="#navbarSupportedContent"
-            aria-controls="navbarSupportedContent"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-          >
-            <span className="navbar-toggler-icon" />
-          </button>
-          <div className="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul className="navbar-nav mr-auto">
-              <li className="nav-item">
-                <Link
-                  className="nav-link"
-                  to={{
-                    pathname: '/',
-                  }}
-                >
-                  Dashboard
-                </Link>
-              </li>
-              {props.user.isAuthenticated && (
+class NavBar extends React.PureComponent {
+  render() {
+    const { user } = this.props
+    return (
+      <header>
+        <nav className="navbar navbar-expand-lg navbar-light bg-light">
+          <div className="container">
+            <span className="navbar-brand">FitTrackee</span>
+            <button
+              className="navbar-toggler"
+              type="button"
+              data-toggle="collapse"
+              data-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent"
+              aria-expanded="false"
+              aria-label="Toggle navigation"
+            >
+              <span className="navbar-toggler-icon" />
+            </button>
+            <div
+              className="collapse navbar-collapse"
+              id="navbarSupportedContent"
+            >
+              <ul className="navbar-nav mr-auto">
                 <li className="nav-item">
                   <Link
                     className="nav-link"
                     to={{
-                      pathname: '/activities/history',
+                      pathname: '/',
                     }}
                   >
-                    Workouts
+                    Dashboard
                   </Link>
                 </li>
-              )}
-              {props.user.isAuthenticated && (
-                <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    to={{
-                      pathname: '/activities/add',
-                    }}
-                  >
-                    <strong>Add workout</strong>
-                  </Link>
-                </li>
-              )}
-              {/* {props.user.admin && ( */}
-                {/* <li className="nav-item"> */}
-                  {/* <Link */}
-                    {/* className="nav-link" */}
-                    {/* to={{ */}
-                      {/* pathname: '/admin', */}
-                    {/* }} */}
-                  {/* > */}
-                    {/* Admin */}
-                  {/* </Link> */}
-                {/* </li> */}
-              {/* )} */}
-            </ul>
-            <ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
-              {!props.user.isAuthenticated && (
-                <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    to={{
-                      pathname: '/register',
-                    }}
-                  >
-                    Register
-                  </Link>
-                </li>
-              )}
-              {!props.user.isAuthenticated && (
-                <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    to={{
-                      pathname: '/login',
-                    }}
-                  >
-                    Login
-                  </Link>
-                </li>
-              )}
-              {props.user.picture === true && (
-                <img
-                  alt="Avatar"
-                  src={`${apiUrl}users/${props.user.id}/picture` +
-                  `?${Date.now()}`}
-                  className="img-fluid App-nav-profile-img"
-                />
-              )}
-              {props.user.isAuthenticated && (
-                <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    to={{
-                      pathname: '/profile',
-                    }}
-                  >
-                    {props.user.username}
-                  </Link>
-                </li>
-              )}
-              {props.user.isAuthenticated && (
-                <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    to={{
-                      pathname: '/logout',
-                    }}
-                  >
-                    Logout
-                  </Link>
-                </li>
-              )}
-            </ul>
+                {user.isAuthenticated && (
+                  <li className="nav-item">
+                    <Link
+                      className="nav-link"
+                      to={{
+                        pathname: '/activities/history',
+                      }}
+                    >
+                      Workouts
+                    </Link>
+                  </li>
+                )}
+                {user.isAuthenticated && (
+                  <li className="nav-item">
+                    <Link
+                      className="nav-link"
+                      to={{
+                        pathname: '/activities/add',
+                      }}
+                    >
+                      <strong>Add workout</strong>
+                    </Link>
+                  </li>
+                )}
+                {/* {user.admin && ( */}
+                  {/* <li className="nav-item"> */}
+                    {/* <Link */}
+                      {/* className="nav-link" */}
+                      {/* to={{ */}
+                        {/* pathname: '/admin', */}
+                      {/* }} */}
+                    {/* > */}
+                      {/* Admin */}
+                    {/* </Link> */}
+                  {/* </li> */}
+                {/* )} */}
+              </ul>
+              <ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
+                {!user.isAuthenticated && (
+                  <li className="nav-item">
+                    <Link
+                      className="nav-link"
+                      to={{
+                        pathname: '/register',
+                      }}
+                    >
+                      Register
+                    </Link>
+                  </li>
+                )}
+                {!user.isAuthenticated && (
+                  <li className="nav-item">
+                    <Link
+                      className="nav-link"
+                      to={{
+                        pathname: '/login',
+                      }}
+                    >
+                      Login
+                    </Link>
+                  </li>
+                )}
+                {user.picture === true && (
+                  <img
+                    alt="Avatar"
+                    src={`${apiUrl}users/${user.id}/picture` +
+                    `?${Date.now()}`}
+                    className="img-fluid App-nav-profile-img"
+                  />
+                )}
+                {user.isAuthenticated && (
+                  <li className="nav-item">
+                    <Link
+                      className="nav-link"
+                      to={{
+                        pathname: '/profile',
+                      }}
+                    >
+                      {user.username}
+                    </Link>
+                  </li>
+                )}
+                {user.isAuthenticated && (
+                  <li className="nav-item">
+                    <Link
+                      className="nav-link"
+                      to={{
+                        pathname: '/logout',
+                      }}
+                    >
+                      Logout
+                    </Link>
+                  </li>
+                )}
+              </ul>
+            </div>
           </div>
-        </div>
-      </nav>
-    </header>
-  )
+        </nav>
+      </header>
+    )
+  }
 }
 
 export default connect(