URI filters to objects, new component for showing active filters

src/client/components/facet_bar/ChipsArray.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+import Paper from '@material-ui/core/Paper';
+//import TagFacesIcon from '@material-ui/icons/TagFaces';
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    padding: theme.spacing.unit / 2,
+  },
+  chip: {
+    margin: theme.spacing.unit / 2,
+  },
+});
+
+class ChipsArray extends React.Component {
+
+  handleDelete = data => () => {
+    if (data.label === 'React') {
+      alert('Why would you want to delete React?! :)'); // eslint-disable-line no-alert
+      return;
+    }
+
+    this.setState(state => {
+      const chipData = [...state.chipData];
+      const chipToDelete = chipData.indexOf(data);
+      chipData.splice(chipToDelete, 1);
+      return { chipData };
+    });
+  };
+
+  render() {
+    const { classes, data } = this.props;
+    return (
+      <Paper className={classes.root}>
+        {data !== null && data.map(item => {
+          let icon = null;
+
+          // if (item.label === 'React') {
+          //   icon = <TagFacesIcon />;
+          // }
+
+          return (
+            <Chip
+              key={item.key}
+              icon={icon}
+              label={item.label}
+              onDelete={this.handleDelete(item)}
+              className={classes.chip}
+            />
+          );
+        })}
+      </Paper>
+    );
+  }
+}
+
+ChipsArray.propTypes = {
+  classes: PropTypes.object.isRequired,
+  data: PropTypes.object,
+};
+
+export default withStyles(styles)(ChipsArray);

src/client/components/facet_bar/Tree.js

@@ -12,6 +12,7 @@ import IconButton from '@material-ui/core/IconButton';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 import Typography from '@material-ui/core/Typography';
+import ChipsArray from './ChipsArray';
 
 const styles = () => ({
   facetSearchContainer: {
@@ -84,6 +85,10 @@ class Tree extends Component {
   }
 
   componentDidUpdate = prevProps => {
+    // if (this.props.facetID === 'productionPlace') {
+    //   console.log(this.props.facet.values)
+    // }
+
     if (prevProps.facet.values != this.props.facet.values) {
       this.setState({
         treeData: this.props.facet.values
@@ -127,7 +132,10 @@ class Tree extends Component {
       facetClass: this.props.facetClass,
       facetID: this.props.facetID,
       option: this.props.facet.filterType,
-      value: treeObj.node.id
+      value: {
+        id: treeObj.node.id,
+        label: treeObj.node.prefLabel
+      }
     });
   };
 
@@ -218,6 +226,7 @@ class Tree extends Component {
             : 0,
       });
 
+    //<ChipsArray data={this.props.facet.uriFilter} />}
     return (
       <React.Fragment>
         {isFetching ?
@@ -226,6 +235,7 @@ class Tree extends Component {
           </div>
           :
           <React.Fragment>
+
             {searchField && facet.filterType !== 'spatialFilter' &&
               <div className={classes.facetSearchContainer}>
                 <Input

src/client/epics/index.js

@@ -180,9 +180,9 @@ export const stateToUrl = ({
   let activeUriFilters = false;
   let activeSpatialFilters = false;
   for (const [key, value] of Object.entries(facets)) {
-    if (value.uriFilter.size != 0) {
+    if (value.uriFilter !== null) {
       activeUriFilters = true;
-      uriFilters[key] = Array.from(value.uriFilter);
+      uriFilters[key] = Object.keys(value.uriFilter);
     } else if (has(value, 'spatialFilter') && value.spatialFilter !== null) {
       activeSpatialFilters = true;
       spatialFilters[key] = boundsToValues(value.spatialFilter._bounds);

src/client/reducers/helpers.js

+import { has, isEmpty } from 'lodash';
+
 export const fetchResults = state => {
   return {
     ...state,
@@ -67,11 +69,14 @@ const updateFacetFilter = (state, action) => {
   const oldFacet = state.facets[facetID];
   let newFacet = {};
   if (oldFacet.filterType === 'uriFilter') {
-    let newUriFilter = oldFacet.uriFilter;
-    if (newUriFilter.has(value)) {
-      newUriFilter.delete(value);
+    let newUriFilter = oldFacet.uriFilter == null ? {} : oldFacet.uriFilter;
+    if (has(newUriFilter, value.id)) {
+      delete newUriFilter[value.id];
+      if (isEmpty(newUriFilter)) {
+        newUriFilter = null;
+      }
     } else {
-      newUriFilter.add(value);
+      newUriFilter[value.id] = value.label;
     }
     newFacet = {
       ...state.facets[facetID],

src/client/reducers/manuscriptsFacets.js

@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
       searchField: false,
       containerClass: 'three',
       filterType: 'uriFilter',
-      uriFilter: new Set()
+      uriFilter: null
     },
     productionPlace: {
       id: 'productionPlace',
@@ -47,7 +47,7 @@ export const INITIAL_STATE = {
       searchField: true,
       containerClass: 'ten',
       filterType: 'uriFilter',
-      uriFilter: new Set(),
+      uriFilter: null,
       spatialFilter: null
     },
     author: {
@@ -65,7 +65,7 @@ export const INITIAL_STATE = {
       searchField: true,
       containerClass: 'ten',
       filterType: 'uriFilter',
-      uriFilter: new Set()
+      uriFilter: null
     },
     // language: {
     //   id: 'language',

src/client/reducers/organizationsFacets.js

@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
       searchField: false,
       containerClass: 'five',
       filterType: 'uriFilter',
-      uriFilter: new Set()
+      uriFilter: null
     },
   }
 };

src/client/reducers/peopleFacets.js

@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
       searchField: false,
       containerClass: 'five',
       filterType: 'uriFilter',
-      uriFilter: new Set()
+      uriFilter: null
     },
     place: {
       id: 'place',
@@ -47,7 +47,7 @@ export const INITIAL_STATE = {
       searchField: true,
       containerClass: 'ten',
       filterType: 'uriFilter',
-      uriFilter: new Set()
+      uriFilter: null
     },
   }
 };

src/client/reducers/placesFacets.js

@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
       searchField: false,
       containerClass: 'five',
       filterType: 'uriFilter',
-      uriFilter: new Set()
+      uriFilter: null
     },
     area: {
       id: 'area',
@@ -47,7 +47,7 @@ export const INITIAL_STATE = {
       searchField: true,
       containerClass: 'ten',
       filterType: 'uriFilter',
-      uriFilter: new Set(),
+      uriFilter: null,
       spatialFilter: null
     },
   }

src/client/reducers/worksFacets.js

@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
       searchField: false,
       containerClass: 'five',
       filterType: 'uriFilter',
-      uriFilter: new Set()
+      uriFilter: null
     },
   },
 };