Commit a7fa4a80 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Converted FacilityButton to a component (from a container).

parent 2d000921
......@@ -10,7 +10,7 @@ const CardContainer = ({classes, searchTerm,facilities}) => {
return name.includes(searchTerm.toLowerCase())
}
return (
<Grid container className={classes.root} spacing={24}>
<Grid container className={classes.root} spacing={24} justify={'center'}>
{facilities.filter(filterCards).map(item =>{
return(<Grid key={item.slug} item>
<FacilityCard facility={item}/>
......
import React from 'react'
import {withStyles} from 'material-ui/styles';
import yellow from 'material-ui/colors/yellow';
import {compose} from 'redux'
import {connect} from 'react-redux'
import {addFavoriteFacility, removeFavoriteFacility} from "../actions/ui";
import StarIcon from 'material-ui-icons/Star';
import StarBorderIcon from 'material-ui-icons/StarBorder';
import PropTypes from 'prop-types';
......@@ -16,22 +13,10 @@ class FavoriteButton extends React.Component {
this.handleClick = this.handleClick.bind(this);
}
componentWillMount() {
this.setState({
isFavorite: this.props.favorites.includes(this.props.favorites.slug)
});
}
componentWillReceiveProps(nextProps) {
this.setState({
isFavorite: nextProps.favorites.includes(nextProps.facility.slug)
});
}
handleClick() {
handleClick(e) {
e.stopPropagation(); //Stops the card from being selected in the sidebar.
if (this.state.isFavorite) {
if (this.props.isFavorite) {
this.props.removeFavoriteFacility(this.props.facility.slug);
} else {
this.props.addFavoriteFacility(this.props.facility.slug);
......@@ -39,7 +24,7 @@ class FavoriteButton extends React.Component {
}
render() {
if (this.state.isFavorite) {
if (this.props.isFavorite) {
return (<StarIcon onClick={this.handleClick} className={this.props.classes.star}/>);
}
......@@ -50,7 +35,7 @@ class FavoriteButton extends React.Component {
FavoriteButton.propTypes = {
classes: PropTypes.object.isRequired,
facility: PropTypes.object.isRequired,
favorites: PropTypes.array,
isFavorite: PropTypes.bool.isRequired,
addFavoriteFacility: PropTypes.func.isRequired,
removeFavoriteFacility: PropTypes.func.isRequired,
};
......@@ -67,11 +52,4 @@ const styleSheet = {
}
};
const mapStateToProps = state => ({
favorites: state.ui.favorites
});
export default compose(connect(mapStateToProps, {
addFavoriteFacility,
removeFavoriteFacility
}), withStyles(styleSheet))(FavoriteButton);
\ No newline at end of file
export default withStyles(styleSheet)(FavoriteButton);
\ No newline at end of file
......@@ -6,9 +6,9 @@ import Grid from 'material-ui/Grid';
import Avatar from 'material-ui/Avatar';
import {compose} from 'redux'
import {connect} from 'react-redux'
import {setSidebar} from '../actions/ui'
import FacilityStatus from './FacilityStatus';
import FavoriteButton from './FavoriteButton';
import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui'
import FacilityStatus from '../components/FacilityStatus';
import FavoriteButton from '../components/FavoriteButton';
import {removeBrackets} from '../utils/nameUtils';
import {
......@@ -36,7 +36,7 @@ import {
const materialColors = [red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green,
lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey];
const FacilityCard = ({classes, facility, setSidebar}) => {
const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar}) => {
const handleClick = () => {
setSidebar(facility)
......@@ -109,7 +109,8 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
return (
<Card onClick={handleClick} className={classes.root} raised>
{/*<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>*/}
<FavoriteButton facility={facility}/>
<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} removeFavoriteFacility={removeFavoriteFacility}/>
<CardContent className={classes.cardContent}>
<Grid container>
<Grid item xs={4} className={classes.avatarContainer}>
......@@ -174,4 +175,12 @@ const styleSheet = {
},
};
export default compose(connect(null, {setSidebar}), withStyles(styleSheet))(FacilityCard);
\ No newline at end of file
const mapStateToProps = state => ({
favorites: state.ui.favorites
});
export default compose(connect(mapStateToProps, {
setSidebar,
addFavoriteFacility,
removeFavoriteFacility
}), withStyles(styleSheet))(FacilityCard);
\ No newline at end of file
......@@ -54,17 +54,17 @@ class Layout extends React.Component {
componentWillMount = () => {
if(localStorage.getItem('facilities')){
const facilities = localStorage.getItem('facilities')
const facilities = localStorage.getItem('facilities');
this.props.setFacilities(facilities)
}
if(localStorage.getItem('favorites')){
const favorites = JSON.parse(localStorage.getItem('favorites'))
console.log(favorites)
const favorites = JSON.parse(localStorage.getItem('favorites'));
console.log(favorites);
this.props.setAllFavorites(favorites);
}
this.props.getFacilities()
}
};
render() {
const {classes, isDrawerOpen, toggleDrawer, getFacilities,sidebarFacility} = this.props;
......
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