Facility Card Performance Improvements

making the selected facility a state property of card container
adding react-addons-perf to the dev bundle

package-lock.json

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

package.json

@@ -46,6 +46,7 @@
     "node-sass": "^4.9.0",
     "optimize-css-assets-webpack-plugin": "^4.0.2",
     "postcss-loader": "2.0.6",
+    "react-addons-perf": "^15.4.2",
     "sass-loader": "^7.0.2",
     "style-loader": "^0.18.2",
     "sw-precache-webpack-plugin": "0.11.3",

src/components/CardContainer.js

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

src/containers/FacilityCard.js

@@ -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 = () => {