diff --git a/src/client/actions/index.js b/src/client/actions/index.js
index d5ab3f3834fd6b9ff4c29b89ff36d2710b395085..78bb654dba36777608af0d02faca0a915e817749 100644
--- a/src/client/actions/index.js
+++ b/src/client/actions/index.js
@@ -36,6 +36,8 @@ 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 OPEN_FACET_DIALOG = 'OPEN_FACET_DIALOG';
+export const CLOSE_FACET_DIALOG = 'OPEN_FACET_DIALOG';
export const SORT_RESULTS = 'SORT_RESULTS';
export const CLEAR_ERROR = 'CLEAR_ERROR';
@@ -157,6 +159,12 @@ export const fetchPlaceFailed = (error) => ({
});
// Facet
+export const openFacetDialog = () => ({
+ type: OPEN_FACET_DIALOG,
+});
+export const closeFacetDialog = () => ({
+ type: CLOSE_FACET_DIALOG,
+});
export const fetchFacet = () => ({
type: FETCH_FACET,
});
diff --git a/src/client/components/FacetDialog.js b/src/client/components/FacetDialog.js
index 2fccf2c4940da4857bdc7942601c920598b84ea1..de6f2dd59099a3d5a18f24580ae57d6c0ceea093 100644
--- a/src/client/components/FacetDialog.js
+++ b/src/client/components/FacetDialog.js
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
-import FilterListIcon from '@material-ui/icons/FilterList';
import { withStyles } from '@material-ui/core/styles';
import Tree from './Tree';
import CircularProgress from '@material-ui/core/CircularProgress';
@@ -12,9 +10,6 @@ import purple from '@material-ui/core/colors/purple';
import Typography from '@material-ui/core/Typography';
const styles = () => ({
- root: {
- display: 'inline'
- },
dialogPaper: {
minHeight: '80vh',
maxHeight: '80vh',
@@ -24,82 +19,47 @@ const styles = () => ({
class FacetDialog extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- open: false,
- isLoading: false,
- };
- }
-
componentDidMount = () => {
- console.log('facet dialog mounted, fetch facet')
+ // console.log('facet dialog mounted, fetch facet');
this.props.fetchFacet();
}
- componentDidUpdate(prevProps) {
- if (prevProps.facet.fetchingFacet !== this.props.facet.fetchingFacet) {
- this.setState({
- isLoading: this.props.facet.fetchingFacet,
- });
- }
- }
-
-
- handleClickOpen = () => this.setState({ open: true });
-
- handleClose = () => this.setState({ open: false });
render() {
- const { classes, propertyLabel, facet } = this.props;
- //console.log(facet)
+ const { classes } = this.props;
return (
- <div className={classes.root}>
- <IconButton
- onClick={this.handleClickOpen}
- aria-label="Filter"
- >
- <FilterListIcon />
- </IconButton>
- <Dialog
- classes={{ paper: classes.dialogPaper }}
- open={this.state.open}
- onClose={this.handleClose}
- aria-labelledby="form-dialog-title"
- >
- <DialogTitle disableTypography={true}>
- <Typography variant="h6">{propertyLabel}</Typography>
- </DialogTitle>
- <DialogContent>
- {this.state.isLoading ?
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
- :
- <Tree
- data={facet.facetValues.creationPlace}
- fetchFacet={this.props.fetchFacet}
- fetchManuscripts={this.props.fetchManuscripts}
- fetchPlaces={this.props.fetchPlaces}
- updateFilter={this.props.updateFilter}
- updatePage={this.props.updatePage}
- />}
- </DialogContent>
- </Dialog>
- </div>
+ <Dialog
+ classes={{ paper: classes.dialogPaper }}
+ open={this.props.facet.facetDialogOpen}
+ onClose={this.props.closeFacetDialog}
+ aria-labelledby="form-dialog-title"
+ >
+ <DialogTitle disableTypography={true}>
+ <Typography variant="h6">{this.props.propertyLabel}</Typography>
+ </DialogTitle>
+ <DialogContent>
+ {this.props.facet.fetchingFacet ?
+ <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ :
+ <Tree
+ data={this.props.facet.facetValues.creationPlace}
+ fetchFacet={this.props.fetchFacet}
+ updateFilter={this.props.updateFilter}
+ />}
+ </DialogContent>
+ </Dialog>
);
}
}
-
FacetDialog.propTypes = {
classes: PropTypes.object.isRequired,
property: PropTypes.string.isRequired,
propertyLabel: PropTypes.string.isRequired,
fetchFacet: PropTypes.func.isRequired,
- fetchManuscripts: PropTypes.func.isRequired,
- fetchPlaces: PropTypes.func.isRequired,
- updatePage: PropTypes.func.isRequired,
facet: PropTypes.object.isRequired,
- updateFilter: PropTypes.func.isRequired
+ updateFilter: PropTypes.func.isRequired,
+ closeFacetDialog: PropTypes.func.isRequired
};
export default withStyles(styles)(FacetDialog);
diff --git a/src/client/components/Manuscripts.js b/src/client/components/Manuscripts.js
index f41848cc4024713fbef0ccd8d3138885d04b3934..18076b0a9fa64547b7b16c381baba0f4d564ca81 100644
--- a/src/client/components/Manuscripts.js
+++ b/src/client/components/Manuscripts.js
@@ -21,15 +21,12 @@ let Manuscripts = props => {
render={routeProps =>
<ResultTable
rows={props.search.manuscripts}
- facet={props.facet}
fetchManuscripts={props.fetchManuscripts}
- fetchPlaces={props.fetchPlaces}
fetchingManuscripts={props.search.fetchingManuscripts}
- fetchFacet={props.fetchFacet}
resultCount={props.search.manuscriptCount}
- updateFilter={props.updateFilter}
page={props.search.page}
updatePage={props.updatePage}
+ openFacetDialog={props.openFacetDialog}
routeProps={routeProps}
/>
}
@@ -68,16 +65,13 @@ let Manuscripts = props => {
};
Manuscripts.propTypes = {
- facet: PropTypes.object.isRequired,
map: PropTypes.object.isRequired,
search: PropTypes.object.isRequired,
fetchManuscripts: PropTypes.func.isRequired,
fetchPlaces: PropTypes.func.isRequired,
fetchPlace: PropTypes.func.isRequired,
- fetchFacet: PropTypes.func.isRequired,
- fetchResults: PropTypes.func.isRequired,
- updateFilter: PropTypes.func.isRequired,
updatePage: PropTypes.func.isRequired,
+ openFacetDialog: PropTypes.func.isRequired,
routeProps: PropTypes.object.isRequired
};
diff --git a/src/client/components/ResultTable.js b/src/client/components/ResultTable.js
index 67de20fc0645ec2601a4ffdb084cf718be0a87fb..98fca3e4148edb7af70eaa31aa7cd4ada3d55a47 100644
--- a/src/client/components/ResultTable.js
+++ b/src/client/components/ResultTable.js
@@ -17,7 +17,7 @@ const styles = (theme) => ({
tableContainer: {
marginTop: 72,
overflow: 'auto',
- width: '100% - 8px'
+ width: 'calc(100% - 8px)'
},
table: {
//marginTop: 72,
@@ -70,9 +70,8 @@ class ResultTable extends React.Component {
page = parseInt(parse(this.props.routeProps.location.search).page);
}
this.props.updatePage(page);
- console.log('mounted, fetching manuscripts')
+ // console.log('mounted, fetching manuscripts')
this.props.fetchManuscripts();
- //this.props.fetchFacet();
}
componentDidUpdate = prevProps => {
@@ -247,14 +246,11 @@ class ResultTable extends React.Component {
<div className={classes.tableContainer}>
<Table className={classes.table}>
<ResultTableHead
- fetchFacet={this.props.fetchFacet}
fetchManuscripts={this.props.fetchManuscripts}
- fetchPlaces={this.props.fetchPlaces}
- updateFilter={this.props.updateFilter}
updatePage={this.props.updatePage}
- facet={this.props.facet}
resultCount={this.props.resultCount}
page={this.props.page}
+ openFacetDialog={this.props.openFacetDialog}
routeProps={this.props.routeProps}
/>
<TableBody>
@@ -302,15 +298,12 @@ class ResultTable extends React.Component {
ResultTable.propTypes = {
classes: PropTypes.object.isRequired,
rows: PropTypes.array.isRequired,
- fetchFacet: PropTypes.func.isRequired,
fetchManuscripts: PropTypes.func.isRequired,
- fetchPlaces: PropTypes.func.isRequired,
fetchingManuscripts: PropTypes.bool.isRequired,
- facet: PropTypes.object.isRequired,
resultCount: PropTypes.number.isRequired,
- updateFilter: PropTypes.func.isRequired,
page: PropTypes.number.isRequired,
updatePage: PropTypes.func.isRequired,
+ openFacetDialog: PropTypes.func.isRequired,
routeProps: PropTypes.object.isRequired
};
diff --git a/src/client/components/ResultTableHead.js b/src/client/components/ResultTableHead.js
index 1bbceb75108c3a22a1c8f72ff19c712707d1fe8a..b3ac3e5bdb0dd0fe11e104e441b8891b50564ba9 100644
--- a/src/client/components/ResultTableHead.js
+++ b/src/client/components/ResultTableHead.js
@@ -5,7 +5,8 @@ import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import Tooltip from '@material-ui/core/Tooltip';
-import FacetDialog from './FacetDialog';
+import IconButton from '@material-ui/core/IconButton';
+import FilterListIcon from '@material-ui/icons/FilterList';
import TablePagination from '@material-ui/core/TablePagination';
import ResultTablePaginationActions from './ResultTablePaginationActions';
// import InfoIcon from '@material-ui/icons/InfoOutlined';
@@ -96,6 +97,10 @@ class ResultTableHead extends React.Component {
this.setState({ order, orderBy });
};
+ handleFacetButtonOnClick = () => {
+ this.props.openFacetDialog();
+ }
+
// <TableSortLabel
// active={orderBy === column.property}
// direction={order}
@@ -132,15 +137,12 @@ class ResultTableHead extends React.Component {
{column.label}
{column.filter &&
<Tooltip title={'Filter ' + column.label}>
- <FacetDialog
- property={column.property}
- propertyLabel={column.label}
- fetchFacet={this.props.fetchFacet}
- fetchManuscripts={this.props.fetchManuscripts}
- fetchPlaces={this.props.fetchPlaces}
- updateFilter={this.props.updateFilter}
- updatePage={this.props.updatePage}
- facet={this.props.facet} />
+ <IconButton
+ onClick={this.handleFacetButtonOnClick}
+ aria-label="Filter"
+ >
+ <FilterListIcon />
+ </IconButton>
</Tooltip>}
</TableCell>
);
@@ -153,15 +155,12 @@ class ResultTableHead extends React.Component {
ResultTableHead.propTypes = {
classes: PropTypes.object.isRequired,
- fetchFacet: PropTypes.func.isRequired,
- fetchManuscripts: PropTypes.func.isRequired,
- fetchPlaces: PropTypes.func.isRequired,
- updateFilter: PropTypes.func.isRequired,
- facet: PropTypes.object.isRequired,
resultCount: PropTypes.number.isRequired,
page: PropTypes.number.isRequired,
updatePage: PropTypes.func.isRequired,
- routeProps: PropTypes.object.isRequired
+ fetchManuscripts: PropTypes.func.isRequired,
+ routeProps: PropTypes.object.isRequired,
+ openFacetDialog: PropTypes.func.isRequired
};
export default withStyles(styles)(ResultTableHead);
diff --git a/src/client/components/Tree.js b/src/client/components/Tree.js
index 076492366db6a2c9102164cda04f53bade232ab4..2fd355744788334346db431c171760c77a300c8d 100644
--- a/src/client/components/Tree.js
+++ b/src/client/components/Tree.js
@@ -38,15 +38,10 @@ class Tree extends Component {
}
handleCheckboxChange = name => () => {
- //console.log(name)
- //console.log(event.target.checked)
this.props.updateFilter({
property: 'creationPlace',
value: name
});
- this.props.updatePage(0);
- this.props.fetchManuscripts();
- //this.props.fetchFacet();
};
render() {
@@ -175,10 +170,7 @@ Tree.propTypes = {
classes: PropTypes.object.isRequired,
data: PropTypes.array.isRequired,
fetchFacet: PropTypes.func.isRequired,
- fetchManuscripts: PropTypes.func.isRequired,
- fetchPlaces: PropTypes.func.isRequired,
updateFilter: PropTypes.func.isRequired,
- updatePage: PropTypes.func.isRequired
};
export default withStyles(styles)(Tree);
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index 77fa697bcba29ae9a00276aa4bcf9f8f22013b7f..fc110caeb252e12718863399c6610759badfe41c 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -7,9 +7,10 @@ import { withRouter } from 'react-router-dom';
import compose from 'recompose/compose';
import Paper from '@material-ui/core/Paper';
import TopBar from '../components/TopBar';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
import Manuscripts from '../components/Manuscripts';
import Main from '../components/Main';
+import FacetDialog from '../components/FacetDialog';
import {
fetchManuscripts,
@@ -19,6 +20,8 @@ import {
updateFilter,
fetchResults,
updatePage,
+ openFacetDialog,
+ closeFacetDialog
} from '../actions';
const logoPadding = 50;
@@ -87,10 +90,9 @@ const styles = theme => ({
});
let MapApp = (props) => {
- const { classes, facet, map, search } = props;
+ const { classes } = props;
// browser
// error,
- // console.log(props.facet)
return (
<div className={classes.root}>
<div className={classes.appFrame}>
@@ -103,22 +105,28 @@ let MapApp = (props) => {
path="/manuscripts"
render={routeProps =>
<Manuscripts
- facet={facet}
- map={map}
- search={search}
+ map={props.map}
+ search={props.search}
fetchManuscripts={props.fetchManuscripts}
fetchPlaces={props.fetchPlaces}
fetchPlace={props.fetchPlace}
- fetchFacet={props.fetchFacet}
- fetchResults={props.fetchResults}
- updateFilter={props.updateFilter}
updatePage={props.updatePage}
+ openFacetDialog={props.openFacetDialog}
routeProps={routeProps}
/>}
/>
</div>
</React.Fragment>
</Router>
+ <FacetDialog
+ property='creationPlace'
+ propertyLabel='Creation place'
+ facet={props.facet}
+ fetchFacet={props.fetchFacet}
+ updateFilter={props.updateFilter}
+ updatePage={props.updatePage}
+ closeFacetDialog={props.closeFacetDialog}
+ />
<Paper className={classes.footer}>
<img className={classes.oxfordLogo} src='img/logos/oxford-logo-white.png' alt='Oxford University logo'/>
<img className={classes.pennLogo} src='img/logos/penn-logo-white.png' alt='Oxford University logo'/>
@@ -150,6 +158,8 @@ const mapDispatchToProps = ({
fetchResults,
updateFilter,
updatePage,
+ openFacetDialog,
+ closeFacetDialog
});
MapApp.propTypes = {
@@ -167,6 +177,8 @@ MapApp.propTypes = {
fetchResults: PropTypes.func.isRequired,
updateFilter: PropTypes.func.isRequired,
updatePage: PropTypes.func.isRequired,
+ openFacetDialog: PropTypes.func.isRequired,
+ closeFacetDialog: PropTypes.func.isRequired
};
export default compose(
diff --git a/src/client/epics/index.js b/src/client/epics/index.js
index d50668e2dcde15f12db6887b7b94106a8701d9ef..1239a781ec6c8a80fbb277a551ca4ef2a6f8b636 100644
--- a/src/client/epics/index.js
+++ b/src/client/epics/index.js
@@ -71,7 +71,6 @@ const getFacet = (action$, state$) => action$.pipe(
let params = {};
let filters = {};
let activeFilters = false;
- console.log(state.facet.facetFilters)
for (const [key, value] of Object.entries(state.facet.facetFilters)) {
if (value.size != 0) {
activeFilters = true;
@@ -83,7 +82,6 @@ const getFacet = (action$, state$) => action$.pipe(
}
const searchUrl = apiUrl + 'facets';
const requestUrl = `${searchUrl}?${stringify(params)}`;
- console.log(requestUrl)
return ajax.getJSON(requestUrl).pipe(
map(response => updateFacet({ facetValues: response }))
);
diff --git a/src/client/reducers/facet.js b/src/client/reducers/facet.js
index a7188f1e9869f4f8edb98c8c5c218ea157dfd2bd..ceabd9758bd41617d7e39b83bf91f0325a9e1499 100644
--- a/src/client/reducers/facet.js
+++ b/src/client/reducers/facet.js
@@ -1,7 +1,9 @@
import {
FETCH_FACET,
UPDATE_FACET,
- UPDATE_FILTER
+ UPDATE_FILTER,
+ OPEN_FACET_DIALOG,
+ CLOSE_FACET_DIALOG,
} from '../actions';
export const INITIAL_STATE = {
@@ -23,11 +25,16 @@ export const INITIAL_STATE = {
creationPlace: new Set(),
author: new Set(),
},
- fetchingFacet : false
+ fetchingFacet : false,
+ facetDialogOpen: false
};
const facet = (state = INITIAL_STATE, action) => {
switch (action.type) {
+ case OPEN_FACET_DIALOG:
+ return { ...state, facetDialogOpen: true };
+ case CLOSE_FACET_DIALOG:
+ return { ...state, facetDialogOpen: false };
case FETCH_FACET:
return { ...state, fetchingFacet: true };
case UPDATE_FACET: