Move facet dialog to top level

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,
 });

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);

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
 };
 

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
 };
 

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);

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);

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(

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 }))
     );

src/client/reducers/facet.js

 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: