favorite rework

making favorites more performant by implementing hover in css and adding state to favorite

src/components/FavoriteButton.js

@@ -10,38 +10,44 @@ class FavoriteButton extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            isHovered: false
+            isFavorite: props.initialState
         };
     }
 
     handleClick = (e) => {
         e.stopPropagation(); //Stops the card from being selected in the sidebar.
-
-        if (this.props.isFavorite) {
+        const newState = !this.state.isFavorite;
+        this.setState({
+            isFavorite: newState
+        });
+        if (!newState) {
             ReactPiwik.push(['trackEvent', 'card-action', 'un-favorite']);
-            this.props.removeFavoriteFacility(this.props.facility.slug);
+            setTimeout(() => {
+                this.props.removeFavoriteFacility(this.props.slug);
+            },0);
         } else {
+            setTimeout(() => {
+                this.props.addFavoriteFacility(this.props.slug);
+            },0);
             ReactPiwik.push(['trackEvent', 'card-action', 'favorite']);
-            this.props.addFavoriteFacility(this.props.facility.slug);
         }
     };
 
 
     render() {
-        const {isHovered} = this.props;
-        if (this.props.isFavorite) {
+        if (this.state.isFavorite) {
             return (<FavoriteIcon onClick={this.handleClick}
                                   className={classNames('favorite-button-heart', 'favorite-button-heart-favorited')} />);
         }
 
         return (<FavoriteBorderIcon onClick={this.handleClick}
-                                    className={classNames('favorite-button-heart', isHovered ? 'favorite-button-heart-hover' : 'favorite-button-heart-no-hover')} />);
+                                    className={classNames('favorite-button-heart')} />);
     }
 }
 
 FavoriteButton.propTypes = {
-    facility: PropTypes.object.isRequired,
-    isFavorite: PropTypes.bool.isRequired,
+    slug: PropTypes.string.isRequired,
+    initialState: PropTypes.bool.isRequired,
     addFavoriteFacility: PropTypes.func.isRequired,
     removeFavoriteFacility: PropTypes.func.isRequired
 };

src/containers/FacilityCard.js

@@ -19,7 +19,9 @@ class FacilityCard extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            isHovered: false
+            isFavorite: false,
+            isSelected: false,
+            modified: null
         };
     }
 
@@ -31,18 +33,6 @@ class FacilityCard extends React.Component {
     };
 
 
-    handleMouseEnter = () => {
-        this.setState({
-            isHovered: true
-        });
-    };
-
-    handleMouseLeave = () => {
-        this.setState({
-            isHovered: false
-        });
-    };
-
 
     render() {
         const {facility, facilities, favorites, selectedFacility, addFavoriteFacility, removeFavoriteFacility} = this.props;
@@ -72,7 +62,7 @@ class FacilityCard extends React.Component {
             facility.facility_location.building;
         return (
             <Card onClick={this.handleCardClick} className={classNames('fc-root', isSelected && 'fc-selected')}
-                  onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} elevation={3}>
+                   elevation={3}>
                 {/*<CardMedia className={'fc-media'}
                           image={'https://gmucampus.files.wordpress.com/2010/09/00southside2.jpg'} />*/}
 
@@ -82,8 +72,8 @@ class FacilityCard extends React.Component {
                 </div>
 
 
-                <FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
-                                addFavoriteFacility={addFavoriteFacility} isHovered={this.state.isHovered}
+                <FavoriteButton slug={facility.slug} initialState={favorites.includes(facility.slug)}
+                                addFavoriteFacility={addFavoriteFacility} isHovered={false}
                                 removeFavoriteFacility={removeFavoriteFacility} />
 
                 <CardContent className={'fc-card-content'}>

src/reducers/ui.js

@@ -52,10 +52,12 @@ const favorites = (state = [], action) => {
     let newState;
     switch (action.type) {
         case ADD_FAVORITE_FACILITY:
+            console.log('facility added');
             newState = [...state, action.slug];
             localStorage.setItem('favorites', JSON.stringify(newState));
             return newState;
         case REMOVE_FAVORITE_FACILITY:
+            console.log('facility removed');
             newState = state.filter((slug) => slug !== action.slug);
             localStorage.setItem('favorites', JSON.stringify(newState));
             return newState;

src/styles/components/favoriteButton.scss

@@ -8,6 +8,7 @@
   width: 24px !important;
   padding: 5px !important;
   cursor: pointer;
+  color: rgba(0, 0, 0, 0);
 }
 
 .favorite-button-heart-favorited {
@@ -29,9 +30,6 @@
     color: grey;
   }
 
-  .favorite-button-heart-no-hover {
-    color: rgba(0, 0, 0, 0);
-  }
 }
 
 //Under lg

src/styles/containers/facilityCard.scss

@@ -7,6 +7,15 @@
   position: relative;
 }
 
+//Above lg
+@media screen and (min-width: map-get($breakpoints, lg)) {
+    .fc-root:hover {
+        .favorite-button-heart {
+            color: grey;
+        }
+    }
+  }
+
 .fc-card-content {
   padding: 8px 4px !important;
 }