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

package.json

@@ -9,6 +9,7 @@
     "immutability-helper": "^2.3.0",
     "material-ui": "next",
     "material-ui-icons": "^1.0.0-alpha.19",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-autosuggest": "^9.3.2",
     "react-dom": "^15.6.1",

src/actions/action-types.js

@@ -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

src/actions/ui.js

-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
+});
 

src/containers/FacilityCard.js

@@ -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

src/containers/FavoriteButton.js

+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

src/reducers/api.js

@@ -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
     }
-}
+};

src/reducers/index.js

@@ -7,6 +7,6 @@ const reducers = combineReducers({
     router:routerReducer,
     ui,
     facilities
-})
+});
 
 export default reducers;

src/reducers/ui.js

-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;

src/utils/nameUtils.js

-const removeBrackets = (name) => {
+export const removeBrackets = (name) => {
     if (typeof(name) === "undefined") {
         return ""
     }