From 43578d23664368cc63201ae89317fd68465dd00e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Nov 2017 22:16:53 +0000
Subject: [PATCH 1/2] make FilteredList controlled, such that it can externally
 persist filter

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/dialogs/DevtoolsDialog.js           | 87 +++++++++++++------
 1 file changed, 60 insertions(+), 27 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index a7155ad1..85ab4029 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/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) => {
-                const stateGroup = this.roomStateEvents[evType];
-                const stateKeys = Object.keys(stateGroup);
+            list = <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
+                {
+                    Object.keys(this.roomStateEvents).map((evType) => {
+                        const stateGroup = this.roomStateEvents[evType];
+                        const stateKeys = Object.keys(stateGroup);
 
-                let onClickFn;
-                if (stateKeys.length > 1) {
-                    onClickFn = this.browseEventType(evType);
-                } else if (stateKeys.length === 1) {
-                    onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                        let onClickFn;
+                        if (stateKeys.length > 1) {
+                            onClickFn = this.browseEventType(evType);
+                        } else if (stateKeys.length === 1) {
+                            onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                        }
+
+                        return <button className={classes} key={evType} onClick={onClickFn}>
+                            { evType }
+                        </button>;
+                    })
                 }
-
-                rows.push(<button className={classes} key={evType} onClick={onClickFn}>
-                    { evType }
-                </button>);
-            });
+            </FilteredList>;
         } else {
-            const evType = this.state.eventType;
-            const stateGroup = this.roomStateEvents[evType];
-            Object.keys(stateGroup).forEach((stateKey) => {
-                const ev = stateGroup[stateKey];
-                rows.push(<button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
-                    { stateKey }
-                </button>);
-            });
+            const stateGroup = this.roomStateEvents[this.state.eventType];
+
+            list = <FilteredList query={this.state.queryStateKey} onChange={this.onQueryStateKey}>
+                {
+                    Object.keys(stateGroup).map((stateKey) => {
+                        const ev = stateGroup[stateKey];
+                        return <button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
+                            { stateKey }
+                        </button>;
+                    })
+                }
+            </FilteredList>;
         }
 
         return <div>
             <div className="mx_Dialog_content">
-                <FilteredList>
-                    { rows }
-                </FilteredList>
+                { list }
             </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>

From 662a6297e7c71de5705668cdbd2f8eb6f671312e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 25 Jan 2018 21:06:35 +0000
Subject: [PATCH 2/2] FilteredList, now being a controlled component does not
 need state

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/DevtoolsDialog.js | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index e7f66bc0..3ce1dfe7 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -252,24 +252,15 @@ class FilteredList extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.onQuery = this.onQuery.bind(this);
-
-        this.state = {
-            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() {
-        if (this.state.query) {
-            const lowerQuery = this.state.query.toLowerCase();
+        if (this.props.query) {
+            const lowerQuery = this.props.query.toLowerCase();
             return this.props.children.filter((child) => child.key.toLowerCase().includes(lowerQuery));
         }
         return this.props.children;
@@ -279,7 +270,7 @@ class FilteredList extends React.Component {
         return <div>
             <input size="64"
                    onChange={this.onQuery}
-                   value={this.state.query}
+                   value={this.props.query}
                    placeholder={_t('Filter results')}
                    className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" />
             { this.filterChildren() }