Resolved ui bugs from prior dependency bump, cleaned some code.

src/components/CardContainer.tsx

@@ -5,13 +5,10 @@ import FacilityCard from '../containers/FacilityCard';
 
 import Grid from '@material-ui/core/Grid';
 
-class CardContainer extends React.Component<CardContainerProps, CardContainerState> {
+class CardContainer extends React.Component<CardContainerProps> {
 
     constructor(props: CardContainerProps) {
         super(props);
-        this.state = {
-            selectedSlug: null
-        };
     }
 
     filterCards = (facility: IFacility) => {
@@ -40,25 +37,15 @@ class CardContainer extends React.Component<CardContainerProps, CardContainerSta
             facilityCategory.includes(lSearchTerm) || hasTag || friendlyName.includes(lSearchTerm);
     }
 
-    handleFacilityClick = (slug: string) => {
-        const newValue = (slug !== this.state.selectedSlug) ? slug : null;
-
-        this.setState({
-            selectedSlug: newValue
-        });
-    }
-
     render() {
         const {facilities} = this.props;
 
         return (
             <Grid container={true} className={'card-container-root'} spacing={24} justify={'center'} alignItems={'flex-end'}>
                 {facilities.filter(this.filterCards).map((item) => {
-                    const isSelected = (item.slug === this.state.selectedSlug);
-
                     return (
                         <Grid key={item.slug} item={true}>
-                            <FacilityCard facility={item} facilities={facilities} isSelected={isSelected} setSelected={this.handleFacilityClick}/>
+                            <FacilityCard facility={item} facilities={facilities}/>
                         </Grid>
                     );
                 })}
@@ -73,8 +60,4 @@ export interface CardContainerProps {
     campusRegion: CampusRegion;
 }
 
-export interface CardContainerState {
-    selectedSlug: string;
-}
-
 export default CardContainer;
\ No newline at end of file

src/components/MapDialog.tsx

 import * as React from 'react';
 import { IFacility } from '../models/facility.model';
 
-import FacilitiesMap from './FacilitiesMap';
+import FacilitiesMap from '../containers/FacilitiesMap';
 
 import Dialog from '@material-ui/core/Dialog';
 import IconButton from '@material-ui/core/IconButton';

src/components/Sidebar.tsx

@@ -4,7 +4,7 @@ import * as phoneFormatter from 'phone-formatter';
 import { IFacility } from '../models/facility.model';
 
 import TextwTitle from './TextwTitle';
-import FacilitiesMap from './FacilitiesMap';
+import FacilitiesMap from '../containers/FacilitiesMap';
 import MapDialog from './MapDialog';
 import WeekHours from './WeekHours';
 

src/components/FacilitiesMap.tsx → src/containers/FacilitiesMap.tsx

@@ -3,12 +3,14 @@ import ReactMapboxGl, { Marker, Popup } from 'react-mapbox-gl';
 import { getMaxBounds, getCenterOfCampusRegion } from '../utils/mapboxUtils';
 import * as mapboxgl from 'mapbox-gl';
 import { removeBrackets } from '../utils/nameUtils';
-import { IFacility, CampusRegion, IFacilityLocation } from '../models/facility.model';
+import { IFacility, CampusRegion, FacilitiesByLocation } from '../models/facility.model';
 
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import FormControl from '@material-ui/core/FormControl';
 import Typography from '@material-ui/core/Typography';
+import { ApplicationState } from '../store';
+import { connect } from 'react-redux';
 
 const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA';
 
@@ -40,7 +42,6 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
             campusRegion: campusRegion,
             zoom: [17],
             center: facility && facility.facility_location ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion),
-            facilityLocations: [],
             selectedLocation: null,
             isLoaded: false
         };
@@ -51,10 +52,6 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
         const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : CampusRegion.Fairfax;
 
         this.changeRegion(campusRegion, facility);
-
-        if (this.state.facilityLocations.length === 0) {
-            this.generateLocationArray(facilities);
-        }
     }
 
     changeRegion = (campusRegion: CampusRegion, facility: IFacility = this.props.facility) => {
@@ -71,27 +68,7 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
         }, 100);
     }
 
-    generateLocationArray = (facilities: IFacility[]) => {
-        const locations: FacilityMapLocation[] = [];
-
-        facilities.forEach((facility) => {
-            const location = locations.find((loc) => loc.location.id === facility.facility_location.id);
-            if (location) {
-                location.facilities.push(facility);
-            } else {
-                locations.push({
-                    location: facility.facility_location,
-                    facilities: [facility]
-                });
-            }
-        });
-
-        this.setState({
-            facilityLocations: locations
-        });
-    }
-
-    selectLocation = (location: FacilityMapLocation) => {
+    selectLocation = (location: FacilitiesByLocation) => {
         const {interactive = true} = this.props;
         const oldSelectedLocation = this.state.selectedLocation;
 
@@ -107,8 +84,8 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
     }
 
     render() {
-        const {interactive = true} = this.props;
-        const {maxBounds, facilityLocations, selectedLocation, center, zoom} = this.state;
+        const {interactive = true, facilitiesByLocation} = this.props;
+        const {maxBounds, selectedLocation, center, zoom} = this.state;
         return (
             <this.Map
                 onStyleLoad={(map: any) => {
@@ -144,7 +121,7 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
                         <Select
                             disableUnderline={true}
                             value={this.state.campusRegion}
-                            onChange={(e) => this.changeRegion((CampusRegion as any)[e.target.value])}>
+                            onChange={(e) => this.changeRegion(e.target.value as CampusRegion)}>
                             <MenuItem value={CampusRegion.Fairfax}>Fairfax</MenuItem>
                             <MenuItem value={CampusRegion.Arlington}>Arlington</MenuItem>
                             <MenuItem value={CampusRegion.PrinceWilliam}>SciTech</MenuItem>
@@ -153,7 +130,7 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
                     </FormControl>
                 )}
 
-                {(facilityLocations.length > 0) && facilityLocations.map((item) => {
+                {(facilitiesByLocation.length > 0) && facilitiesByLocation.map((item) => {
                     const location = item.location;
 
                     return (
@@ -196,12 +173,7 @@ export interface FacilitiesMapProps {
     facility: IFacility;
     facilities: IFacility[];
     interactive: boolean;
-
-}
-
-interface FacilityMapLocation {
-    location: IFacilityLocation;
-    facilities: IFacility[];
+    facilitiesByLocation: FacilitiesByLocation[];
 }
 
 export interface FacilitiesMapState {
@@ -209,9 +181,12 @@ export interface FacilitiesMapState {
     campusRegion: CampusRegion;
     zoom: number[];
     center: number[];
-    facilityLocations: FacilityMapLocation[];
-    selectedLocation: FacilityMapLocation;
+    selectedLocation: FacilitiesByLocation;
     isLoaded: boolean;
 }
 
-export default FacilitiesMap;
\ No newline at end of file
+const mapStateToProps = (state: ApplicationState) => ({
+    facilitiesByLocation: state.facilities.facilitiesByLocation || []
+});
+
+export default connect(mapStateToProps)(FacilitiesMap);
\ No newline at end of file

src/containers/FacilityCard.tsx

@@ -32,25 +32,27 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
     }
 
     shouldComponentUpdate = (nextProps: FacilityCardProps) => {
-
-        if (this.props.isSelected !== nextProps.isSelected) {
+        if (this.isFacilitySelected() !== (nextProps.selectedFacility.slug === this.props.facility.slug)) {
             return true;
         }
 
         const dateModified = nextProps.facility.modified;
+
         if (dateModified !== this.state.modified) {
             this.setState({
                 modified: dateModified
             });
+
             return true;
         }
+
         return false;
     }
 
-    handleCardClick = () => {
-        this.props.setSelected(this.props.facility.slug);
+    isFacilitySelected = (): boolean => this.props.selectedFacility.slug === this.props.facility.slug;
 
-        const newState = !this.props.isSelected;
+    handleCardClick = () => {
+        const newState = !this.isFacilitySelected();
 
         trackPiwikEvent('card-action', 'click');
 
@@ -60,9 +62,8 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
         }, 0);
     }
 
-
     render() {
-        const {facility, facilities, favorites, addFavoriteFacility, removeFavoriteFacility, isSelected} = this.props;
+        const {facility, facilities, favorites, addFavoriteFacility, removeFavoriteFacility} = this.props;
 
         const dayOfWeek = [6, 0, 1, 2, 3, 4, 5][new Date().getDay()];
 
@@ -86,17 +87,13 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
             facility.facility_location.friendly_building :
             facility.facility_location.building;
         return (
-            <Card onClick={this.handleCardClick} className={classNames('fc-root', isSelected && 'fc-selected')}
+            <Card onClick={this.handleCardClick} className={classNames('fc-root', this.isFacilitySelected() && 'fc-selected')}
                    elevation={3}>
-                {/*<CardMedia className={'fc-media'}
-                          image={'https://gmucampus.files.wordpress.com/2010/09/00southside2.jpg'} />*/}
-
                 <div className={'fc-logo-container'}>
                     <img className={'fc-logo'}
                     alt={facility.slug} src={facility.logo} />
                 </div>
 
-
                 <FavoriteButton slug={facility.slug} initialState={favorites.includes(facility.slug)}
                                 addFavoriteFacility={addFavoriteFacility}
                                 removeFavoriteFacility={removeFavoriteFacility} />
@@ -110,9 +107,11 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
                                 {removeBrackets(facility.facility_name)}
                             </Typography>
                         </Grid>
+
                         <Grid item={true} className={'fc-small-grid-item-spacing'}>
                             <FacilityCategory category={facility.facility_category} />
                         </Grid>
+                        
                         <Grid item={true} className={'fc-small-grid-item-spacing fc-display-hours'}>
                             <Typography variant={'body1'}>
                                 {`Today: ${getDisplayHours()}`}
@@ -137,7 +136,7 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
                     </Grid>
                 </CardContent>
 
-                <FacilityDialog facility={facility} facilities={facilities} isOpen={isSelected}
+                <FacilityDialog facility={facility} facilities={facilities} isOpen={this.isFacilitySelected()}
                                 onClose={this.handleCardClick} />
             </Card>
         );
@@ -147,10 +146,8 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
 export interface FacilityCardProps {
     facility: IFacility;
     facilities: IFacility[];
-    isSelected: boolean;
     favorites: string[];
     selectedFacility: IFacility;
-    setSelected: (slug: string) => void;
     setSelectedFacility: (facility: IFacility) => void;
     addFavoriteFacility: (slug: string) => void;
     removeFavoriteFacility: (slug: string) => void;

src/containers/SearchBar.tsx

@@ -42,8 +42,7 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
     handleRegionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         trackPiwikEvent('change-campus', e.target.value);
 
-        const campusRegion = (CampusRegion as any)[e.target.value];
-
+        const campusRegion: CampusRegion = e.target.value as CampusRegion;
         this.setState({
             campus: campusRegion
         });

src/models/facility.model.ts

@@ -62,4 +62,9 @@ export interface IFacilityScheduleEntry {
     end_day: number;
     start_time: string;
     end_time: string;
+}
+
+export interface FacilitiesByLocation {
+    location: IFacilityLocation;
+    facilities: IFacility[];
 }
\ No newline at end of file

src/store/facility/facility.reducer.ts

-import { IFacility } from '../../models/facility.model';
+import { IFacility, FacilitiesByLocation } from '../../models/facility.model';
 import { FacilityAction, FacilityActionTypes } from './facility.action-types';
+import { generateFacilitiesByLocation } from '../../utils/mapboxUtils';
 
 export interface FacilityState {
     isFetching: boolean;
     facilities: IFacility[];
+    facilitiesByLocation: FacilitiesByLocation[];
 }
 
-export const facilityReducer = (state: FacilityState = {isFetching: false, facilities: []}, action: FacilityAction) => {
+export const facilityReducer = (state: FacilityState = {isFetching: false, facilities: [], facilitiesByLocation: []}, action: FacilityAction) => {
     switch (action.type) {
         case FacilityActionTypes.FETCH_FACILITIES: {
             return {
@@ -18,7 +20,8 @@ export const facilityReducer = (state: FacilityState = {isFetching: false, facil
             return {
                 ...state,
                 isFetching: false,
-                facilities: action.facilities
+                facilities: action.facilities,
+                facilitiesByLocation: generateFacilitiesByLocation(action.facilities)
             };
         }
         default:

src/styles/components/mapDialog.scss

 .map-dialog-close-btn {
   position: absolute !important;
   z-index: 100;
-  top: 10px;
-  left: 10px;
+  top: 5px;
+  left: 5px;
   width: 30px !important;
   height: 30px !important;
-  background-color: white !important;
-  border-radius: 5px !important;
-  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
+  padding: 4px !important;
 }
\ No newline at end of file

src/styles/containers/alertContainer.scss

@@ -10,6 +10,7 @@
 .alert-container-close-btn {
   width: 20px !important;
   height: 20px !important;
+  padding: 0 !important;
 }
 
 .alert-container-close-icon {

src/styles/containers/facilityCard.scss

@@ -9,12 +9,12 @@
 
 //Above lg
 @media screen and (min-width: map-get($breakpoints, lg)) {
-    .fc-root:hover {
-        .favorite-button-heart {
-            color: grey;
-        }
+  .fc-root:hover {
+    .favorite-button-heart {
+        color: grey;
     }
   }
+}
 
 .fc-card-content {
   padding: 8px 4px 0 !important;
@@ -101,88 +101,46 @@
   }
 }
 
-/**
-//Between lg and xl
-@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
-  .fc-root {
-    width: 250px * $fc-lg-scale;
-    height: 250px;
-  }
-
-  .fc-small-grid-item-spacing {
-    padding: 0 8px !important;
-  }
-
-  .fc-media {
-    height: 115px * $fc-lg-scale;
-  }
-
-  .fc-logo-container {
-    width: 100px * $fc-lg-scale;
-    height: 100px * $fc-lg-scale;
-    margin-top: -60px * $fc-lg-scale;
-    border-radius: 50%;
-    border: 5px * $fc-lg-scale solid white;
-  }
-
-  .fc-logo {
-    width: 100px * $fc-lg-scale;
-    height: 100px * $fc-lg-scale;
-  }
-
-  .fc-extra-info {
-    font-size: 11px;
-  }
-
-  .fc-card-map-marker-icon {
-    height: 20px !important;
-    width: 20px !important;
-  }
+.fc-root {
+  width: 270px !important;
+  display: flex !important;
+  align-items: center !important;
 }
-**/
 
-//@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
-  .fc-root {
-    width: 270px !important;
-    display: flex !important;
-    align-items: center !important;
-  }
-
-  .fc-card-content {
-    flex: 1;
-    min-width: 0;
-  }
+.fc-card-content {
+  flex: 1;
+  min-width: 0;
+}
 
-  .fc-media {
-    display: none !important;
-  }
+.fc-media {
+  display: none !important;
+}
 
-  .fc-title-container {
-    width: 90%;
-  }
+.fc-title-container {
+  width: 90%;
+}
 
-  .fc-extra-info {
-    max-width: 100% !important;
-    width: 100% !important;
-    padding: 2px 0 !important;
-    justify-content: center;
-    font-size: 11px;
-  }
+.fc-extra-info {
+  max-width: 100% !important;
+  width: 100% !important;
+  padding: 2px 0 !important;
+  justify-content: center;
+  font-size: 11px;
+}
 
-  .fc-small-grid-item-spacing {
-    padding: 0 8px !important;
-  }
+.fc-small-grid-item-spacing {
+  padding: 0 8px !important;
+}
 
-  .fc-logo-container {
-    margin: 0 0 0 5px !important;
-  }
+.fc-logo-container {
+  margin: 0 0 0 5px !important;
+}
 
-  .fc-logo {
-      margin:5px;
-  }
+.fc-logo {
+    margin:5px;
+}
 
-  .fc-card-map-marker-icon {
-    height: 20px !important;
-    width: 20px !important;
-  }
-//}
\ No newline at end of file
+.fc-card-map-marker-icon {
+  height: 20px !important;
+  width: 20px !important;
+}
\ No newline at end of file

src/styles/whatsOpen.scss

@@ -4,7 +4,6 @@
 @import './components/alert';
 @import './components/appBar';
 @import './components/cardContainer';
-@import './components/facilitiesMap';
 @import './components/facilityCategory';
 @import './components/facilityDialog';
 @import './components/facilityStatus';
@@ -15,6 +14,7 @@
 @import './components/weekHours';
 /* Containers */
 @import './containers/alertContainer';
+@import './containers/facilitiesMap';
 @import './containers/facilityCard';
 @import './containers/layout';
 @import './containers/searchBar';

src/utils/mapboxUtils.ts

-import { CampusRegion } from '../models/facility.model';
+import { CampusRegion, IFacility, FacilitiesByLocation } from '../models/facility.model';
 
 const campusBounds = {
     fairfax: [
@@ -95,4 +95,22 @@ const getCenterOfCampusRegion = (campus: CampusRegion) => {
     return [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2];
 };
 
-export {addRoute, getGeoLine, getMaxBounds, getCenterOfCampusRegion};
\ No newline at end of file
+const generateFacilitiesByLocation = (facilities: IFacility[]): FacilitiesByLocation[] => {
+    const locations: FacilitiesByLocation[] = [];
+
+    facilities.forEach((facility) => {
+        const location = locations.find((loc) => loc.location.id === facility.facility_location.id);
+        if (location) {
+            location.facilities.push(facility);
+        } else {
+            locations.push({
+                location: facility.facility_location,
+                facilities: [facility]
+            });
+        }
+    });
+
+    return locations;
+};
+
+export {addRoute, getGeoLine, getMaxBounds, getCenterOfCampusRegion, generateFacilitiesByLocation};
\ No newline at end of file