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

favorite rework

making favorites more performant by implementing hover in css and adding state to favorite
parent 47963d0c
This diff is collapsed.
......@@ -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
};
......
......@@ -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'}>
......
......@@ -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;
......
......@@ -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
......
......@@ -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;
}
......
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