Commit c413e7cc authored by Mattias J Duffy's avatar Mattias J Duffy

Facility Card Performance Improvements

making the selected facility a state property of card container
adding react-addons-perf to the dev bundle
parent e66f869c
......@@ -8363,7 +8363,7 @@
},
"magic-string": {
"version": "0.22.5",
"resolved": "http://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
"integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==",
"requires": {
"vlq": "^0.2.2"
......@@ -11533,6 +11533,16 @@
"prop-types": "^15.5.10"
}
},
"react-addons-perf": {
"version": "15.4.2",
"resolved": "https://registry.npmjs.org/react-addons-perf/-/react-addons-perf-15.4.2.tgz",
"integrity": "sha1-EQvc9cRZxPd8uF7WNLzTOXU2ODs=",
"dev": true,
"requires": {
"fbjs": "^0.8.4",
"object-assign": "^4.1.0"
}
},
"react-autosuggest": {
"version": "9.3.4",
"resolved": "https://registry.npmjs.org/react-autosuggest/-/react-autosuggest-9.3.4.tgz",
......
......@@ -2,14 +2,20 @@ import React from 'react';
import FacilityCard from '../containers/FacilityCard';
import Grid from 'material-ui/Grid';
const CardContainer = ({searchTerm, campusRegion, facilities}) => {
const filterCards = (facility) => {
if (facility.facility_location.campus_region.toLowerCase() !== campusRegion.toLowerCase()) {
class CardContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedSlug: null
};
}
filterCards = (facility) => {
if (facility.facility_location.campus_region.toLowerCase() !== this.props.campusRegion.toLowerCase()) {
return false;
}
const lSearchTerm = searchTerm.toLowerCase();
const lSearchTerm = this.props.searchTerm.toLowerCase();
const facilityName = facility.facility_name.toLowerCase();
const facilityLocation = facility.facility_location.building.toLowerCase();
const facilityCategory = facility.facility_category.name.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
......@@ -29,17 +35,28 @@ const CardContainer = ({searchTerm, campusRegion, facilities}) => {
facilityCategory.includes(lSearchTerm) || hasTag || friendlyName.includes(lSearchTerm);
};
return (
<Grid container className={'card-container-root'} spacing={24} justify={'center'} alignItems={'flex-end'}>
{facilities.filter(filterCards).map((item) => {
return (
<Grid key={item.slug} item>
<FacilityCard facility={item} facilities={facilities} />
</Grid>
);
})}
</Grid>
);
};
handleFacilityClick = (slug) => {
const newValue = (slug !== this.state.selectedSlug) ? slug : null;
this.setState({
selectedSlug: newValue
});
}
render() {
const {facilities} = this.props;
return (
<Grid container className={'card-container-root'} spacing={24} justify={'center'} alignItems={'flex-end'}>
{facilities.filter(this.filterCards).map((item) => {
const isSelected = (item.slug === this.state.selectedSlug);
return (
<Grid key={item.slug} item>
<FacilityCard facility={item} facilities={facilities} isSelected={isSelected} setSelected={this.handleFacilityClick}/>
</Grid>
);
})}
</Grid>
);
}
}
export default CardContainer;
\ No newline at end of file
......@@ -13,32 +13,52 @@ import classNames from 'classnames';
import FacilityDialog from '../components/FacilityDialog';
import FacilityUtils from '../utils/facilityUtils';
import ReactPiwik from 'react-piwik';
import Perf from 'react-addons-perf';
class FacilityCard extends React.Component {
constructor(props) {
super(props);
this.state = {
isFavorite: false,
isSelected: false,
modified: null
modified: null,
};
}
shouldComponentUpdate = (nextProps, nextState) => {
if (this.props.isSelected !== nextProps.isSelected) {
return true;
}
const dateModified = Date(nextProps.facility.modified);
if (dateModified !== this.state.modified) {
this.setState({
modified: dateModified
});
return true;
}
return false;
}
handleCardClick = () => {
this.props.setSelected(this.props.facility.slug);
const newState = !this.props.isSelected;
ReactPiwik.push(['trackEvent', 'card-action', 'click']);
const isSelected = this.props.selectedFacility.slug === this.props.facility.slug;
this.props.setSelectedFacility(isSelected ? null : this.props.facility);
this.props.setSidebar(!isSelected);
};
setTimeout(() => {
this.props.setSelectedFacility(newState ? this.props.facility : null);
this.props.setSidebar(newState);
}, 0);
};
render() {
const {facility, facilities, favorites, selectedFacility, addFavoriteFacility, removeFavoriteFacility} = this.props;
const isSelected = selectedFacility.slug === facility.slug;
const {facility, facilities, favorites, addFavoriteFacility, removeFavoriteFacility, isSelected} = this.props;
// const isSelected = selectedFacility.slug === facility.slug;
const {isFavorite} = this.state;
const dayOfWeek = [6, 0, 1, 2, 3, 4, 5][new Date().getDay()];
const getDisplayHours = () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment