Began work on search

frontend/src/components/App.js

@@ -33,6 +33,7 @@ import {
 
 import PageMap from './pages/PageMap';
 import PageHome from './pages/PageHome';
+import PageSearch from './pages/PageSearch';
 
 const drawerWidth = 240;
 
@@ -114,7 +115,7 @@ class App extends MyComponent {
     };
 
     myRender() {
-        
+
         const { classes } = this.props;
 
         return (
@@ -158,7 +159,7 @@ class App extends MyComponent {
 
                         <Route path="/app/" exact={true} component={PageHome} />
                         <Route path="/app/map" component={PageMap} />
-
+                        <Route path="/app/search" component={PageSearch} />
 
                     </main>
                 </div>

frontend/src/components/pages/PageSearch.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Search from '../search/Search';
+import Paper from '@material-ui/core/Paper';
+
+const styles = theme => ({
+  myPaper: {
+    padding: 16
+  }
+});
+
+class PageMap extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <Paper className={classes.myPaper}>
+        <Grid container spacing={24}>
+          <Grid item xs={11}>
+            <Typography variant="display1" gutterBottom>
+              Recherche
+            </Typography>
+          </Grid>
+          {/* <Grid item xs={1}>
+                        <UnivMapReloadButton />
+                    </Grid> */}
+        </Grid>
+        <Search />
+      </Paper>
+    );
+  }
+}
+
+PageMap.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PageMap);

frontend/src/components/search/Search.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import deburr from 'lodash/deburr';
+import keycode from 'keycode';
+import Downshift from 'downshift';
+import { withStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Paper from '@material-ui/core/Paper';
+import MenuItem from '@material-ui/core/MenuItem';
+import Chip from '@material-ui/core/Chip';
+import _ from 'underscore'
+
+const suggestions = [
+  { label: 'Afghanistan', id: 1 },
+  { label: 'Aland Islands', id: 2 },
+  { label: 'Albania', id: 3 },
+  { label: 'Algeria', id: 4 },
+];
+
+function renderInput(inputProps) {
+  const { InputProps, classes, ref, ...other } = inputProps;
+
+  return (
+    <TextField
+      InputProps={{
+        inputRef: ref,
+        classes: {
+          root: classes.inputRoot,
+        },
+        ...InputProps,
+      }}
+      {...other}
+    />
+  );
+}
+
+function renderSuggestion({ suggestion, index, itemProps, highlightedIndex, selectedItem }) {
+  const isHighlighted = highlightedIndex === index;
+  const isSelected = (selectedItem || '').indexOf(suggestion) > -1;
+
+  return (
+    <MenuItem
+      {...itemProps}
+      key={suggestion.label}
+      selected={isHighlighted}
+      component="div"
+      style={{
+        fontWeight: isSelected ? 500 : 400,
+      }}
+    >
+      {suggestion.label}
+    </MenuItem>
+  );
+}
+renderSuggestion.propTypes = {
+  highlightedIndex: PropTypes.number,
+  index: PropTypes.number,
+  itemProps: PropTypes.object,
+  selectedItem: PropTypes.string,
+  suggestion: PropTypes.shape({ label: PropTypes.string, id: PropTypes.number }).isRequired,
+};
+
+
+class DownshiftMultiple extends React.Component {
+  state = {
+    inputValue: '',
+    selectedItem: [],
+  };
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.state.selectedItem != prevState.selectedItem) {
+      this.props.onChange(this.state.selectedItem);
+    }
+  }
+
+
+  getSuggestions(value) {
+    const inputValue = deburr(value.trim()).toLowerCase();
+    const inputLength = inputValue.length;
+    let count = 0;
+    if (inputLength === 0) {
+      return []
+    } else {
+      let out = _.difference(suggestions, this.state.selectedItem).filter(suggestion => {
+        const keep =
+          count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
+
+        if (keep) {
+          count += 1;
+        }
+
+        return keep;
+      });
+      return out;
+    }
+  }
+
+  handleKeyDown = event => {
+    const { inputValue, selectedItem } = this.state;
+    if (selectedItem.length && !inputValue.length && keycode(event) === 'backspace') {
+      this.setState({
+        selectedItem: selectedItem.slice(0, selectedItem.length - 1),
+      });
+    }
+  };
+
+  handleInputChange = event => {
+    this.setState({ inputValue: event.target.value });
+  };
+
+  handleChange = item => {
+    let { selectedItem } = this.state;
+    if (selectedItem.indexOf(item) === -1) {
+      for (let ind in suggestions) {
+        let el = suggestions[ind]
+        if (el.id == item) {
+          selectedItem = [...selectedItem, el];
+          break;
+        }
+      }
+    }
+
+    this.setState({
+      inputValue: '',
+      selectedItem,
+    });
+  };
+
+  handleDelete = item => () => {
+    this.setState(state => {
+      const selectedItem = [...state.selectedItem];
+      selectedItem.splice(selectedItem.indexOf(item), 1);
+      return { selectedItem };
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { inputValue, selectedItem } = this.state;
+
+    return (
+      <Downshift
+        id="downshift-multiple"
+        inputValue={inputValue}
+        onChange={this.handleChange}
+        selectedItem={selectedItem}
+      >
+        {({
+          getInputProps,
+          getItemProps,
+          isOpen,
+          inputValue: inputValue2,
+          selectedItem: selectedItem2,
+          highlightedIndex,
+        }) => (
+            <div className={classes.container}>
+              {renderInput({
+                fullWidth: true,
+                classes,
+                InputProps: getInputProps({
+                  startAdornment: selectedItem.map(item => (
+                    <Chip
+                      key={item.id}
+                      tabIndex={-1}
+                      label={item.label}
+                      className={classes.chip}
+                      onDelete={this.handleDelete(item.id)}
+                    />
+                  )),
+                  onChange: this.handleInputChange,
+                  onKeyDown: this.handleKeyDown,
+                  placeholder: 'Select multiple countries',
+                }),
+                label: 'Label',
+              })}
+              {isOpen ? (
+                <Paper className={classes.paper} square>
+                  {this.getSuggestions(inputValue2).map((suggestion, index) =>
+                    renderSuggestion({
+                      suggestion,
+                      index,
+                      itemProps: getItemProps({ item: suggestion.id }),
+                      highlightedIndex,
+                      selectedItem: selectedItem2,
+                    }),
+                  )}
+                </Paper>
+              ) : null}
+            </div>
+          )}
+      </Downshift>
+    );
+  }
+}
+
+DownshiftMultiple.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    height: 250,
+  },
+  container: {
+    flexGrow: 1,
+    position: 'relative',
+  },
+  paper: {
+    position: 'absolute',
+    zIndex: 1,
+    marginTop: theme.spacing.unit,
+    left: 0,
+    right: 0,
+  },
+  chip: {
+    margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+  },
+  inputRoot: {
+    flexWrap: 'wrap',
+  },
+  divider: {
+    height: theme.spacing.unit * 2,
+  },
+});
+
+
+function IntegrationDownshift(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+
+      <div className={classes.divider} />
+      <DownshiftMultiple classes={classes} onChange={(selection) => console.log(selection)} />
+      <div className={classes.divider} />
+
+    </div>
+  );
+}
+
+IntegrationDownshift.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(IntegrationDownshift);

frontend/src/components/template/listItems.js

@@ -33,12 +33,15 @@ export const mainListItems = (
             </ListItem>
         </NavLink>
 
-        <ListItem button>
-            <ListItemIcon>
-                <SearchIcon />
-            </ListItemIcon>
-            <ListItemText primary="Recherche" />
-        </ListItem>
+        <NavLink to={'/app/search/'}>
+            <ListItem button>
+                <ListItemIcon>
+                    <SearchIcon />
+                </ListItemIcon>
+                <ListItemText primary="Recherche" />
+            </ListItem>
+        </NavLink>
+
 
         <ListItem button>
             <ListItemIcon>

package-lock.json

@@ -2004,6 +2004,11 @@
       "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
       "dev": true
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.8.tgz",
+      "integrity": "sha512-iAUjocygqXSGQb3zUHvAHwcf3BiMihlnphNSKCAqS6v9wNHlFe7260zNqoFjS/YBKJjbbvrXwY6/Wdg5mJ91Lw=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2471,6 +2476,15 @@
       "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
       "dev": true
     },
+    "downshift": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-2.2.0.tgz",
+      "integrity": "sha512-OaNHL6fXK2f872y2/OlaykDjV+GgYilh/LTFo8ezktkfRreyumiQ5gZgVjGxq/XrzYI8eBxRnOJApsHyW1RN5w==",
+      "requires": {
+        "compute-scroll-into-view": "^1.0.2",
+        "prop-types": "^15.6.0"
+      }
+    },
     "duplexify": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.0.tgz",
@@ -3152,8 +3166,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3280,8 +3293,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3293,7 +3305,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3419,8 +3430,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3553,7 +3563,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6538,6 +6547,11 @@
         }
       }
     },
+    "underscore": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz",
+      "integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg=="
+    },
     "union-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",

package.json

@@ -18,13 +18,15 @@
     "@material-ui/core": "^3.0.1",
     "babel-polyfill": "^6.26.0",
     "cross-fetch": "^2.2.2",
+    "downshift": "^2.2.0",
     "js-cookie": "^2.2.0",
     "leaflet.markercluster": "^1.3.0",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.0",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "underscore": "^1.9.1"
   },
   "devDependencies": {
     "@material-ui/icons": "^2.0.3",