FacilityStatus change, prepare for responsive cards (WIP).

src/actions/action-types.js

@@ -2,7 +2,7 @@ export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
 export const TOGGLE_SIDEBAR_MAP = 'TOGGLE_SIDEBAR_MAP';
 export const SET_FACILITIES = 'SET_FACILITIES';
 export const GET_FACILITIES = 'GET_FACILITIES';
-export const SET_SIDEBAR = 'SET_SIDEBAR';
+export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY';
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY';
 export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY';

src/actions/ui.js

@@ -2,10 +2,9 @@ import {
     ADD_FAVORITE_FACILITY,
     REMOVE_FAVORITE_FACILITY,
     SET_SEARCH_TERM,
-    SET_SIDEBAR,
     TOGGLE_SIDEBAR,
     TOGGLE_SIDEBAR_MAP,
-    SET_ALL_FAVORITES
+    SET_ALL_FAVORITES, SET_SELECTED_FACILITY
 } from './action-types';
 
 export const toggleSidebar = () => ({
@@ -16,9 +15,9 @@ export const toggleSidebarMap = () => ({
    type: TOGGLE_SIDEBAR_MAP,
 });
 
-export const setSidebar = (facility) => ({
-    type: SET_SIDEBAR,
-    facility,
+export const setSelectedFacility = (facility) => ({
+   type: SET_SELECTED_FACILITY,
+   facility
 });
 
 export const setSearchTerm = (term) => ({

src/components/FacilityStatus.js

 import React from 'react';
 import Typography from 'material-ui/Typography';
-import DoneIcon from 'material-ui-icons/Done';
-import CloseIcon from 'material-ui-icons/Close';
-import {green, red} from 'material-ui/colors'
 import FacilityUtils from '../utils/facilityUtils';
+import classNames from 'classnames';
 
 const FacilityStatus = ({facility}) => {
 
@@ -15,35 +13,30 @@ const FacilityStatus = ({facility}) => {
      */
     const generateStatusInfo = facility => {
         let label;
-        let color;
-        let icon;
+        let isOpen;
 
         if (FacilityUtils.getFacilityActiveSchedule(facility).twenty_four_hours) {
             label = 'OPEN 24/7';
-            color = green[500];
-            icon = <DoneIcon/>;
+            isOpen = true;
         } else if (FacilityUtils.isFacilityOpen(facility)) {
             label = 'OPEN';
-            color = green[500];
-            icon = <DoneIcon/>;
+            isOpen = true;
         } else {
             label = 'CLOSED';
-            color = red[500];
-            icon = <CloseIcon/>
+            isOpen = false;
         }
 
         return {
             label: label,
-            color: color,
-            icon: icon,
+            isOpen: isOpen,
         }
     };
 
     const statusInfo = generateStatusInfo(facility);
 
     return (
-        <Typography type={'caption'} className={'facility-status-text'} style={{color: statusInfo.color}}>
-            {statusInfo.icon}
+        <Typography type={'caption'} className={classNames('facility-status-text', statusInfo.isOpen ? 'facility-status-open' : 'facility-status-closed')}>
+            {/*{statusInfo.icon}*/}
             {statusInfo.label}
         </Typography>
     )

src/containers/FacilityCard.js

@@ -8,7 +8,7 @@ import FavoriteButton from '../components/FavoriteButton';
 import FacilityCategory from '../components/FacilityCategory';
 import {compose} from 'redux';
 import {connect} from 'react-redux';
-import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui';
+import {addFavoriteFacility, removeFavoriteFacility, setSelectedFacility} from '../actions/ui';
 import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
 import LocationOnIcon from 'material-ui-icons/LocationOn';
 import {removeBrackets} from '../utils/nameUtils';
@@ -49,7 +49,7 @@ class FacilityCard extends React.Component {
     }
 
     handleClick = () => {
-        this.props.setSidebar(this.props.facility)
+        this.props.setSelectedFacility(this.props.facility);
     };
 
     /**
@@ -130,10 +130,11 @@ class FacilityCard extends React.Component {
     };
 
     render() {
-        const {facility, favorites, addFavoriteFacility, removeFavoriteFacility} = this.props;
+        const {facility, favorites, selectedFacility, addFavoriteFacility, removeFavoriteFacility} = this.props;
 
         return (
-        <Card onClick={this.handleClick} className={'fc-root'} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
+        <Card onClick={this.handleClick} className={classnames('fc-root', selectedFacility.slug === facility.slug && 'fc-selected')}
+              onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
             <CardMedia className={'fc-media'}
                        image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
 
@@ -181,11 +182,12 @@ class FacilityCard extends React.Component {
 }
 
 const mapStateToProps = state => ({
-    favorites: state.ui.favorites
+    favorites: state.ui.favorites,
+    selectedFacility: state.ui.selectedFacility
 });
 
 export default connect(mapStateToProps, {
-    setSidebar,
+    setSelectedFacility,
     addFavoriteFacility,
     removeFavoriteFacility
 })(FacilityCard);
\ No newline at end of file

src/containers/Layout.js

@@ -34,7 +34,7 @@ class Layout extends React.Component {
     };
 
     render() {
-        const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, sidebarFacility} = this.props;
+        const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility} = this.props;
         return (
             <div className={'layout-root'}>
                 <AppBar isOpen={false} handleMenuClick={() => {
@@ -57,7 +57,7 @@ class Layout extends React.Component {
                             }
                         </button>
                     </div>
-                    <Sidebar facilities={this.props.facilities} facility={sidebarFacility} isSidebarOpen={isSidebarOpen}
+                    <Sidebar facilities={this.props.facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen}
                              isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/>
                 </div>
             </div>
@@ -71,7 +71,7 @@ function mapStateToProps(state) {
         favorites: state.ui.favorites,
         searchTerm: state.ui.search.term,
         isLoading: state.facilities.isLoading,
-        sidebarFacility: state.ui.sidebar.facility,
+        selectedFacility: state.ui.selectedFacility,
         isSidebarOpen: state.ui.sidebar.isOpen,
         isSidebarMapOpen: state.ui.sidebar.isMapOpen,
     }

src/reducers/ui.js

 import {
-    TOGGLE_SIDEBAR, SET_SIDEBAR, SET_SEARCH_TERM, SET_FILTERED_LIST,
+    TOGGLE_SIDEBAR, SET_SELECTED_FACILITY, SET_SEARCH_TERM, SET_FILTERED_LIST,
     ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP
 } from '../actions/action-types'
 
+const selectedFacility = (state = {}, action) => {
+    switch(action.type) {
+        case SET_SELECTED_FACILITY:
+            return Object.assign({}, action.facility);
+        default:
+            return state;
+    }
+};
+
 const sidebarDefault = {
-    facility:{},
     isOpen:false,
     isMapOpen:true,
-}
+};
 
 const sidebar = (state=sidebarDefault,action) => {
     switch(action.type){
-        case SET_SIDEBAR:
-            return Object.assign({},state,{},{
-                facility:action.facility
-            });
         case TOGGLE_SIDEBAR:
             return Object.assign({},state,{
                 isOpen:!state.isOpen
@@ -68,6 +72,7 @@ const favorites = (state = [], action) => {
 
 
 const ui = (state={},action) =>({
+    selectedFacility:selectedFacility(state.selectedFacility, action),
     sidebar:sidebar(state.sidebar,action),
     search: search(state.search,state.facilities,action),
     favorites: favorites(state.favorites, action),

src/styles/components/facilityStatus.scss

+//TODO: DRY violation w/ color.
+
 .facility-status-text {
-  display: flex !important;
   align-items: center;
+  border: 2px solid;
+  border-radius: 10px;
+  padding: 5px;
+  font-weight: bold !important;
+
+  &.facility-status-closed {
+    color: rgb(244, 67, 54);
+    border-color: rgb(244, 67, 54);
+  }
+
+  &.facility-status-open {
+    color: rgb(76, 175, 80);
+    border-color: rgb(76, 175, 80);
+  }
 }
\ No newline at end of file

src/styles/containers/facilityCard.scss

@@ -114,4 +114,16 @@
     height: 20px !important;
     width: 20px !important;
   }
+}
+
+@media screen and (max-width: 1023px) {
+  .fc-root {
+
+    &.fc-selected {
+      .fc-one-line-ellipsis {
+        white-space: normal;
+        overflow: inherit;
+      }
+    }
+  }
 }
\ No newline at end of file