Commit c3abe938 authored by Andrew Hrdy's avatar Andrew Hrdy

Added favorites. Currently stored in the redux store. (Needs to be in a cookie).

parent b99b1056
......@@ -2,4 +2,6 @@ export const TOGGLE_DRAWER = 'TOGGLE_DRAWER';
export const SET_FACILITIES = 'SET_FACILITIES';
export const GET_FACILITIES = 'GET_FACILITIES';
export const SET_SIDEBAR = 'SET_SIDEBAR';
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
\ No newline at end of file
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY';
export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY';
\ No newline at end of file
import { TOGGLE_DRAWER,SET_SIDEBAR,SET_SEARCH_TERM,SET_FILTERED_LIST } from './action-types';
import {
ADD_FAVORITE_FACILITY,
REMOVE_FAVORITE_FACILITY,
SET_SEARCH_TERM,
SET_SIDEBAR,
TOGGLE_DRAWER
} from './action-types';
export const toggleDrawer = () => ({
type:TOGGLE_DRAWER,
export const toggleDrawer = () => ({
type: TOGGLE_DRAWER,
});
export const setSidebar = (facility) => ({
type:SET_SIDEBAR,
type: SET_SIDEBAR,
facility,
})
});
export const setSearchTerm = (term) => ({
type:SET_SEARCH_TERM,
type: SET_SEARCH_TERM,
term,
})
});
export const addFavoriteFacility = slug => ({
type: ADD_FAVORITE_FACILITY,
slug
});
export const removeFavoriteFacility = slug => ({
type: REMOVE_FAVORITE_FACILITY,
slug
});
......@@ -8,6 +8,8 @@ import {compose} from 'redux'
import {connect} from 'react-redux'
import {setSidebar} from '../actions/ui'
import FacilityStatus from './FacilityStatus';
import FavoriteButton from './FavoriteButton';
import {removeBrackets} from '../utils/nameUtils';
import {
amber,
......@@ -40,17 +42,6 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
setSidebar(facility)
};
const removeBrackets = (name) => {
if (typeof(name) === "undefined") {
return ""
}
const openBracket = name.indexOf('[');
if (openBracket !== -1) {
return name.substring(0, openBracket)
}
return name
};
/**
* Gets the the initials for a facility name. The initials will be the first character of the first and last word
* of the facility. Initial lengths range from 1-2.
......@@ -118,6 +109,7 @@ 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}/>
<CardContent className={classes.cardContent}>
<Grid container>
<Grid item xs={4} className={classes.avatarContainer}>
......@@ -150,7 +142,8 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
const styleSheet = {
root: {
width: 250,
borderRadius: '5px'
borderRadius: '5px',
position: 'relative'
},
cardContent: {
paddingBottom: '16px !important'
......@@ -178,7 +171,7 @@ const styleSheet = {
},
location: {
fontFamily: 'Nunito'
}
},
};
export default compose(connect(null, {setSidebar}), withStyles(styleSheet))(FacilityCard);
\ No newline at end of file
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';
class FavoriteButton extends React.Component {
constructor(props) {
super(props);
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() {
if (this.state.isFavorite) {
this.props.removeFavoriteFacility(this.props.facility.slug);
} else {
this.props.addFavoriteFacility(this.props.facility.slug);
}
}
render() {
if (this.state.isFavorite) {
return (<StarIcon onClick={this.handleClick} className={this.props.classes.star}/>);
}
return (<StarBorderIcon onClick={this.handleClick} className={this.props.classes.star}/>);
}
}
FavoriteButton.propTypes = {
classes: PropTypes.object.isRequired,
facility: PropTypes.object.isRequired,
favorites: PropTypes.array,
addFavoriteFacility: PropTypes.func.isRequired,
removeFavoriteFacility: PropTypes.func.isRequired,
};
const styleSheet = {
star: {
position: 'absolute',
top: '0px',
right: '0px',
color: yellow[600],
height: '20px',
width: '20px',
cursor: 'pointer',
}
};
const mapStateToProps = state => ({
favorites: state.ui.favorites
});
export default compose(connect(mapStateToProps, {
addFavoriteFacility,
removeFavoriteFacility
}), withStyles(styleSheet))(FavoriteButton);
\ No newline at end of file
......@@ -3,20 +3,20 @@ import { SET_FACILITIES,GET_FACILITIES } from '../actions/action-types'
const defaultState = {
isLoading:false,
data:[]
}
};
export const facilities = (state = defaultState, action) => {
switch(action.type){
case GET_FACILITIES:
return Object.assign({},state,{
isLoading:true,
})
});
case SET_FACILITIES:
return {
data:action.facilities,
isLoading:false
}
};
default:
return state
}
}
};
......@@ -7,6 +7,6 @@ const reducers = combineReducers({
router:routerReducer,
ui,
facilities
})
});
export default reducers;
import {TOGGLE_DRAWER,SET_SIDEBAR,SET_SEARCH_TERM,SET_FILTERED_LIST } from '../actions/action-types'
import {
TOGGLE_DRAWER, SET_SIDEBAR, SET_SEARCH_TERM, SET_FILTERED_LIST,
ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY
} from '../actions/action-types'
function isOpen(state=false,action){
switch (action.type) {
case TOGGLE_DRAWER:
return !state
return !state;
default:
return state
return state;
}
}
const drawer = (state={},action) => ({
isOpen:isOpen(state.isOpen,action)
})
});
const sidebar = (state={},action) => {
switch(action.type){
case SET_SIDEBAR:
return action.facility
return action.facility;
default:
return {}
return {};
}
}
};
const searchbarState = {
term:'',
filteredList:[],
}
};
const filterList = (state) =>{
}
};
const search = (state=searchbarState,facilities=[],action) =>{
switch(action.type){
case SET_SEARCH_TERM:
......@@ -39,11 +42,25 @@ const search = (state=searchbarState,facilities=[],action) =>{
default:
return state;
}
}
};
//TODO: Favorites should be stored in a cookie, not in the redux store.
const favorites = (state = [], action) => {
switch(action.type) {
case ADD_FAVORITE_FACILITY:
return [...state, action.slug];
case REMOVE_FAVORITE_FACILITY:
return state.filter(slug => slug !== action.slug);
default:
return state;
}
};
const ui = (state={},action) =>({
drawer:drawer(state.drawer,action),
sidebar:sidebar(state.sidbar,action),
sidebar:sidebar(state.sidebar,action),
search: search(state.search,state.facilities,action),
})
favorites: favorites(state.favorites, action),
});
export default ui;
const removeBrackets = (name) => {
export const removeBrackets = (name) => {
if (typeof(name) === "undefined") {
return ""
}
......
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