make FilteredList controlled, such that it can externally persist filter

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/dialogs/DevtoolsDialog.js

@@ -244,6 +244,8 @@ class SendAccountData extends GenericEditor {
 class FilteredList extends React.Component {
     static propTypes = {
         children: PropTypes.any,
+        query: PropTypes.string,
+        onChange: PropTypes.func,
     };
 
     constructor(props, context) {
@@ -251,12 +253,17 @@ class FilteredList extends React.Component {
         this.onQuery = this.onQuery.bind(this);
 
         this.state = {
-            query: '',
+            query: this.props.query,
         };
     }
 
+    componentWillReceiveProps(nextProps) {
+        if (this.state.query !== nextProps.query) this.setState({ query: nextProps.query });
+    }
+
     onQuery(ev) {
         this.setState({ query: ev.target.value });
+        if (this.props.onChange) this.props.onChange(ev.target.value);
     }
 
     filterChildren() {
@@ -295,11 +302,16 @@ class RoomStateExplorer extends DevtoolsComponent {
 
         this.onBack = this.onBack.bind(this);
         this.editEv = this.editEv.bind(this);
+        this.onQueryEventType = this.onQueryEventType.bind(this);
+        this.onQueryStateKey = this.onQueryStateKey.bind(this);
 
         this.state = {
             eventType: null,
             event: null,
             editing: false,
+
+            queryEventType: '',
+            queryStateKey: '',
         };
     }
 
@@ -331,6 +343,14 @@ class RoomStateExplorer extends DevtoolsComponent {
         this.setState({ editing: true });
     }
 
+    onQueryEventType(filterEventType) {
+        this.setState({ queryEventType: filterEventType });
+    }
+
+    onQueryStateKey(filterStateKey) {
+        this.setState({ queryStateKey: filterStateKey });
+    }
+
     render() {
         if (this.state.event) {
             if (this.state.editing) {
@@ -352,41 +372,47 @@ class RoomStateExplorer extends DevtoolsComponent {
             </div>;
         }
 
-        const rows = [];
+        let list = null;
 
         const classes = 'mx_DevTools_RoomStateExplorer_button';
         if (this.state.eventType === null) {
-            Object.keys(this.roomStateEvents).forEach((evType) => {
+            list = <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
-                const stateGroup = this.roomStateEvents[evType];
+                {
-                const stateKeys = Object.keys(stateGroup);
+                    Object.keys(this.roomStateEvents).map((evType) => {
+                        const stateGroup = this.roomStateEvents[evType];
+                        const stateKeys = Object.keys(stateGroup);
 
-                let onClickFn;
+                        let onClickFn;
-                if (stateKeys.length > 1) {
+                        if (stateKeys.length > 1) {
-                    onClickFn = this.browseEventType(evType);
+                            onClickFn = this.browseEventType(evType);
-                } else if (stateKeys.length === 1) {
+                        } else if (stateKeys.length === 1) {
-                    onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                            onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                        }
+
+                        return <button className={classes} key={evType} onClick={onClickFn}>
+                            { evType }
+                        </button>;
+                    })
                 }
-
+            </FilteredList>;
-                rows.push(<button className={classes} key={evType} onClick={onClickFn}>
-                    { evType }
-                </button>);
-            });
         } else {
-            const evType = this.state.eventType;
+            const stateGroup = this.roomStateEvents[this.state.eventType];
-            const stateGroup = this.roomStateEvents[evType];
+
-            Object.keys(stateGroup).forEach((stateKey) => {
+            list = <FilteredList query={this.state.queryStateKey} onChange={this.onQueryStateKey}>
-                const ev = stateGroup[stateKey];
+                {
-                rows.push(<button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
+                    Object.keys(stateGroup).map((stateKey) => {
-                    { stateKey }
+                        const ev = stateGroup[stateKey];
-                </button>);
+                        return <button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
-            });
+                            { stateKey }
+                        </button>;
+                    })
+                }
+            </FilteredList>;
         }
 
         return <div>
             <div className="mx_Dialog_content">
-                <FilteredList>
+                { list }
-                    { rows }
-                </FilteredList>
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -408,11 +434,14 @@ class AccountDataExplorer extends DevtoolsComponent {
         this.onBack = this.onBack.bind(this);
         this.editEv = this.editEv.bind(this);
         this._onChange = this._onChange.bind(this);
+        this.onQueryEventType = this.onQueryEventType.bind(this);
 
         this.state = {
             isRoomAccountData: false,
             event: null,
             editing: false,
+
+            queryEventType: '',
         };
     }
 
@@ -448,6 +477,10 @@ class AccountDataExplorer extends DevtoolsComponent {
         this.setState({ editing: true });
     }
 
+    onQueryEventType(queryEventType) {
+        this.setState({ queryEventType });
+    }
+
     render() {
         if (this.state.event) {
             if (this.state.editing) {
@@ -482,7 +515,7 @@ class AccountDataExplorer extends DevtoolsComponent {
 
         return <div>
             <div className="mx_Dialog_content">
-                <FilteredList>
+                <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
                     { rows }
                 </FilteredList>
             </div>