transform (#4936)

packages/insomnia/src/ui/components/sidebar/sidebar-filter.tsx

@@ -1,8 +1,7 @@
-import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import { HotKeyRegistry } from 'insomnia-common';
-import React, { PureComponent } from 'react';
+import React, { FC, useCallback, useRef } from 'react';
 
-import { AUTOBIND_CFG, DEBOUNCE_MILLIS, SortOrder } from '../../../common/constants';
+import { SortOrder } from '../../../common/constants';
 import { hotKeyRefs } from '../../../common/hotkeys';
 import { executeHotKey } from '../../../common/hotkeys-listener';
 import { KeydownBinder } from '../keydown-binder';
@@ -15,67 +14,45 @@ interface Props {
   filter: string;
   hotKeyRegistry: HotKeyRegistry;
 }
-
-@autoBindMethodsForReact(AUTOBIND_CFG)
-export class SidebarFilter extends PureComponent<Props> {
-  _input: HTMLInputElement | null = null;
-  _triggerTimeout: NodeJS.Timeout | null = null;
-
-  _setInputRef(input: HTMLInputElement) {
-    this._input = input;
-  }
-
-  _handleClearFilter() {
-    this.props.onChange('');
-
-    if (this._input) {
-      this._input.value = '';
-
-      this._input.focus();
+export const SidebarFilter: FC<Props> = ({ filter, hotKeyRegistry, sidebarSort, onChange }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const handleClearFilter = useCallback(() => {
+    onChange('');
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      inputRef.current.focus();
     }
-  }
-
-  _handleOnChange(event: React.SyntheticEvent<HTMLInputElement>) {
-    const value = event.currentTarget.value;
-    if (this._triggerTimeout) {
-      clearTimeout(this._triggerTimeout);
-    }
-    this._triggerTimeout = setTimeout(() => {
-      this.props.onChange(value);
-    }, DEBOUNCE_MILLIS);
-  }
-
-  _handleKeydown(event: KeyboardEvent) {
+  }, [onChange]);
+  const handleOnChange = useCallback((event: React.SyntheticEvent<HTMLInputElement>) => {
+    onChange(event.currentTarget.value);
+  }, [onChange]);
+  const handleKeydown = useCallback((event: KeyboardEvent) => {
     executeHotKey(event, hotKeyRefs.SIDEBAR_FOCUS_FILTER, () => {
-      this._input?.focus();
+      inputRef.current?.focus();
     });
-  }
-
-  render() {
-    const { filter, hotKeyRegistry, sidebarSort } = this.props;
-    return (
-      <KeydownBinder onKeydown={this._handleKeydown}>
-        <div className="sidebar__filter">
-          <div className="form-control form-control--outlined form-control--btn-right">
-            <input
-              ref={this._setInputRef}
-              type="text"
-              placeholder="Filter"
-              defaultValue={filter}
-              onChange={this._handleOnChange}
-            />
-            {filter && (
-              <button className="form-control__right" onClick={this._handleClearFilter}>
-                <i className="fa fa-times-circle" />
-              </button>
-            )}
-          </div>
-          <SidebarSortDropdown handleSort={sidebarSort} />
-          <SidebarCreateDropdown
-            hotKeyRegistry={hotKeyRegistry}
+  }, []);
+  return (
+    <KeydownBinder onKeydown={handleKeydown}>
+      <div className="sidebar__filter">
+        <div className="form-control form-control--outlined form-control--btn-right">
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder="Filter"
+            defaultValue={filter}
+            onChange={handleOnChange}
           />
+          {filter && (
+            <button className="form-control__right" onClick={handleClearFilter}>
+              <i className="fa fa-times-circle" />
+            </button>
+          )}
         </div>
-      </KeydownBinder>
-    );
-  }
-}
+        <SidebarSortDropdown handleSort={sidebarSort} />
+        <SidebarCreateDropdown
+          hotKeyRegistry={hotKeyRegistry}
+        />
+      </div>
+    </KeydownBinder>
+  );
+};