components: people-browser: store filter state between pages

Fixes #96
tdfischer · Oct 22, 2018 · 07b844c · 07b844c
1 parent e4f0694
commit 07b844c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/assets/js/components/PeopleIndex.js b/assets/js/components/PeopleIndex.js
@@ -100,6 +100,7 @@ export class PeopleIndex extends Component {
             copied: false,
         }
         this.onCopy = this.onCopy.bind(this)
+        this.onFilterChange = this.onFilterChange.bind(this)
         if (this.props.urlFilter) {
             this.props.filter.set(this.props.urlFilter)
         }
@@ -110,6 +111,10 @@ export class PeopleIndex extends Component {
         copy(this.props.selection.join(', '))
     }
 
+    onFilterChange(filter) {
+        this.props.filter.set(filter)
+    }
+
     render() {
         const props = this.props
         return (
@@ -131,7 +136,7 @@ export class PeopleIndex extends Component {
                         <Tagger />
                     </Grid>
                 </Grid>
-                <Grid container><Grid item xs><Search initialFilter={this.props.initialFilter} filter={props.filter} /></Grid></Grid>
+                <Grid container><Grid item xs><Search initialFilter={this.props.initialFilter} onFilterChange={this.onFilterChange} /></Grid></Grid>
                 <PeopleTable />
             </React.Fragment>
         )

diff --git a/assets/js/components/people-browser/Search.js b/assets/js/components/people-browser/Search.js
@@ -43,7 +43,14 @@ export const Search = props => {
     const initialOp = (props.initialFilter || {op: 'and'}).op
     const boolOp = initialOp == 'or'
     return (
-        <Form initialValues={{op: boolOp, filter: (initialFilter)}} onChange={({values}) => props.filter.set({op: values.op ? 'or' : 'and', children: values.filter})}>
+        <Form initialValues={{op: boolOp, filter: (initialFilter)}} onValueChange={(values) => {
+            if (values.filter && values.filter[0]) {
+                props.onFilterChange({
+                    op: values.op ? 'or' : 'and', 
+                    children: values.filter
+                })
+            }
+        }}>
             {({formApi}) => (
                 <Grid container direction="column" alignItems="stretch" spacing={8}>
                     <Grid item>Match All <MaterialFormSwitch field='op'/> Match Any</Grid>