Add menu items for changing results view

package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
+    "babel-eslint": "^8.2.5",
     "babel-jest": "^22.4.4",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
@@ -34,10 +34,10 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",
-    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jest": "^21.17.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.9.1",
+    "eslint-plugin-react": "^7.10.0",
     "eslint-watch": "^3.1.5",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.0.7",
@@ -45,13 +45,13 @@
     "jest-enzyme": "^6.0.2",
     "react-test-renderer": "^16.4.1",
     "style-loader": "^0.20.3",
-    "webpack": "^4.12.0",
+    "webpack": "^4.12.2",
     "webpack-cli": "^2.1.5",
     "webpack-dev-server": "^3.1.4",
     "webpack-merge": "^4.1.3"
   },
   "dependencies": {
-    "@material-ui/core": "^1.2.1",
+    "@material-ui/core": "^1.3.0",
     "@material-ui/icons": "^1.1.0",
     "@material-ui/lab": "^1.0.0-alpha.5",
     "autosuggest-highlight": "^3.1.1",
@@ -63,7 +63,7 @@
     "leaflet": "^1.3.1",
     "leaflet.markercluster": "^1.3.0",
     "lodash": "^4.17.10",
-    "mui-datatables": "^2.0.0-beta-8",
+    "mui-datatables": "^2.0.0-beta-9",
     "node-fetch": "^2.1.2",
     "react": "^16.4.1",
     "react-alert-template-basic": "^1.0.0",
@@ -79,7 +79,7 @@
     "react-leaflet-markercluster": "^1.1.8",
     "react-redux": "^5.0.7",
     "react-redux-toastr": "^7.3.0",
-    "react-virtualized": "^9.19.1",
+    "react-virtualized": "^9.20.0",
     "redux": "^4.0.0",
     "redux-observable": "^0.18.0",
     "superagent": "^3.8.3",

src/client/actions/index.js

@@ -13,6 +13,7 @@ export const UPDATE_RESULTS = 'UPDATE_RESULTS';
 export const CLEAR_RESULTS = 'CLEAR_RESULTS';
 export const CLEAR_ERROR = 'CLEAR_ERROR';
 export const UPDATE_LANGUAGE = 'UPDATE_LANGUAGE';
+export const UPDATE_RESULT_FORMAT = 'UPDATE_RESULT_FORMAT';
 export const SET_MAP_READY = 'SET_MAP_READY';
 export const GET_GEOJSON = 'GET_GEOJSON';
 export const UPDATE_GEOJSON = 'UPDATE_GEOJSON';
@@ -85,6 +86,11 @@ export const updateLanguage = (language) => ({
   language
 });
 
+export const updateResultFormat = (resultFormat) => ({
+  type: UPDATE_RESULT_FORMAT,
+  resultFormat
+});
+
 export const setMapReady = () => ({
   type: SET_MAP_READY,
 });

src/client/components/IntegrationAutosuggest.js

@@ -8,8 +8,6 @@ import SuggestionItem from './SuggestionItem';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import IconButton from '@material-ui/core/IconButton';
-import SearchIcon from '@material-ui/icons/Search';
-import MenuIcon from '@material-ui/icons/Menu';
 import SearchButtons from './SearchButtons';
 
 function renderInput(inputProps) {
@@ -106,18 +104,6 @@ const IntegrationAutosuggest = (props) => {
     }
   };
 
-  const handleClickSearchButton = () => {
-    searchPlaces();
-  };
-
-  const handleClickOptionsButton = () => {
-    console.log('options')
-  };
-
-  const handleMouseDownButton = (event) => {
-    event.preventDefault();
-  };
-
   const searchPlaces = () => {
     if (props.search.query.length > 0) {
       console.log('fetching results');
@@ -165,7 +151,7 @@ const IntegrationAutosuggest = (props) => {
       </IconButton>
     </InputAdornment>;
   } else {
-    adornment = <SearchButtons search={props.search} />;
+    adornment = <SearchButtons search={props.search} updateResultFormat={props.updateResultFormat} />;
   }
 
   return (
@@ -207,7 +193,8 @@ IntegrationAutosuggest.propTypes = {
   fetchSuggestions: PropTypes.func.isRequired,
   clearSuggestions: PropTypes.func.isRequired,
   fetchResults: PropTypes.func.isRequired,
-  clearResults: PropTypes.func.isRequired
+  clearResults: PropTypes.func.isRequired,
+  updateResultFormat: PropTypes.func.isRequired
 };
 
 export default withStyles(styles)(IntegrationAutosuggest);

src/client/components/SearchButtons.js

@@ -19,12 +19,23 @@ class SearchButtons extends React.Component {
 
   handleClose = () => {
     this.setState({ anchorEl: null });
+
   };
 
   handleClickSearchButton = () => {
     console.log('places');
   };
 
+  handleClickStats = () => {
+    this.handleClose();
+    this.props.updateResultFormat('stats');
+  }
+
+  handleClickTable = () => {
+    this.handleClose();
+    this.props.updateResultFormat('table');
+  }
+
   handleMouseDownButton = (event) => {
     event.preventDefault();
   };
@@ -61,14 +72,14 @@ class SearchButtons extends React.Component {
             <CSVLink data={this.props.search.results}>Results as CSV</CSVLink>
           </MenuItem>
           <MenuItem
-            key='opt2'
-            onClick={this.handleClose}>
-            Option 2
+            key='stats'
+            onClick={this.handleClickStats}>
+            Results by place type
           </MenuItem>
           <MenuItem
-            key='otp3'
-            onClick={this.handleClose}>
-            Option 3
+            key='list'
+            onClick={this.handleClickTable}>
+            Results as a table
           </MenuItem>
         </Menu>
       </InputAdornment>
@@ -78,6 +89,7 @@ class SearchButtons extends React.Component {
 
 SearchButtons.propTypes = {
   search: PropTypes.object.isRequired,
+  updateResultFormat: PropTypes.func.isRequired
 };
 
 export default SearchButtons;

src/client/containers/MapApp.js

@@ -31,7 +31,8 @@ import {
   openDrawer,
   closeDrawer,
   setMapReady,
-  getGeoJSON
+  getGeoJSON,
+  updateResultFormat
 } from '../actions';
 
 const drawerWidth = 600;
@@ -126,12 +127,20 @@ let MapApp = (props) => {
   const { classes, error, theme, drawerIsOpen, mapReady } = props;
   const anchor = 'left';
 
-  let resultList = [];
+  let resultsView = '';
   if (props.search.results.length > 0) {
-    resultList = Immutable.List(props.search.results);
+    switch(props.resultFormat) {
+      case 'list':
+        resultsView = <VirtualizedTable list={Immutable.List(props.search.results)} />;
+        break;
+      case 'stats':
+        resultsView =  <Pie data={props.search.results} />;
+        break;
+      default:
+        resultsView = <VirtualizedTable list={Immutable.List(props.search.results)} />;
+    }
   }
 
-
   const drawer = (
     <Drawer
       variant="persistent"
@@ -171,14 +180,13 @@ let MapApp = (props) => {
           clearSuggestions={props.clearSuggestions}
           fetchResults={props.fetchResults}
           clearResults={props.clearResults}
+          updateResultFormat={props.updateResultFormat}
         />
       </div>
-      {props.search.results.length > 0 &&
-        <Pie data={props.search.results} />
-      }
+      {resultsView}
     </Drawer>
   );
-  //<VirtualizedTable list={resultList} />
+  //<
 
   let before = null;
   let after = null;
@@ -248,7 +256,8 @@ const mapStateToProps = (state) => ({
   mapReady: state.options.mapReady,
   error: state.error,
   geoJSON: state.map.geoJSON,
-  geoJSONKey: state.map.geoJSONKey
+  geoJSONKey: state.map.geoJSONKey,
+  resultFormat: state.options.resultFormat
 });
 
 const mapDispatchToProps = ({
@@ -261,7 +270,8 @@ const mapDispatchToProps = ({
   fetchResults,
   clearResults,
   setMapReady,
-  getGeoJSON
+  getGeoJSON,
+  updateResultFormat
 });
 
 MapApp.propTypes = {
@@ -283,6 +293,8 @@ MapApp.propTypes = {
   geoJSON: PropTypes.object.isRequired,
   geoJSONKey: PropTypes.number,
   getGeoJSON: PropTypes.func.isRequired,
+  updateResultFormat: PropTypes.func.isRequired,
+  resultFormat: PropTypes.string.isRequired
 };
 
 MapApp = connect(

src/client/reducers/options.js

 import {
   UPDATE_LANGUAGE,
+  UPDATE_RESULT_FORMAT,
   OPEN_DRAWER,
   CLOSE_DRAWER,
   SET_MAP_READY
@@ -7,9 +8,11 @@ import {
 
 const DEFAULT_LANGUAGE = 'en';
 const DEFAULT_DRAWER_IS_OPEN = false;
+const DEFAULT_RESULT_FORMAT = 'table';
 
 export const INITIAL_STATE = {
   language: DEFAULT_LANGUAGE,
+  resultFormat: DEFAULT_RESULT_FORMAT,
   drawerIsOpen: DEFAULT_DRAWER_IS_OPEN,
   mapReady: false
 };
@@ -18,6 +21,8 @@ const options = (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case UPDATE_LANGUAGE:
       return { ...state, language: action.language || DEFAULT_LANGUAGE };
+    case UPDATE_RESULT_FORMAT:
+      return { ...state, resultFormat: action.resultFormat || DEFAULT_RESULT_FORMAT };
     case OPEN_DRAWER:
       return { ...state, drawerIsOpen: true };
     case CLOSE_DRAWER: