Added campus region filter.

src/actions/action-types.js

@@ -5,6 +5,7 @@ export const SET_FACILITIES = 'SET_FACILITIES';
 export const GET_FACILITIES = 'GET_FACILITIES';
 export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY';
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
+export const SET_CAMPUS_REGION = 'SET_CAMPUS_REGION';
 export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY';
 export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY';
 export const SET_ALL_FAVORITES = 'SET_ALL_FAVORITES';

src/actions/ui.js

@@ -2,6 +2,7 @@ import {
     ADD_FAVORITE_FACILITY,
     REMOVE_FAVORITE_FACILITY,
     SET_SEARCH_TERM,
+    SET_CAMPUS_REGION,
     TOGGLE_SIDEBAR,
     TOGGLE_SIDEBAR_MAP,
     SET_ALL_FAVORITES, SET_SELECTED_FACILITY, SET_SIDEBAR
@@ -13,9 +14,7 @@ export const toggleSidebar = () => ({
 
 export const setSidebar = (setOpen) => ({
     type: SET_SIDEBAR,
-    setOpen,
-
-
+    setOpen
 });
 
 export const toggleSidebarMap = () => ({
@@ -32,6 +31,11 @@ export const setSearchTerm = (term) => ({
     term,
 });
 
+export const setCampusRegion = (campusRegion) => ({
+   type: SET_CAMPUS_REGION,
+   campusRegion
+});
+
 export const addFavoriteFacility = slug => ({
     type: ADD_FAVORITE_FACILITY,
     slug
@@ -45,6 +49,6 @@ export const removeFavoriteFacility = slug => ({
 export const setAllFavorites = (favorites) => ({
     type: SET_ALL_FAVORITES,
     favorites,
-})
+});
 
 

src/components/CardContainer.js

@@ -2,9 +2,13 @@ import React from 'react'
 import FacilityCard from '../containers/FacilityCard'
 import Grid from 'material-ui/Grid';
 
-const CardContainer = ({searchTerm, facilities}) => {
+const CardContainer = ({searchTerm, campusRegion, facilities}) => {
 
     const filterCards = (facility) => {
+        if (facility.facility_location.campus_region.toLowerCase() !== campusRegion.toLowerCase()) {
+            return false;
+        }
+
         const lSearchTerm = searchTerm.toLowerCase();
         const facilityName = facility.facility_name.toLowerCase();
         const facilityLocation = facility.facility_location.building.toLowerCase();

src/containers/Layout.js

@@ -39,7 +39,7 @@ class Layout extends React.Component {
     };
 
     render() {
-        const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility,facilities,searchTerm,sortByFavorites,favorites} = this.props;
+        const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility, facilities, searchTerm, campusRegion, sortByFavorites, favorites} = this.props;
         return (
             <div className={'layout-root'}>
                 <AppBar isOpen={false} handleMenuClick={() => {
@@ -47,7 +47,7 @@ class Layout extends React.Component {
                 <div className={'layout-container'}>
                     <div className={'layout-main-content'}>
                         <div className={'layout-card-container'}>
-                            <CardContainer styles={'layout-card-container'} searchTerm={searchTerm}
+                            <CardContainer styles={'layout-card-container'} searchTerm={searchTerm} campusRegion={campusRegion}
                                            facilities={facilities} />
                         </div>
                     </div>
@@ -65,6 +65,7 @@ function mapStateToProps(state) {
         facilities: state.facilities.data,
         favorites: state.ui.favorites,
         searchTerm: state.ui.search.term,
+        campusRegion: state.ui.search.campusRegion,
         isLoading: state.facilities.isLoading,
         selectedFacility: state.ui.selectedFacility,
         isSidebarOpen: state.ui.sidebar.isOpen,

src/containers/SearchBar.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {setSearchTerm} from '../actions/ui';
+import {setSearchTerm, setCampusRegion} from '../actions/ui';
 import SearchIcon from 'material-ui-icons/Search';
 import CloseIcon from 'material-ui-icons/Close';
 import ArrowBackIcon from 'material-ui-icons/ArrowBack';
 import IconButton from 'material-ui/IconButton';
 import Input from 'material-ui/Input';
 import Paper from 'material-ui/Paper';
+import {MenuItem} from 'material-ui/Menu';
+import Select from 'material-ui/Select';
+import {FormControl} from 'material-ui/Form';
 import classNames from 'classnames';
 
 class SearchBar extends React.Component {
@@ -18,7 +21,8 @@ class SearchBar extends React.Component {
         this.state = {
             isFocused: false,
             isMobileOpen: false,
-            value: ''
+            value: '',
+            campus: 'fairfax'
         };
     }
 
@@ -26,7 +30,16 @@ class SearchBar extends React.Component {
         this.setState({
             value: e.target.value,
         });
-        this.props.setSearchTerm(e.target.value)
+
+        this.props.setSearchTerm(e.target.value);
+    };
+
+    handleRegionChange = (e) => {
+        this.setState({
+            campus: e.target.value
+        });
+
+        this.props.setCampusRegion(e.target.value);
     };
 
     handleFocus = () => {
@@ -93,6 +106,16 @@ class SearchBar extends React.Component {
                 <IconButton onClick={this.clear} disableRipple className={'search-bar-close-btn'}>
                     <CloseIcon/>
                 </IconButton>
+                <FormControl className={'search-bar-campus-control'}>
+                    <Select
+                        value={this.state.campus}
+                        onChange={this.handleRegionChange}>
+                        <MenuItem value={'fairfax'}>Fairfax</MenuItem>
+                        <MenuItem value={'arlington'}>Arlington</MenuItem>
+                        <MenuItem value={'prince william county science and technology'}>Prince William</MenuItem>
+                        <MenuItem value={'mason korea'}>Korea</MenuItem>
+                    </Select>
+                </FormControl>
             </Paper>
         );
     }
@@ -103,4 +126,4 @@ SearchBar.propTypes = {
     onSearchCollapse: PropTypes.func
 };
 
-export default connect(null, {setSearchTerm})(SearchBar);
\ No newline at end of file
+export default connect(null, {setSearchTerm, setCampusRegion})(SearchBar);
\ No newline at end of file

src/reducers/ui.js

 import {
-    TOGGLE_SIDEBAR, SET_SELECTED_FACILITY, SET_SEARCH_TERM, SET_FILTERED_LIST,
-    ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP, SET_SIDEBAR, 
+    TOGGLE_SIDEBAR, SET_SELECTED_FACILITY, SET_SEARCH_TERM, SET_CAMPUS_REGION,
+    ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP, SET_SIDEBAR,
 } from '../actions/action-types'
 
 const selectedFacility = (state = {}, action) => {
@@ -37,8 +37,9 @@ const sidebar = (state=sidebarDefault,action) => {
 };
 
 const searchbarState = {
-    term:'',
-    filteredList:[],
+    term: '',
+    campusRegion: 'fairfax',
+    filteredList: [],
 };
 
 const filterList = (state) =>{
@@ -50,6 +51,10 @@ const search = (state=searchbarState,facilities=[],action) =>{
             return Object.assign({},state,{
                 term:action.term,
             });
+        case SET_CAMPUS_REGION:
+            return Object.assign({}, state, {
+                campusRegion: action.campusRegion
+            });
         default:
             return state;
     }

src/styles/containers/searchBar.scss

@@ -40,6 +40,11 @@
   display: none !important;
 }
 
+.search-bar-campus-control {
+  width: 150px;
+  justify-content: center;
+}
+
 .search-bar-has-value {
   .search-bar-close-btn {
     display: inline-flex !important;
@@ -75,11 +80,19 @@
     width: 0 !important;
   }
 
+  .search-bar-campus-control {
+    display: none !important;
+  }
+
   .search-bar-mobile-open {
     .search-bar-input {
       width: 100% !important;
     }
 
+    .search-bar-campus-control {
+      display: inline-flex !important;
+    }
+
     .search-bar-search-btn {
       display: none !important;
     }