From 6c841c692a34b5223b43d79859f20b114cb98acb Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Sat, 10 Nov 2018 04:10:40 -0800
Subject: [PATCH] Refactor filtering
---
src/client/actions/index.js | 26 ++++--------------------
src/client/components/FacetDialog.js | 9 +++++++-
src/client/components/Manuscripts.js | 4 +++-
src/client/components/ResultTable.js | 2 ++
src/client/components/ResultTableHead.js | 5 ++++-
src/client/components/Tree.js | 6 +++++-
src/client/containers/MapApp.js | 8 ++++++--
src/client/reducers/search.js | 21 +++++++++++--------
8 files changed, 44 insertions(+), 37 deletions(-)
diff --git a/src/client/actions/index.js b/src/client/actions/index.js
index 0258d1b9..9ffc6c5f 100644
--- a/src/client/actions/index.js
+++ b/src/client/actions/index.js
@@ -33,10 +33,8 @@ export const FETCH_FACET = 'FETCH_FACET';
export const UPDATE_FACET = 'UPDATE_FACET';
export const CLEAR_FACET = 'CLEAR_FACET';
export const FETCH_FACET_FAILED = 'FETCH_FACET_FAILED';
+export const UPDATE_FILTER = 'UPDATE_FILTER';
-
-
-export const UPDATE_RESULTS_FILTER = 'UPDATE_RESULTS_FILTER';
export const SORT_RESULTS = 'SORT_RESULTS';
export const CLEAR_ERROR = 'CLEAR_ERROR';
export const UPDATE_LANGUAGE = 'UPDATE_LANGUAGE';
@@ -70,26 +68,19 @@ export const removeTempMarker = () => ({
type: REMOVE_TEMP_MARKER,
});
-export const startSpinner = () => ({
- type: START_SPINNER,
-});
+// Suggestions
export const fetchSuggestions = () => ({
type: FETCH_SUGGESTIONS,
});
-
export const fetchSuggestionsFailed = (error) => ({
type: FETCH_SUGGESTIONS_FAILED,
error
});
-
-
-
export const updateSuggestions = ({ suggestions }) => ({
type: UPDATE_SUGGESTIONS,
suggestions
});
-
export const clearSuggestions = () => ({
type: CLEAR_SUGGESTIONS,
});
@@ -98,16 +89,13 @@ export const clearSuggestions = () => ({
export const fetchResults = () => ({
type: FETCH_RESULTS,
});
-
export const updateResults = ({ results }) => ({
type: UPDATE_RESULTS,
results
});
-
export const clearResults = () => ({
type: CLEAR_RESULTS,
});
-
export const fetchResultsFailed = (error) => ({
type: FETCH_RESULTS_FAILED,
error
@@ -118,16 +106,13 @@ export const fetchManuscripts = (page) => ({
type: FETCH_MANUSCRIPTS,
page
});
-
export const updateManuscripts = ({ manuscripts, page }) => ({
type: UPDATE_MANUSCRIPTS,
manuscripts, page
});
-
export const clearManuscripts = () => ({
type: CLEAR_MANUSCRIPTS,
});
-
export const fetchManuscriptsFailed = (error) => ({
type: FETCH_MANUSCRIPTS_FAILED,
error
@@ -149,7 +134,6 @@ export const fetchPlacesFailed = (error) => ({
type: FETCH_PLACES_FAILED,
error
});
-
export const fetchPlace = (placeId) => ({
type: FETCH_PLACE,
placeId
@@ -182,10 +166,8 @@ export const fetchFacetFailed = (error) => ({
type: FETCH_FACET_FAILED,
error
});
-
-
-export const updateResultsFilter = (filter) => ({
- type: UPDATE_RESULTS_FILTER,
+export const updateFilter = (filter) => ({
+ type: UPDATE_FILTER,
filter
});
diff --git a/src/client/components/FacetDialog.js b/src/client/components/FacetDialog.js
index b68f7fcf..4d4b2572 100644
--- a/src/client/components/FacetDialog.js
+++ b/src/client/components/FacetDialog.js
@@ -70,7 +70,13 @@ class FacetDialog extends React.Component {
<Typography variant="h6">{propertyLabel}</Typography>
</DialogTitle>
<DialogContent>
- {this.state.isLoading ? <CircularProgress style={{ color: purple[500] }} thickness={5} /> : <Tree data={facet.facetValues.creationPlace} /> }
+ {this.state.isLoading ?
+ <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ :
+ <Tree
+ data={facet.facetValues.creationPlace}
+ updateFilter={this.props.updateFilter}
+ />}
</DialogContent>
</Dialog>
</div>
@@ -85,6 +91,7 @@ FacetDialog.propTypes = {
propertyLabel: PropTypes.string.isRequired,
fetchFacet: PropTypes.func.isRequired,
facet: PropTypes.object.isRequired,
+ updateFilter: PropTypes.func.isRequired
};
export default withStyles(styles)(FacetDialog);
diff --git a/src/client/components/Manuscripts.js b/src/client/components/Manuscripts.js
index e4982e5b..67f19834 100644
--- a/src/client/components/Manuscripts.js
+++ b/src/client/components/Manuscripts.js
@@ -21,8 +21,9 @@ let Manuscripts = props => {
fetchManuscripts={props.fetchManuscripts}
fetchingManuscripts={props.search.fetchingManuscripts}
fetchFacet={props.fetchFacet}
- results={props.search.results}
fetchResults={props.fetchResults}
+ results={props.search.results}
+ updateFilter={props.updateFilter}
page={props.search.page}
/>}
/>
@@ -68,6 +69,7 @@ Manuscripts.propTypes = {
fetchPlace: PropTypes.func.isRequired,
fetchFacet: PropTypes.func.isRequired,
fetchResults: PropTypes.func.isRequired,
+ updateFilter: PropTypes.func.isRequired,
match: PropTypes.object.isRequired
};
diff --git a/src/client/components/ResultTable.js b/src/client/components/ResultTable.js
index 4bb0f666..d3c731ff 100644
--- a/src/client/components/ResultTable.js
+++ b/src/client/components/ResultTable.js
@@ -225,6 +225,7 @@ class ResultTable extends React.Component {
<ResultTableHead
fetchFacet={this.props.fetchFacet}
fetchManuscripts={this.props.fetchManuscripts}
+ updateFilter={this.props.updateFilter}
facet={this.props.facet}
results={this.props.results}
page={this.props.page}
@@ -280,6 +281,7 @@ ResultTable.propTypes = {
facet: PropTypes.object.isRequired,
results: PropTypes.number.isRequired,
fetchResults: PropTypes.func.isRequired,
+ updateFilter: PropTypes.func.isRequired,
page: PropTypes.number.isRequired
};
diff --git a/src/client/components/ResultTableHead.js b/src/client/components/ResultTableHead.js
index fd45ae53..df1d5336 100644
--- a/src/client/components/ResultTableHead.js
+++ b/src/client/components/ResultTableHead.js
@@ -106,7 +106,8 @@ class ResultTableHead extends React.Component {
render() {
const { classes, page, results } = this.props;
- const { rowsPerPage, order, orderBy } = this.state;
+ const { rowsPerPage } = this.state;
+ //order, orderBy
return (
<TableHead>
@@ -135,6 +136,7 @@ class ResultTableHead extends React.Component {
property={column.property}
propertyLabel={column.label}
fetchFacet={this.props.fetchFacet}
+ updateFilter={this.props.updateFilter}
facet={this.props.facet} />
</Tooltip>}
</TableCell>
@@ -150,6 +152,7 @@ ResultTableHead.propTypes = {
classes: PropTypes.object.isRequired,
fetchFacet: PropTypes.func.isRequired,
fetchManuscripts: PropTypes.func.isRequired,
+ updateFilter: PropTypes.func.isRequired,
facet: PropTypes.object.isRequired,
results: PropTypes.number.isRequired,
page: PropTypes.number.isRequired
diff --git a/src/client/components/Tree.js b/src/client/components/Tree.js
index 819a0e08..bbb5077f 100644
--- a/src/client/components/Tree.js
+++ b/src/client/components/Tree.js
@@ -40,6 +40,9 @@ class Tree extends Component {
handleCheckboxChange = name => event => {
console.log(name)
console.log(event.target.checked)
+ // this.props.updateFilter({
+ //
+ // })
};
render() {
@@ -166,7 +169,8 @@ class Tree extends Component {
Tree.propTypes = {
classes: PropTypes.object.isRequired,
- data: PropTypes.array.isRequired
+ data: PropTypes.array.isRequired,
+ updateFilter: PropTypes.func.isRequired,
};
export default withStyles(styles)(Tree);
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index e034aedd..946c3e08 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -7,7 +7,7 @@ import { withRouter } from 'react-router-dom';
import compose from 'recompose/compose';
import Paper from '@material-ui/core/Paper';
import TopBar from '../components/TopBar';
-import { Route, Switch } from 'react-router-dom';
+import { Route } from 'react-router-dom';
import Manuscripts from '../components/Manuscripts';
import Main from '../components/Main';
@@ -16,6 +16,7 @@ import {
fetchPlaces,
fetchPlace,
fetchFacet,
+ updateFilter,
fetchResults,
} from '../actions';
@@ -109,6 +110,7 @@ let MapApp = (props) => {
fetchPlace={props.fetchPlace}
fetchFacet={props.fetchFacet}
fetchResults={props.fetchResults}
+ updateFilter={props.updateFilter}
match={props.match}
/>}
/>
@@ -141,7 +143,8 @@ const mapDispatchToProps = ({
fetchPlaces,
fetchPlace,
fetchFacet,
- fetchResults
+ fetchResults,
+ updateFilter,
});
MapApp.propTypes = {
@@ -157,6 +160,7 @@ MapApp.propTypes = {
fetchPlace: PropTypes.func.isRequired,
fetchFacet: PropTypes.func.isRequired,
fetchResults: PropTypes.func.isRequired,
+ updateFilter: PropTypes.func.isRequired,
match: PropTypes.object.isRequired
};
diff --git a/src/client/reducers/search.js b/src/client/reducers/search.js
index a038f2cf..3d069181 100644
--- a/src/client/reducers/search.js
+++ b/src/client/reducers/search.js
@@ -14,8 +14,8 @@ import {
UPDATE_PLACES,
CLEAR_PLACES,
UPDATE_PLACE,
- UPDATE_RESULTS_FILTER,
- SORT_RESULTS
+ SORT_RESULTS,
+ UPDATE_FILTER
} from '../actions';
export const INITIAL_STATE = {
@@ -34,6 +34,10 @@ export const INITIAL_STATE = {
'selected': false
},
},
+ filters: {
+ creationPlace: new Set(),
+ author: new Set(),
+ },
suggestions: [],
suggestionsQuery: '',
fetchingSuggestions: false,
@@ -128,9 +132,8 @@ const search = (state = INITIAL_STATE, action) => {
'places': {},
fetchingPlaces: false
};
-
- case UPDATE_RESULTS_FILTER:
- return updateResultsFilter(state, action);
+ case UPDATE_FILTER:
+ return updateFilter(state, action);
case SORT_RESULTS:
//console.log(action)
return {
@@ -143,16 +146,16 @@ const search = (state = INITIAL_STATE, action) => {
}
};
-const updateResultsFilter = (state, action) => {
+const updateFilter = (state, action) => {
const { property, value } = action.filter;
- let nSet = state.resultsFilter[property];
+ let nSet = state.filters[property];
if (nSet.has(value)) {
nSet.delete(value);
} else {
nSet.add(value);
}
- const newFilter = updateObject(state.resultsFilter, { [property]: nSet });
- return updateObject(state, { resultsFilter: newFilter });
+ const newFilter = updateObject(state.filters, { [property]: nSet });
+ return updateObject(state, { filters: newFilter });
};
const updateObject = (oldObject, newValues) => {
--
GitLab