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

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'; ...@@ -2,4 +2,6 @@ export const TOGGLE_DRAWER = 'TOGGLE_DRAWER';
export const SET_FACILITIES = 'SET_FACILITIES'; export const SET_FACILITIES = 'SET_FACILITIES';
export const GET_FACILITIES = 'GET_FACILITIES'; export const GET_FACILITIES = 'GET_FACILITIES';
export const SET_SIDEBAR = 'SET_SIDEBAR'; export const SET_SIDEBAR = 'SET_SIDEBAR';
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'; export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
\ No newline at end of file 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 = () => ({ export const toggleDrawer = () => ({
type:TOGGLE_DRAWER, type: TOGGLE_DRAWER,
}); });
export const setSidebar = (facility) => ({ export const setSidebar = (facility) => ({
type:SET_SIDEBAR, type: SET_SIDEBAR,
facility, facility,
}) });
export const setSearchTerm = (term) => ({ export const setSearchTerm = (term) => ({
type:SET_SEARCH_TERM, type: SET_SEARCH_TERM,
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' ...@@ -8,6 +8,8 @@ import {compose} from 'redux'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {setSidebar} from '../actions/ui' import {setSidebar} from '../actions/ui'
import FacilityStatus from './FacilityStatus'; import FacilityStatus from './FacilityStatus';
import FavoriteButton from './FavoriteButton';
import {removeBrackets} from '../utils/nameUtils';
import { import {
amber, amber,
...@@ -40,17 +42,6 @@ const FacilityCard = ({classes, facility, setSidebar}) => { ...@@ -40,17 +42,6 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
setSidebar(facility) 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 * 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. * of the facility. Initial lengths range from 1-2.
...@@ -118,6 +109,7 @@ const FacilityCard = ({classes, facility, setSidebar}) => { ...@@ -118,6 +109,7 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
return ( return (
<Card onClick={handleClick} className={classes.root} raised> <Card onClick={handleClick} className={classes.root} raised>
{/*<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>*/} {/*<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>*/}
<FavoriteButton facility={facility}/>
<CardContent className={classes.cardContent}> <CardContent className={classes.cardContent}>
<Grid container> <Grid container>
<Grid item xs={4} className={classes.avatarContainer}> <Grid item xs={4} className={classes.avatarContainer}>
...@@ -150,7 +142,8 @@ const FacilityCard = ({classes, facility, setSidebar}) => { ...@@ -150,7 +142,8 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
const styleSheet = { const styleSheet = {
root: { root: {
width: 250, width: 250,
borderRadius: '5px' borderRadius: '5px',
position: 'relative'
}, },
cardContent: { cardContent: {
paddingBottom: '16px !important' paddingBottom: '16px !important'
...@@ -178,7 +171,7 @@ const styleSheet = { ...@@ -178,7 +171,7 @@ const styleSheet = {
}, },
location: { location: {
fontFamily: 'Nunito' fontFamily: 'Nunito'
} },
}; };
export default compose(connect(null, {setSidebar}), withStyles(styleSheet))(FacilityCard); 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' ...@@ -3,20 +3,20 @@ import { SET_FACILITIES,GET_FACILITIES } from '../actions/action-types'
const defaultState = { const defaultState = {
isLoading:false, isLoading:false,
data:[] data:[]
} };
export const facilities = (state = defaultState, action) => { export const facilities = (state = defaultState, action) => {
switch(action.type){ switch(action.type){
case GET_FACILITIES: case GET_FACILITIES:
return Object.assign({},state,{ return Object.assign({},state,{
isLoading:true, isLoading:true,
}) });
case SET_FACILITIES: case SET_FACILITIES:
return { return {
data:action.facilities, data:action.facilities,
isLoading:false isLoading:false
} };
default: default:
return state return state
} }
} };
...@@ -7,6 +7,6 @@ const reducers = combineReducers({ ...@@ -7,6 +7,6 @@ const reducers = combineReducers({
router:routerReducer, router:routerReducer,
ui, ui,
facilities facilities
}) });
export default reducers; 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){ function isOpen(state=false,action){
switch (action.type) { switch (action.type) {
case TOGGLE_DRAWER: case TOGGLE_DRAWER:
return !state return !state;
default: default:
return state return state;
} }
} }
const drawer = (state={},action) => ({ const drawer = (state={},action) => ({
isOpen:isOpen(state.isOpen,action) isOpen:isOpen(state.isOpen,action)
}) });
const sidebar = (state={},action) => { const sidebar = (state={},action) => {
switch(action.type){ switch(action.type){
case SET_SIDEBAR: case SET_SIDEBAR:
return action.facility return action.facility;
default: default:
return {} return {};
} }
} };
const searchbarState = { const searchbarState = {
term:'', term:'',
filteredList:[], filteredList:[],
} };
const filterList = (state) =>{ const filterList = (state) =>{
} };
const search = (state=searchbarState,facilities=[],action) =>{ const search = (state=searchbarState,facilities=[],action) =>{
switch(action.type){ switch(action.type){
case SET_SEARCH_TERM: case SET_SEARCH_TERM:
...@@ -39,11 +42,25 @@ const search = (state=searchbarState,facilities=[],action) =>{ ...@@ -39,11 +42,25 @@ const search = (state=searchbarState,facilities=[],action) =>{
default: default:
return state; 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) =>({ const ui = (state={},action) =>({
drawer:drawer(state.drawer,action), drawer:drawer(state.drawer,action),
sidebar:sidebar(state.sidbar,action), sidebar:sidebar(state.sidebar,action),
search: search(state.search,state.facilities,action), search: search(state.search,state.facilities,action),
}) favorites: favorites(state.favorites, action),
});
export default ui; export default ui;
const removeBrackets = (name) => { export const removeBrackets = (name) => {
if (typeof(name) === "undefined") { if (typeof(name) === "undefined") {
return "" 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