refactor - use of PureComponents to avoid useless re-rendering
This commit is contained in:
Sam
@ -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>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user