From 3a9807f2e37400844bbae86344d1424efbcc286f Mon Sep 17 00:00:00 2001
From: Esko Ikkala <esko.ikkala@aalto.fi>
Date: Tue, 19 Jun 2018 11:11:04 +0300
Subject: [PATCH] Selectable data sources
---
src/client/actions/index.js | 8 ++---
src/client/components/DatasetSelector.js | 35 ++++++++++---------
.../components/IntegrationAutosuggest.js | 2 +-
src/client/containers/MapApp.js | 8 ++---
src/client/reducers/search.js | 14 ++++++--
5 files changed, 38 insertions(+), 29 deletions(-)
diff --git a/src/client/actions/index.js b/src/client/actions/index.js
index 44835036..73132ff7 100644
--- a/src/client/actions/index.js
+++ b/src/client/actions/index.js
@@ -1,7 +1,7 @@
export const OPEN_DRAWER = 'OPEN_DRAWER';
export const CLOSE_DRAWER = 'CLOSE_DRAWER';
export const UPDATE_QUERY = 'UPDATE_QUERY';
-export const UPDATE_DATASETS = 'UPDATE_DATASETS';
+export const TOGGLE_DATASET = 'TOGGLE_DATASET';
export const START_SPINNER = 'START_SPINNER';
export const FETCH_SUGGESTIONS = 'FETCH_SUGGESTIONS';
export const FETCH_SUGGESTIONS_FAILED = 'FETCH_SUGGESTIONS_FAILED';
@@ -31,9 +31,9 @@ export const updateQuery = (query) => ({
query
});
-export const updateDatasets = (datasets) => ({
- type: UPDATE_DATASETS,
- datasets
+export const toggleDataset = (dataset) => ({
+ type: TOGGLE_DATASET,
+ dataset
});
export const startSpinner = () => ({
diff --git a/src/client/components/DatasetSelector.js b/src/client/components/DatasetSelector.js
index c203d0ab..47b2e478 100644
--- a/src/client/components/DatasetSelector.js
+++ b/src/client/components/DatasetSelector.js
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+//import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
-import IconButton from '@material-ui/core/IconButton';
-import CommentIcon from '@material-ui/icons/Comment';
+//import IconButton from '@material-ui/core/IconButton';
+//import CommentIcon from '@material-ui/icons/Comment';
import ListSubheader from '@material-ui/core/ListSubheader';
const styles = theme => ({
@@ -25,35 +25,36 @@ const styles = theme => ({
const DatasetSelector = props => {
const { classes } = props;
- //onClick={props.updateDatasets(dataset.id)}
- const handleOnChange = (value) => {
- props.updateDatasets(value);
+ const handleToggle = value => () => {
+ props.toggleDataset(value);
};
+ // <ListItemSecondaryAction>
+ // <IconButton aria-label="Comments">
+ // <CommentIcon />
+ // </IconButton>
+ // </ListItemSecondaryAction>
+
return (
<div className={classes.root}>
<List subheader={<ListSubheader>Select data sources</ListSubheader>}>
- {Object.keys(props.datasets).map(key => (
+ {Object.keys(props.datasets).map(id => (
<ListItem
- key={key}
+ key={id}
role={undefined}
dense
button
- onClick={handleOnChange}
+ onClick={handleToggle(id)}
className={classes.listItem}
>
<Checkbox
- checked={props.datasets[key].selected}
+ checked={props.datasets[id].selected}
tabIndex={-1}
disableRipple
/>
- <ListItemText primary={props.datasets[key].title} />
- <ListItemSecondaryAction>
- <IconButton aria-label="Comments">
- <CommentIcon />
- </IconButton>
- </ListItemSecondaryAction>
+ <ListItemText primary={props.datasets[id].title} />
+
</ListItem>
))}
</List>
@@ -64,7 +65,7 @@ const DatasetSelector = props => {
DatasetSelector.propTypes = {
classes: PropTypes.object.isRequired,
datasets: PropTypes.object.isRequired,
- updateDatasets: PropTypes.func.isRequired
+ toggleDataset: PropTypes.func.isRequired
};
export default withStyles(styles)(DatasetSelector);
diff --git a/src/client/components/IntegrationAutosuggest.js b/src/client/components/IntegrationAutosuggest.js
index 1b76d9ed..52e27b9d 100644
--- a/src/client/components/IntegrationAutosuggest.js
+++ b/src/client/components/IntegrationAutosuggest.js
@@ -127,7 +127,7 @@ const IntegrationAutosuggest = (props) => {
// };
const handleOnSuggestionsFetchRequested = ({ value }) => {
- if (props.search.suggestionsQuery != value ) {
+ if (props.search.suggestionsQuery != value || props.search.suggestions.length === 0) {
console.log('fetching suggestions');
props.fetchSuggestions();
}
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index a6c3c3d3..b9aecd37 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -22,7 +22,7 @@ import DatasetSelector from '../components/DatasetSelector';
import Immutable from 'immutable';
import {
updateQuery,
- updateDatasets,
+ toggleDataset,
fetchSuggestions,
clearSuggestions,
fetchResults,
@@ -155,7 +155,7 @@ let MapApp = (props) => {
<Divider />
<DatasetSelector
datasets={props.search.datasets}
- updateDatasets={props.updateDatasets}
+ toggleDataset={props.toggleDataset}
/>
<Divider />
<IntegrationAutosuggest
@@ -247,7 +247,7 @@ const mapDispatchToProps = ({
openDrawer,
closeDrawer,
updateQuery,
- updateDatasets,
+ toggleDataset,
fetchSuggestions,
clearSuggestions,
fetchResults,
@@ -266,7 +266,7 @@ MapApp.propTypes = {
openDrawer: PropTypes.func.isRequired,
closeDrawer: PropTypes.func.isRequired,
updateQuery: PropTypes.func.isRequired,
- updateDatasets: PropTypes.func.isRequired,
+ toggleDataset: PropTypes.func.isRequired,
fetchSuggestions: PropTypes.func.isRequired,
clearSuggestions: PropTypes.func.isRequired,
fetchResults: PropTypes.func.isRequired,
diff --git a/src/client/reducers/search.js b/src/client/reducers/search.js
index dd3e3b81..73dfe7c4 100644
--- a/src/client/reducers/search.js
+++ b/src/client/reducers/search.js
@@ -1,6 +1,6 @@
import {
UPDATE_QUERY,
- UPDATE_DATASETS,
+ TOGGLE_DATASET,
FETCH_SUGGESTIONS,
FETCH_RESULTS,
UPDATE_SUGGESTIONS,
@@ -49,10 +49,18 @@ const search = (state = INITIAL_STATE, action) => {
switch (action.type) {
case UPDATE_QUERY:
return { ...state, query: action.query || '' };
- case UPDATE_DATASETS:
+ case TOGGLE_DATASET:
return {
...state,
- datasets: state.datasets
+ suggestions: [],
+ results: [],
+ datasets: {
+ ...state.datasets,
+ [action.dataset]: {
+ ...state.datasets[action.dataset],
+ selected: state.datasets[action.dataset].selected ? false : true
+ }
+ }
};
case FETCH_SUGGESTIONS:
return { ...state, fetchingSuggestions: true };
--
GitLab