Merge remote-tracking branch 'origin/master' into facility-cards

.eslintrc.json

@@ -2,7 +2,7 @@
     "env": {
         "browser": true,
         "commonjs": true,
-        "es6": false,
+        "es6": true,
         "node": true
     },
     "parserOptions": {

package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "autosuggest-highlight": "^3.1.0",
     "classnames": "^2.2.5",
     "history": "^4.6.3",
     "immutability-helper": "^2.3.0",
     "material-ui": "next",
     "material-ui-icons": "^1.0.0-alpha.19",
     "react": "^15.6.1",
+    "react-autosuggest": "^9.3.2",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.5",
     "react-router-dom": "^4.1.2",

src/actions/action-types.js

@@ -2,3 +2,4 @@ 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

src/actions/ui.js

-import { TOGGLE_DRAWER,SET_SIDEBAR } from './action-types';
+import { TOGGLE_DRAWER,SET_SIDEBAR,SET_SEARCH_TERM,SET_FILTERED_LIST } from './action-types';
 
 export const toggleDrawer =  () => ({
     type:TOGGLE_DRAWER,
@@ -8,3 +8,9 @@ export const setSidebar = (facility) => ({
     type:SET_SIDEBAR,
     facility,
 })
+
+export const setSearchTerm = (term) => ({
+    type:SET_SEARCH_TERM,
+    term,
+})
+

src/components/CardContainer.js

@@ -20,6 +20,7 @@ const styleSheet = {
         height: '100%',
         display: 'flex',
         flexWrap: 'wrap',
+        overflowY:'scroll',
     }
 }
 

src/containers/Layout.js

@@ -5,9 +5,48 @@ import {connect} from 'react-redux';
 import {toggleDrawer} from '../actions/ui';
 import AppBar from '../components/AppBar';
 import Sidebar from '../components/Sidebar';
-import {getFacilities, setFacilities} from '../actions/api'
+import {getFacilities, setFacilities} from '../actions/api';
 import Button from 'material-ui/Button';
-import CardContainer from '../components/CardContainer'
+import CardContainer from '../components/CardContainer';
+import SearchBar from './SearchBar';
+
+const suggestions = [
+    { label: 'Afghanistan' },
+    { label: 'Aland Islands' },
+    { label: 'Albania' },
+    { label: 'Algeria' },
+    { label: 'American Samoa' },
+    { label: 'Andorra' },
+    { label: 'Angola' },
+    { label: 'Anguilla' },
+    { label: 'Antarctica' },
+    { label: 'Antigua and Barbuda' },
+    { label: 'Argentina' },
+    { label: 'Armenia' },
+    { label: 'Aruba' },
+    { label: 'Australia' },
+    { label: 'Austria' },
+    { label: 'Azerbaijan' },
+    { label: 'Bahamas' },
+    { label: 'Bahrain' },
+    { label: 'Bangladesh' },
+    { label: 'Barbados' },
+    { label: 'Belarus' },
+    { label: 'Belgium' },
+    { label: 'Belize' },
+    { label: 'Benin' },
+    { label: 'Bermuda' },
+    { label: 'Bhutan' },
+    { label: 'Bolivia, Plurinational State of' },
+    { label: 'Bonaire, Sint Eustatius and Saba' },
+    { label: 'Bosnia and Herzegovina' },
+    { label: 'Botswana' },
+    { label: 'Bouvet Island' },
+    { label: 'Brazil' },
+    { label: 'British Indian Ocean Territory' },
+    { label: 'Brunei Darussalam' },
+  ];
+
 class Layout extends React.Component {
     constructor(props){
         super(props);
@@ -31,6 +70,7 @@ class Layout extends React.Component {
                         {/* <Button raised onClick={getFacilities} className={classes.button}>
                             Default
                         </Button> */}
+                        <SearchBar suggestions={suggestions}/>
                         <CardContainer facilities={this.props.facilities}/>
                     </div> 
                     <Sidebar facility={sidebarFacility}/>
@@ -55,7 +95,7 @@ const styleSheet = {
         boxSizing:'border-box',
         flex:'1 1 100%',
         height:'100%',
-        margin:16,
+        padding:16,
     },
 }
 

src/containers/SearchBar.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import Autosuggest from 'react-autosuggest';
+import TextField from 'material-ui/TextField';
+import Paper from 'material-ui/Paper';
+import { MenuItem } from 'material-ui/Menu';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
+import { withStyles } from 'material-ui/styles';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { setSearchTerm} from '../actions/ui';
+import Search from 'material-ui-icons/Search'
+import Input from 'material-ui/Input';
+// import Select from 'material-ui/Select';
+
+const createSuggestions = () => {
+
+}
+
+
+
+function renderInput(inputProps) {
+  const { classes, home, value, ref, ...other } = inputProps;
+
+  return (
+    <TextField
+      autoFocus={home}
+      className={classes.textField}
+      value={value}
+      inputRef={ref}
+      InputProps={{
+        classes: {
+          input: classes.input,
+        },
+        disableUnderline:true,
+        ...other,
+      }}
+    />
+  );
+}
+
+function renderSuggestion(suggestion, { query, isHighlighted }) {
+  const matches = match(suggestion.label, query);
+  const parts = parse(suggestion.label, matches);
+
+  return (
+    <MenuItem selected={isHighlighted} component="div">
+      <div>
+        {parts.map((part, index) => {
+          return part.highlight ? (
+            <span key={index} style={{ fontWeight: 300 }}>
+              {part.text}
+            </span>
+          ) : (
+            <strong key={index} style={{ fontWeight: 500 }}>
+              {part.text}
+            </strong>
+          );
+        })}
+      </div>
+    </MenuItem>
+  );
+}
+
+function renderSuggestionsContainer(options) {
+  const { containerProps, children } = options;
+
+  return (
+    <Paper {...containerProps} square>
+      {children}
+    </Paper>
+  );
+}
+
+function getSuggestionValue(suggestion) {
+  return suggestion.label;
+}
+
+function getSuggestions(value,suggestions) {
+  const inputValue = value.trim().toLowerCase();
+  const inputLength = inputValue.length;
+  let count = 0;
+
+  return inputLength === 0
+    ? []
+    : suggestions.filter(suggestion => {
+        const keep =
+          count < 5 && suggestion.label.toLowerCase().slice(0, inputLength) === inputValue;
+
+        if (keep) {
+          count += 1;
+        }
+
+        return keep;
+      });
+}
+
+const styles = theme => ({
+  container: {
+    flexGrow: 1,
+    position: 'relative',
+    // height: 40,
+  },
+  suggestionsContainerOpen: {
+    position: 'absolute',
+    zIndex:1000,
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit * 3,
+    left: 0,
+    right: 0,
+  },
+  suggestion: {
+    display: 'block',
+  },
+  suggestionsList: {
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none',
+  },
+  textField: {
+    width: '100%',
+    height:48,
+  },
+  input:{
+      height:40,
+      marginLeft:8,
+  },
+  paperBackground:{
+      height:54,
+      width:600,
+      display:'flex',
+      margin:'0px auto 16px auto',
+  },
+  rightSearchContainer:{
+    height:'100%',
+    display:'flex',
+    alignItems:'center',
+    marginLeft:8,
+    marginRight:8,
+  },
+  searchIcon:{
+      display:'block',
+      opacity:.54,
+  }
+});
+
+class IntegrationAutosuggest extends React.Component {
+  state = {
+    value: '',
+    // suggestions: [],
+  };
+
+  handleSuggestionsFetchRequested = ({ value }) => {
+    this.setState({
+      suggestions: getSuggestions(value,this.props.suggestions),
+    });
+  };
+
+  handleSuggestionsClearRequested = () => {
+    this.setState({
+      suggestions: [],
+    });
+  };
+
+  handleChange = (event, { newValue }) => {
+    this.setState({
+      value: newValue,
+    });
+    this.props.setSearchTerm(newValue)
+  };
+
+  render() {
+    const { classes,setSearchTerm,suggestions } = this.props;
+
+    return (
+        <Paper className={classes.paperBackground}>
+
+      <Autosuggest
+        theme={{
+          container: classes.container,
+          suggestionsContainerOpen: classes.suggestionsContainerOpen,
+          suggestionsList: classes.suggestionsList,
+          suggestion: classes.suggestion,
+        }}
+        renderInputComponent={renderInput}
+        suggestions={getSuggestions(this.state.value,suggestions)}
+        onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
+        onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
+        renderSuggestionsContainer={renderSuggestionsContainer}
+        getSuggestionValue={getSuggestionValue}
+        renderSuggestion={renderSuggestion}
+        inputProps={{
+          autoFocus: true,
+          classes,
+          placeholder: 'names, locations, etc',
+          value: this.state.value,
+          onChange: this.handleChange,
+        }}
+      />
+      <div className={classes.rightSearchContainer}>
+      {/* <Select
+      native
+      value={this.state.age}
+      onChange={this.handleChange('age')}
+      input={<Input id="age-native-simple" />}
+    >
+      <option value="" />
+      <option value={10}>Ten</option>
+      <option value={20}>Twenty</option>
+      <option value={30}>Thirty</option>
+    </Select> */}
+          <Search className={classes.searchIcon}/>
+      </div>
+        </Paper>
+    );
+  }
+}
+
+IntegrationAutosuggest.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+
+export default compose(connect(null,{setSearchTerm}),withStyles(styles))(IntegrationAutosuggest);
\ No newline at end of file

src/index.css

@@ -8,7 +8,7 @@ height: 100%;
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-background-color: #fafafa;
+background-color: #f1f2f6;
 }
 body>#root{
     width:100%;

src/index.js

@@ -19,6 +19,11 @@ import green from 'material-ui/colors/green';
 // Create a history of your choosing (we're using a browser history in this case)
 const history = createHistory()
 const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
+if(extension){
+    const enhance = compose(
+        applyMiddleware(ReduxThunk,routerMiddleware(history))
+        ,extension)
+}
 const enhance = compose(
         applyMiddleware(ReduxThunk,routerMiddleware(history))
         ,extension)

src/reducers/ui.js

-import {TOGGLE_DRAWER,SET_SIDEBAR } from '../actions/action-types'
+import {TOGGLE_DRAWER,SET_SIDEBAR,SET_SEARCH_TERM,SET_FILTERED_LIST } from '../actions/action-types'
 
 function isOpen(state=false,action){
     switch (action.type) {
@@ -8,9 +8,11 @@ function isOpen(state=false,action){
             return state
     }
 }
+
 const drawer = (state={},action) => ({
     isOpen:isOpen(state.isOpen,action)
 })
+
 const sidebar = (state={},action) => {
     switch(action.type){
         case SET_SIDEBAR:
@@ -19,8 +21,29 @@ const sidebar = (state={},action) => {
             return {}
     }
 }
+
+const searchbarState = {
+    term:'',
+    filteredList:[],
+}
+
+const filterList = (state) =>{
+
+}
+const search = (state=searchbarState,facilities=[],action) =>{
+    switch(action.type){
+        case SET_SEARCH_TERM:
+            return Object.assign({},state,{
+                term:action.term,
+            });
+        default:
+            return state;
+    }
+}
+
 const ui = (state={},action) =>({
     drawer:drawer(state.drawer,action),
     sidebar:sidebar(state.sidbar,action),
+    search: search(state.search,state.facilities,action),
 })
 export default ui;

src/theme.js

+const theme = {
+    "direction": "ltr",
+    "palette": {
+      "common": {
+        "black": "#000",
+        "white": "#fff",
+        "transparent": "rgba(0, 0, 0, 0)",
+        "fullBlack": "rgba(0, 0, 0, 1)",
+        "darkBlack": "rgba(0, 0, 0, 0.87)",
+        "lightBlack": "rgba(0, 0, 0, 0.54)",
+        "minBlack": "rgba(0, 0, 0, 0.26)",
+        "faintBlack": "rgba(0, 0, 0, 0.12)",
+        "fullWhite": "rgba(255, 255, 255, 1)",
+        "darkWhite": "rgba(255, 255, 255, 0.87)",
+        "lightWhite": "rgba(255, 255, 255, 0.54)"
+      },
+      "type": "light",
+      "primary": {
+        "50": "#e3f2fd",
+        "100": "#bbdefb",
+        "200": "#90caf9",
+        "300": "#64b5f6",
+        "400": "#42a5f5",
+        "500": "#2196f3",
+        "600": "#1e88e5",
+        "700": "#1976d2",
+        "800": "#1565c0",
+        "900": "#0d47a1",
+        "A100": "#82b1ff",
+        "A200": "#448aff",
+        "A400": "#2979ff",
+        "A700": "#2962ff",
+        "contrastDefaultColor": "light"
+      },
+      "secondary": {
+        "50": "#fce4ec",
+        "100": "#f8bbd0",
+        "200": "#f48fb1",
+        "300": "#f06292",
+        "400": "#ec407a",
+        "500": "#e91e63",
+        "600": "#d81b60",
+        "700": "#c2185b",
+        "800": "#ad1457",
+        "900": "#880e4f",
+        "A100": "#ff80ab",
+        "A200": "#ff4081",
+        "A400": "#f50057",
+        "A700": "#c51162",
+        "contrastDefaultColor": "light"
+      },
+      "error": {
+        "50": "#ffebee",
+        "100": "#ffcdd2",
+        "200": "#ef9a9a",
+        "300": "#e57373",
+        "400": "#ef5350",
+        "500": "#f44336",
+        "600": "#e53935",
+        "700": "#d32f2f",
+        "800": "#c62828",
+        "900": "#b71c1c",
+        "A100": "#ff8a80",
+        "A200": "#ff5252",
+        "A400": "#ff1744",
+        "A700": "#d50000",
+        "contrastDefaultColor": "light"
+      },
+      "grey": {
+        "50": "#fafafa",
+        "100": "#f5f5f5",
+        "200": "#eeeeee",
+        "300": "#e0e0e0",
+        "400": "#bdbdbd",
+        "500": "#9e9e9e",
+        "600": "#757575",
+        "700": "#616161",
+        "800": "#424242",
+        "900": "#212121",
+        "A100": "#d5d5d5",
+        "A200": "#aaaaaa",
+        "A400": "#303030",
+        "A700": "#616161",
+        "contrastDefaultColor": "dark"
+      },
+      "shades": {
+        "dark": {
+          "text": {
+            "primary": "rgba(255, 255, 255, 1)",
+            "secondary": "rgba(255, 255, 255, 0.7)",
+            "disabled": "rgba(255, 255, 255, 0.5)",
+            "hint": "rgba(255, 255, 255, 0.5)",
+            "icon": "rgba(255, 255, 255, 0.5)",
+            "divider": "rgba(255, 255, 255, 0.12)",
+            "lightDivider": "rgba(255, 255, 255, 0.075)"
+          },
+          "input": {
+            "bottomLine": "rgba(255, 255, 255, 0.7)",
+            "helperText": "rgba(255, 255, 255, 0.7)",
+            "labelText": "rgba(255, 255, 255, 0.7)",
+            "inputText": "rgba(255, 255, 255, 1)",
+            "disabled": "rgba(255, 255, 255, 0.5)"
+          },
+          "action": {
+            "active": "rgba(255, 255, 255, 1)",
+            "disabled": "rgba(255, 255, 255, 0.3)"
+          },
+          "background": {
+            "default": "#303030",
+            "paper": "#424242",
+            "appBar": "#212121",
+            "contentFrame": "#212121",
+            "status": "#000"
+          }
+        },
+        "light": {
+          "text": {
+            "primary": "rgba(0, 0, 0, 0.87)",
+            "secondary": "rgba(0, 0, 0, 0.54)",
+            "disabled": "rgba(0, 0, 0, 0.38)",
+            "hint": "rgba(0, 0, 0, 0.38)",
+            "icon": "rgba(0, 0, 0, 0.38)",
+            "divider": "rgba(0, 0, 0, 0.12)",
+            "lightDivider": "rgba(0, 0, 0, 0.075)"
+          },
+          "input": {
+            "bottomLine": "rgba(0, 0, 0, 0.42)",
+            "helperText": "rgba(0, 0, 0, 0.54)",
+            "labelText": "rgba(0, 0, 0, 0.54)",
+            "inputText": "rgba(0, 0, 0, 0.87)",
+            "disabled": "rgba(0, 0, 0, 0.42)"
+          },
+          "action": {
+            "active": "rgba(0, 0, 0, 0.54)",
+            "disabled": "rgba(0, 0, 0, 0.26)"
+          },
+          "background": {
+            "default": "#fafafa",
+            "paper": "#fff",
+            "appBar": "#f5f5f5",
+            "contentFrame": "#eeeeee"
+          }
+        }
+      },
+      "text": {
+        "primary": "rgba(0, 0, 0, 0.87)",
+        "secondary": "rgba(0, 0, 0, 0.54)",
+        "disabled": "rgba(0, 0, 0, 0.38)",
+        "hint": "rgba(0, 0, 0, 0.38)",
+        "icon": "rgba(0, 0, 0, 0.38)",
+        "divider": "rgba(0, 0, 0, 0.12)",
+        "lightDivider": "rgba(0, 0, 0, 0.075)"
+      },
+      "input": {
+        "bottomLine": "rgba(0, 0, 0, 0.42)",
+        "helperText": "rgba(0, 0, 0, 0.54)",
+        "labelText": "rgba(0, 0, 0, 0.54)",
+        "inputText": "rgba(0, 0, 0, 0.87)",
+        "disabled": "rgba(0, 0, 0, 0.42)"
+      },
+      "action": {
+        "active": "rgba(0, 0, 0, 0.54)",
+        "disabled": "rgba(0, 0, 0, 0.26)"
+      },
+      "background": {
+        "default": "#fafafa",
+        "paper": "#fff",
+        "appBar": "#f5f5f5",
+        "contentFrame": "#eeeeee"
+      }
+    },
+    "typography": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontSize": 14,
+      "fontWeightLight": 300,
+      "fontWeightRegular": 400,
+      "fontWeightMedium": 500,
+      "display4": {
+        "fontSize": 112,
+        "fontWeight": 300,
+        "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+        "letterSpacing": "-.04em",
+        "lineHeight": 1,
+        "color": "rgba(0, 0, 0, 0.54)"
+      },
+      "display3": {
+        "fontSize": 56,
+        "fontWeight": 400,