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

refactor - use of PureComponents to avoid useless re-rendering

Browse Source
This commit is contained in:
Sam 2019-01-09 12:07:57 +01:00
parent 3fdbca0404
commit 18df5b994a
4 changed files with 312 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -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",

6
fittrackee_client/src/components/Activities/ActivitiesFilter.jsx
View File

@ -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">
@ -173,4 +174,5 @@ export default function ActivitiesList (props) {
</div>
</div>
)
}
}

12
fittrackee_client/src/components/Activities/ActivitiesList.jsx
View File

@ -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">
@ -22,10 +23,10 @@ export default function ActivitiesList (props) {
</tr>
</thead>
<tbody>
{ sports && activities.map((activity, idx) => (
{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,7 +35,7 @@ export default function ActivitiesList (props) {
alt="activity sport logo"
/>
</td>
<td >
<td>
<Link to={`/activities/${activity.id}`}>
{activity.title}
</Link>
@ -58,4 +59,5 @@ export default function ActivitiesList (props) {
</div>
</div>
)
}
}

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

@ -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"
@ -134,6 +138,7 @@ function NavBar(props) {
</nav>
</header>
)
}
}
export default connect(